/* ============================================================================
   FOW TRAVEL — THE HERO PRELUDE · Orbital Brand Matter (v0.1)
   The look of the fresh top entry; fow_prelude.js is its one owner and
   index.html's head gate decides, before the first paint, whether it runs.

   THE FIELD IS THE HERO'S OWN SPACE. The page under the Prelude is hidden, not
   covered: the Hero section keeps its own night and its canvas, and the brand
   matter is a Prelude layer drawn inside that canvas by hero3d.js (§6.6). This
   sheet only draws the exact brand (the accepted PNGs, whole) and the entry:

     .pre__enter  the entry control: the FRAME OF WAYS symbol, a real button
     .pre__word   the FOW Travel wordmark, one raster object; after the entry it
                  waits under the headline and then docks into the Header's mark
     .pre__veil   only when the 3-D layer is not drawing (flat / reduced fail /
                  degraded): a plain field over the Hero's night, no world imitated
   ============================================================================ */

/* the sentinel: the head gate runs a Prelude only when this sheet has arrived */
:root { --prelude: 1; }

.pre { display: none; }
html[data-prelude]:not(.no-js) .pre { display: block; }

/* THE PAGE UNDER THE PRELUDE. Everything waits unseen (and inert, from the script)
   except the Hero section's own field: its night and its canvas. The page is kept
   PAINTED at a vanishing opacity rather than hidden, so it is rasterised during the
   load exactly as it would be without a Prelude -- hidden, its first raster (~0.5 s of
   GPU work, measured) would land on the entry's release instead. The Header's mark
   stays hidden until the brand transfer lands on it. */
