/* LM intro - styles, ported from the designer's lm-intro package. Loaded only on the intro
   page (page-intro.php). Sizes are tied to the viewport width: 1 logo unit = --u. */
:root {
  --ink: #000;
  --paper: #fff;
  --ink-muted: #E4E4E4;                                    /* country names at rest (site-wide "unselected" colour) */
  --ink-selected: #000;                                    /* country names on hover / focus / press */
  --m: 1.4vw;                                              /* side margin */
  --u: calc((100vw - 2 * var(--m)) / 1632);                /* one unit of the logo's coordinate system */
  --top: calc(var(--m) + env(safe-area-inset-top, 0px));   /* top position of the logo once it has moved up */
  --img-h: min(56vh, 62vw);                                /* height of the image fan (width = 0.8 x height) */
  --grow: 1;                                               /* how much the logo grows while it moves up (phones: 1.5) */
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; background: var(--paper); }
body { overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.stage { position: fixed; inset: 0; z-index: 2; transform-origin: 0 0; display: flex; align-items: flex-start; padding: var(--top) var(--m) 0; }
#wm { width: 100%; height: auto; display: block; overflow: visible; fill: var(--ink); will-change: transform; transform-origin: 0 0; }

/* Countries: #E4E4E4 at rest, black on hover / focus / press - the same rule as the filter rows on the site.
   Only a country with a URL in Intro Settings has an href (and so a pointer cursor). */
.line { outline: none; -webkit-tap-highlight-color: transparent; }
.line[href] { cursor: pointer; }
.entering .line { pointer-events: none; }
.line path { fill: var(--ink-muted); transition: fill .2s ease; }
@media (hover: hover) { .line:hover path { fill: var(--ink-selected); } }
.line:focus-visible path, .line:active path { fill: var(--ink-selected); }

/* Image fan: stacked in the middle of the screen, independent of the logo */
.gallery { position: absolute; left: 50%; top: 50%; width: calc(var(--img-h) * 0.8); height: var(--img-h);
           transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.gallery figure { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: inset(100% 0 0 0); background: #eee; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }

/* Skip button: only visible when it receives keyboard focus */
.skip { position: fixed; left: var(--m); bottom: calc(1.6vw + env(safe-area-inset-bottom, 0px)); z-index: 7;
        font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
        color: var(--ink); background: var(--paper); border: 0; padding: 8px 10px; cursor: pointer; }
.skip:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* ---------------------------------------------------------------------------------------------
   Phone layout (viewport <= 700 px wide). Based on the Figma mobile INTRO (402 px wide).
   The wordmark LE MANAGEMENT fits the width of the phone. While LM moves up it grows by 50 % (--grow),
   and the country names grow with it (they sit inside the same SVG). Left margin 24 px (6vw); the cap top
   of LM ends 66 px (16.4vw) from the top of the visible area.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --m: 6vw;
    --grow: 1.5;
    --top: calc(16.4vw + env(safe-area-inset-top, 0px) - 4.21465 * var(--u) * var(--grow));
    --img-h: min(52vh, 118vw);                             /* image fan: up to ~94 % of the width */
  }
}