/* The entry: one shot that is the loading screen and then the landing.
   The traveller walks in while the sun rises with the load; at 100% they stop
   facing the sun and the three choices ink onto the menu (Figma: 00 Entry + Choice). */
/* Colours, type and motion come from tokens.css (linked first); the old local names
   are kept as aliases. --cloud (light red for text on ink) and --wood (the signpost)
   stay local: the token set has no colour for either. */
:root {
  --dawn-sky: var(--c-paper); --skyline: var(--c-ink); --sun-red: var(--c-art); --cloud: #F08A6A; --concrete: var(--c-muted); --ember: var(--c-art); --wood: #DDD5C3;
  --line: 3px; --gutter: 24px;
  --horizon: 51.5%;          /* where the horizon line sits in the art, as shown */
  --sunx: 50%; --rise: 0;  /* --rise 0 = below the horizon, 1 = fully up */
}
@media (min-width: 900px) { :root { --gutter: 40px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--dawn-sky); color: var(--skyline); font-family: var(--f-body); -webkit-font-smoothing: antialiased; overflow: hidden; }
/* film grain: one fixed layer, a tile larger than the screen on every side, jumped
   between three offsets 8 times a second by a stepped transform (compositor only) */
body::after { content: ""; position: fixed; inset: -220px; z-index: 40; pointer-events: none; opacity: .5; mix-blend-mode: multiply; will-change: transform; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate3d(0, 0, 0); } 33.333% { transform: translate3d(73px, 131px, 0); } 66.667% { transform: translate3d(146px, 42px, 0); } }
@media (prefers-reduced-motion: no-preference) { body::after { animation: grain .375s steps(1, end) infinite; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; z-index: 60; width: auto; height: auto; clip: auto; left: var(--gutter); top: 12px; background: var(--skyline); color: var(--dawn-sky); padding: 8px 12px; font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }

/* chrome */
.chrome { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter); }
.brand { font: 400 20px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.menu { display: flex; gap: 22px; align-items: center; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.menu a, .menu button { color: var(--skyline); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menu a:hover, .menu button:hover { border-bottom-color: var(--skyline); } }
.menu button:active { transform: scale(.97); }
.menu button b { font-weight: 500; color: var(--concrete); }
.menu button[aria-pressed="true"] b { color: var(--ember); }

/* the shot */
.scene { position: fixed; inset: 0; overflow: hidden; }
/* the landing fades straight in: no loading bar, no walk */
.scene .art, .scene .walk { animation: scene-in 700ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes scene-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene .art, .scene .walk { animation-duration: 1ms; } }
.art { position: absolute; inset: 0; }
.art__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; scale: 1.04; translate: calc(var(--mx, 0) * -4px) calc(var(--my, 0) * -4px); filter: grayscale(1) contrast(1.06); transition: filter 1.2s var(--ease-out); }
[data-stage="landing"] .art__img, [data-stage="leaving"] .art__img { filter: none; }
.art__img.boil { opacity: 0; }
.scene[data-boil="1"] .f1, .scene[data-boil="2"] .f2 { opacity: 1; }
/* the sun: drawn, not baked in, so it can rise. .sky clips it at the horizon line. */
.sky { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); overflow: hidden; }
.sun { position: absolute; left: var(--sunx); top: 100%; width: 17vmin; height: 17vmin; border-radius: 50%; background: var(--sun-red); transform: translate(-50%, calc(2% - var(--rise) * 92%)); }