html[data-prelude]:not([data-prelude="open"]):not([data-prelude="transfer"]):not(.no-js) :is(#ih, main > :not(.jr-a), #atlas > :not(#gl)) { opacity: .001 !important; }
html[data-prelude]:not(.no-js) #ih .ih__brand .mark { opacity: 0; }
/* while the Prelude's layer draws into the Hero canvas, the canvas is shown from
   that first frame (before the world's own; the layer's veil keeps the world
   unseen until it is presented) */
html[data-prelude][data-prelude-gl]:not(.no-js) .hero__gl { opacity: 1; transition: none; }

.pre {
  position: fixed; inset: 0; z-index: 2000;
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none;
  --pl-s: clamp(104px, 5.2vw + 70px, 212px);                /* symbol width */
  --pl-h: calc(var(--pl-s) * 905 / 976);                    /* its height (the mark window) */
  --pl-w: clamp(214px, 11vw + 138px, 400px);                /* wordmark width */
  --pl-y: 41%;                                              /* the entry's centre */
  --pl-gap: clamp(30px, 1.4vw + 18px, 52px);
  --pl-ink: #EDE9DE;
  --pl-ink-3: #A3A29B;
}
/* after the entry the layer is decorative only: the Hero is the reader's */
.pre.is-open { pointer-events: none; }

.pre__veil {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 44%, rgba(34, 40, 62, .55), rgba(34, 40, 62, 0) 70%),
    linear-gradient(180deg, #05060C 0%, #080B14 42%, #0B0F1A 78%, #070911 100%);
}
.pre.is-dom .pre__veil { opacity: .92; transition: opacity 700ms var(--ease, ease); }

.pre__lock { position: absolute; left: 50%; top: var(--pl-y); width: 0; height: 0; }

/* the Hero instrument's axis, struck once at the lock (a hairline along the symbol's own rail) */
.pre__axis {
  position: absolute; left: calc(var(--pl-s) * -1.9); width: calc(var(--pl-s) * 3.8); top: -.5px; height: 1px;
  background: linear-gradient(90deg, rgba(237,233,222,0), rgba(237,233,222,.5) 34%, rgba(237,233,222,.5) 66%, rgba(237,233,222,0));
  opacity: 0; transform: scaleX(.18); pointer-events: none;
}
.pre.is-lock .pre__axis { animation: pl-axis 1100ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl-axis {
  0%   { opacity: 0;   transform: scaleX(.18); }
  22%  { opacity: .9;  transform: scaleX(1); }
  100% { opacity: 0;   transform: scaleX(1.08); }
}

/* THE ENTRY — the assembled symbol is the control. Its box: the symbol, the
   locus brackets and the cue above it (one hit target, never moving) */
.pre__enter {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  left: calc(var(--pl-s) * -.5 - 26px); top: calc(var(--pl-h) * -.5 - 58px);
  width: calc(var(--pl-s) + 52px); height: calc(var(--pl-h) + 58px + 26px);
  cursor: default; outline: none; -webkit-tap-highlight-color: transparent;
  visibility: hidden;
}
.pre.is-lock .pre__enter { visibility: visible; }   /* reachable only once the symbol exists */
.pre.is-ready .pre__enter { cursor: pointer; }

.pre__sym { position: absolute; left: 26px; top: 58px; width: var(--pl-s); opacity: 0; }
.pre__sym .mark, .pre__word-s .mark { --mw: 100%; }
.mark--pl-sym { --iw: 1254; --x0: 139; --y0: 148; --cw: 976; --ch: 905; }
/* the 3-D matter registers onto this exact image and hands over in one frame */
.pre.is-lock .pre__sym { opacity: 1; transition: opacity 260ms linear; }
.pre.is-go .pre__sym { opacity: 0; transition: none; }
.pre__sym img { transition: transform 420ms var(--ease, ease); }
.pre.is-ready .pre__enter:active .pre__sym img { transform: scale(.975); transition-duration: 90ms; }

/* the locus: four struck corner brackets (the instrument's own mark of address) */
.pre__locus {
  position: absolute; left: 10px; right: 10px; top: 42px; bottom: 10px; pointer-events: none;
  --lc: rgba(237, 233, 222, .5); --ll: 12px;
  background:
    linear-gradient(var(--lc), var(--lc)) top left / var(--ll) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) top left / 1px var(--ll) no-repeat,
    linear-gradient(var(--lc), var(--lc)) top right / var(--ll) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) top right / 1px var(--ll) no-repeat,
    linear-gradient(var(--lc), var(--lc)) bottom left / var(--ll) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) bottom left / 1px var(--ll) no-repeat,
    linear-gradient(var(--lc), var(--lc)) bottom right / var(--ll) 1px no-repeat,
    linear-gradient(var(--lc), var(--lc)) bottom right / 1px var(--ll) no-repeat;
  opacity: 0; transform: scale(1.14);
  transition: opacity 520ms var(--ease, ease), transform 620ms var(--ease, ease);
}
.pre.is-cue .pre__locus { opacity: .5; transform: scale(1.06); }
.pre.is-ready .pre__locus { opacity: .78; transform: scale(1); }
.pre.is-ready .pre__enter:hover .pre__locus { opacity: 1; transform: scale(.955); --lc: rgba(237, 233, 222, .86); }
.pre.is-ready .pre__enter:focus-visible .pre__locus { opacity: 1; transform: scale(.955); --lc: var(--fc, #F0674A); --ll: 14px; }
.pre.is-ready .pre__enter:focus-visible .pre__locus::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(240, 103, 74, .45); }
/* a quiet light behind the symbol answers hover / focus (the mark itself is never recoloured) */
.pre__glow {
  position: absolute; left: 50%; top: calc(58px + var(--pl-h) / 2); width: calc(var(--pl-s) * 2.1); height: calc(var(--pl-s) * 2.1);
  margin: calc(var(--pl-s) * -1.05) 0 0 calc(var(--pl-s) * -1.05); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 211, 168, .16), rgba(233, 211, 168, .05) 55%, rgba(233, 211, 168, 0));
  opacity: 0; transform: scale(.8); transition: opacity 520ms var(--ease, ease), transform 700ms var(--ease, ease);
}
.pre.is-ready .pre__glow { opacity: .55; transform: scale(1); }
.pre.is-ready .pre__enter:is(:hover, :focus-visible) .pre__glow { opacity: 1; transform: scale(1.06); }

/* the cue: the instrument's label voice, above the door */
.pre__cue {
  position: absolute; left: 50%; top: 14px; display: flex; align-items: center; gap: .7rem;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-data, system-ui, sans-serif); font-size: var(--t-label, .6875rem); letter-spacing: .24em;
  text-transform: uppercase; color: var(--pl-ink); opacity: 0;
}
html[lang="ko"] .pre__cue, html[lang="ja"] .pre__cue { letter-spacing: .12em; }
.pre__cue-rule { display: block; width: 22px; height: 1px; background: currentColor; opacity: .5; transform: scaleX(.3); transition: transform 700ms var(--ease, ease); }
.pre.is-cue .pre__cue { animation: pl-cue 700ms var(--ease, ease) both; }
@keyframes pl-cue { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: .42; transform: translate(-50%, 0); } }
.pre.is-ready .pre__cue { animation: pl-cue-on 600ms var(--ease, ease) both; }
@keyframes pl-cue-on { from { opacity: .42; transform: translate(-50%, 0); } to { opacity: .9; transform: translate(-50%, 0); } }
.pre.is-ready .pre__cue-rule { transform: scaleX(1); }
.pre.is-ready .pre__enter:is(:hover, :focus-visible) .pre__cue { opacity: 1; }
/* a background touch at Ready points to the door (never enters) */
.pre.is-nudge .pre__cue { animation: pl-nudge 640ms var(--ease, ease) both; }
@keyframes pl-nudge { 0% { opacity: .9; } 35% { opacity: 1; transform: translate(-50%, -3px); } 100% { opacity: .9; transform: translate(-50%, 0); } }
/* waiting for the Atlas: the door is drawn, the cue says so quietly */
.pre__cue-wait { display: none; }
.pre.is-wait .pre__cue-go { display: none; }
.pre.is-wait .pre__cue-wait { display: inline; }
.pre.is-wait .pre__cue-rule { animation: pl-wait 1600ms ease-in-out infinite; }
@keyframes pl-wait { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }

/* THE WORDMARK — the whole accepted raster, one object */
.pre__word {
  position: absolute; left: calc(var(--pl-w) * -.5); top: calc(var(--pl-h) * .5 + var(--pl-gap)); width: var(--pl-w);
  opacity: 0; transform-origin: 50% 50%; pointer-events: none;
}
.pre__word-w .mark { --mw: 100%; }
.pre__word-s { position: absolute; left: 50%; top: 50%; width: 20%; transform: translate(-50%, -50%); opacity: 0; }
.pre.is-word .pre__word { animation: pl-word 1000ms cubic-bezier(.16,.74,.2,1) both; }
@keyframes pl-word {
  0%   { opacity: 0; transform: translate3d(0, 12px, 0) scale(.955); clip-path: inset(0 49% 0 49%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: none; clip-path: inset(-20% -4% -20% -4%); }
}

.pre.is-go .pre__cue { animation: pl-out 220ms linear both; }
.pre.is-go .pre__enter .pre__locus, .pre.is-go .pre__enter .pre__glow { opacity: 0 !important; transition: opacity 200ms linear; }
@keyframes pl-out { to { opacity: 0; } }

/* THE DEGRADED ENTRY (no 3-D layer: flat, no WebGL, a failed layer): the same
   identity and the same explicit entry over the Hero's own night, no world imitated */
.pre.is-dom.is-lock .pre__sym { animation: pl-dom-sym 900ms cubic-bezier(.2,.7,.2,1) both; transition: none; }
@keyframes pl-dom-sym { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.pre.is-dom.is-go .pre__sym { animation: pl-dom-go 520ms cubic-bezier(.5,0,.8,.4) both; }
@keyframes pl-dom-go { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.35); } }
.pre.is-dom.is-go .pre__veil { opacity: 0; transition: opacity 600ms var(--ease, ease); }

@media (max-width: 560px) {
  .pre { --pl-s: 104px; --pl-w: min(224px, 58vw); --pl-y: 40%; --pl-gap: 30px; }
}
@media (max-height: 560px) and (min-width: 561px) {
  .pre { --pl-s: 92px; --pl-y: 38%; --pl-gap: 24px; }
}

/* REDUCED MOTION — the same meaning, explicit entry and identity handoff, with
   opacity only. v2.css resets every animation to .001 ms under this query, so
   the few that carry meaning here state their own durations. */
@media (prefers-reduced-motion: reduce) {
  .pre.is-lock .pre__sym { transition: opacity 500ms linear; }
  .pre.is-go .pre__sym { transition: opacity 260ms linear; }
  .pre.is-lock .pre__axis { animation: none; }
  .pre.is-word .pre__word { animation: pl-r-in 500ms linear both; animation-duration: 500ms !important; }
  .pre.is-cue .pre__cue { animation: pl-r-cue 400ms linear both; animation-duration: 400ms !important; }
  .pre.is-ready .pre__cue { animation: none; opacity: .9; }
  .pre.is-wait .pre__cue-rule { animation: none; transform: scaleX(1); }
  .pre.is-nudge .pre__cue { animation: none; }
  .pre__locus, .pre__glow { transform: none !important; }
  .pre.is-dom.is-lock .pre__sym { animation: pl-r-in 500ms linear both; animation-duration: 500ms !important; }
  .pre.is-dom.is-go .pre__sym, .pre.is-go .pre__cue { animation: pl-r-out 260ms linear both; animation-duration: 260ms !important; }
  @keyframes pl-r-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pl-r-cue { from { opacity: 0; } to { opacity: .42; } }
  @keyframes pl-r-out { from { opacity: 1; } to { opacity: 0; } }
}