/* the walk: silhouette slides in with the load, bobbing a little, leaving footprints */
.walk { position: absolute; inset: 0; pointer-events: none; }
.traveller { position: absolute; right: 0; bottom: 0; height: 71vh; width: auto; max-width: none; translate: calc((1 - var(--walk, 0)) * -100vw) 0; transform: translateY(calc(var(--bob, 0) * 1px)) scaleX(-1); }
.prints { position: absolute; inset: 0; }
.prints i { position: absolute; width: .9vmin; height: 1.5vmin; border-radius: 50%; background: var(--skyline); opacity: 0; transform: rotate(-12deg) scale(.6); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.prints i.is-on { opacity: .75; transform: rotate(-12deg) scale(1); }
.prints i:nth-child(even) { transform: rotate(10deg) scale(.6); } .prints i:nth-child(even).is-on { transform: rotate(10deg) scale(1); }

/* the choice (Figma: Choice): a game menu, bottom left. Ink on black asks the question,
   three wood boards answer it. The labels ink on when the walk arrives. */
.choice { position: absolute; left: calc(var(--gutter) - 8px); top: 56vh; width: min(408px, calc(100vw - 2 * var(--gutter))); display: flex; flex-direction: column; gap: 16px; z-index: 5; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out) .1s, transform .8s var(--ease-out) .1s; }
[data-stage="landing"] .choice, [data-stage="leaving"] .choice { opacity: 1; transform: none; }
.choice__q { margin: 0; padding: 12px 22px 10px; background: var(--skyline); border: var(--line) solid var(--skyline); color: var(--dawn-sky); font: 600 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.board { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px 20px 18px 30px; border: var(--line) solid var(--skyline); background: var(--wood); color: var(--skyline); font: 400 30px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-align: left; text-decoration: none; cursor: pointer; pointer-events: none; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.board span { display: block; clip-path: inset(-.3em 100% -.1em 0); transition: clip-path .7s var(--ease-out); }
.board__tip { flex: none; width: 16px; height: 18px; transition: transform var(--dur-hover) var(--ease-out); }
[data-stage="landing"] .board, [data-stage="leaving"] .board { pointer-events: auto; }
[data-stage="landing"] .board span, [data-stage="leaving"] .board span { clip-path: inset(-.3em 0 -.1em 0); } /* room for the accents in RÉSUMÉ */
[data-stage="landing"] .board:nth-of-type(1) span { transition-delay: .25s; } [data-stage="landing"] .board:nth-of-type(2) span { transition-delay: .45s; } [data-stage="landing"] .board:nth-of-type(3) span { transition-delay: .65s; }
/* a board only turns sun red under a mouse pointer or keyboard focus; the lift is for real mice only */
.board:focus-visible { background-color: var(--sun-red); color: var(--c-on-art); outline-color: var(--skyline); }
.board:focus-visible .board__tip { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .board:hover { background-color: var(--sun-red); color: var(--c-on-art); } .board:hover .board__tip { transform: translateX(4px); } }
.board:active { transform: scale(.97); }

/* type */
.wm { position: absolute; left: calc(var(--gutter) - 18px); top: 22.6vh; font: 400 clamp(56px, 9.5vw, 136px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out) .2s, transform .8s var(--ease-out) .2s; }
[data-stage="landing"] .wm, [data-stage="leaving"] .wm { opacity: 1; transform: none; }

/* loader label */
.load { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 8px); display: flex; align-items: center; gap: .6em; background: var(--skyline); color: var(--dawn-sky); padding: .85em 1.1em; font: 500 13px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transition: opacity .4s var(--ease-out), transform .6s var(--ease-out); }
.load .k { color: var(--cloud); }
.bar { display: inline-block; width: 160px; height: 8px; border: 2px solid var(--dawn-sky); position: relative; margin-left: .4em; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sun-red); }
[data-stage="landing"] .load, [data-stage="leaving"] .load { opacity: 0; transform: translateY(12px); pointer-events: none; }
.replay { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 8px); font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--concrete); text-decoration: none; border-bottom: 2px solid currentColor; }

/* stepping through: a colour circle grows from the sun (story) or the chosen board (work) */
.portal { position: fixed; z-index: 50; inset: 0; background: var(--sun-red); clip-path: circle(0 at var(--px, 50%) var(--py, 50%)); pointer-events: none; }
.portal.is-on { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); transition: clip-path .9s var(--ease-in-out); }

/* phones: the menu spans the bottom, the traveller stands above it */
@media (max-width: 700px) {
  :root { --horizon: 53%; --sunx: 30%; }
  .menu a { display: none; }
  .choice { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .board { padding: 14px 16px 14px 18px; font-size: clamp(18px, 5.4vw, 24px); }
  .traveller { height: 40vh; bottom: 30vh; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); } /* the drawing is cropped at the hem; fade it so it stands in the sea, not on a hard edge */
  .wm { left: var(--gutter); top: 11vh; font-size: clamp(44px, 14vw, 72px); }
  .load { font-size: 12px; } .bar { width: 90px; }
}

/* reduced motion: nothing moves, but short fades (150ms) still show what changed */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 150ms !important; transition-delay: 0s !important; transition-timing-function: var(--ease-out) !important; }
  .art__img.boil { display: none; }
}