/* v2: homepage opening (see README, v2 work). New styles for this part of the page go here. */

/* =====================================================================
   THE HERO: a poster. The robot stands on a painted horizon that fills the bottom of the fold, edge to edge;
   one promise, the dates, two actions. The horizon is three painted layers in one [data-look] wrapper: the robot
   (Robot.jsx) writes --look-x and --look-y (-1..1) on it every frame, so the hills shift a little as its head turns.
   The near layer is placed so its flat crest sits under the robot at every width (--bot-cx is the robot's centre).
   Layer art: assets/world/far|mid|near.webp; ?land=strips (html[data-land=strips]) shows the race's own strips instead.
   ===================================================================== */
.v2-hero{
  --hz-h:clamp(180px, 30svh, 320px);                 /* the horizon band */
  --near-h:calc(var(--hz-h) * .5);                    /* the near rise */
  --bot-w:min(36vw, 60svh, 560px);                    /* the robot's 500 x 560 box */
  --bot-cx:calc(50vw + min(24vw, 340px));             /* the robot's centre */
  --crest:calc(var(--near-h) * .746);                 /* how high the crest stands above the bottom of the band */
  position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(20px,3vh,40px)) 0 calc(var(--hz-h) * .5)
}
.hz{position:absolute;left:0;right:0;bottom:0;height:var(--hz-h);z-index:-1;isolation:isolate;opacity:.92;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 100%)}
/* one veil of paper over the whole band, strongest at the top, so the far range recedes (never a fade per layer) */
.hz::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(250,249,245,.62) 0,rgba(250,249,245,.36) 38%,rgba(250,249,245,.08) 62%,rgba(250,249,245,0) 75%)}
/* the painted world (assets/world, 2400px strips cut to repeat): each layer repeats sideways and overscans by 32px for the
   parallax; the near layer is placed so its flat right half (70% across, its top 25% down) sits under the robot */
.hz-l{position:absolute;left:-32px;right:-32px;background-repeat:repeat-x;background-size:auto 100%;will-change:transform}
.hz-far{z-index:0;height:calc(var(--hz-h) * .5);bottom:calc(var(--hz-h) * .36);background-image:url(world/far.webp);background-position:right 0 bottom 0;
  transform:translate3d(calc(var(--look-x, 0) * -6px), calc(var(--look-y, 0) * -2px), 0)}
.hz-mid{z-index:1;height:calc(var(--hz-h) * .46);bottom:calc(var(--hz-h) * .14);background-image:url(world/mid.webp);background-position:right 0 bottom 0;
  transform:translate3d(calc(var(--look-x, 0) * -14px), calc(var(--look-y, 0) * -4px), 0)}
.hz-near{z-index:2;height:var(--near-h);bottom:0;background-image:url(world/near.webp);background-position:calc(var(--bot-cx) + 32px - var(--near-h) * 12.54) bottom;
  transform:translate3d(calc(var(--look-x, 0) * -26px), calc(var(--look-y, 0) * -8px), 0)}
/* ?land=strips: the race's own strips, as before the world was painted (each one tile with a mirrored copy on either side,
   since their ends don't match); their crest is 20% down, half way across */
html[data-land=strips] .v2-hero{--near-h:calc(var(--hz-h) * .6);--crest:calc(var(--near-h) * .8)}
html[data-land=strips] .hz-l{left:auto;right:auto;background-repeat:no-repeat;background-size:100% 100%}
html[data-land=strips] .hz-l::before,html[data-land=strips] .hz-l::after{content:"";position:absolute;top:0;bottom:0;width:100%;background:inherit;background-size:100% 100%;transform:scaleX(-1)}
html[data-land=strips] .hz-l::before{right:calc(100% - 14px)}
html[data-land=strips] .hz-l::after{left:calc(100% - 14px)}
html[data-land=strips] .hz-far{width:calc(var(--hz-h) * .5 * 13.45);right:-32px;bottom:calc(var(--hz-h) * .3);background-image:url(race/far.webp)}
html[data-land=strips] .hz-mid{height:calc(var(--hz-h) * .5);width:calc(var(--hz-h) * .5 * 13.56);right:-32px;bottom:calc(var(--hz-h) * .12);background-image:url(race/mid.webp)}
html[data-land=strips] .hz-near{width:calc(var(--near-h) * 14.16);left:calc(var(--bot-cx) - var(--near-h) * 7.08);bottom:-2px;background-image:url(race/near.webp)}

/* the sky: two of the race's clouds drift across on a 60s loop (paused off screen and under reduced motion) */
.hz-sky{position:absolute;inset:var(--nav-h) 0 auto;height:42%;z-index:-2;pointer-events:none}
.hz-cloud{position:absolute;left:0;height:auto;opacity:.75;animation:hzDrift 60s linear infinite;will-change:transform}
.hz-cloud.c1{top:6%;width:clamp(120px,13vw,190px);animation-delay:-14s}
.hz-cloud.c2{top:34%;width:clamp(80px,8vw,120px);animation-delay:-44s;opacity:.6}
.v2-hero.off .hz-cloud{animation-play-state:paused}
@keyframes hzDrift{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 40px))}}

/* the text column */
.v2-hero .hero-grid{display:block;max-width:var(--wrap);position:static}
.v2-hero .hero-copy{max-width:min(560px, calc(var(--bot-cx) - var(--bot-w) * .36 - 40px - var(--gutter) - max(0px, (100vw - var(--wrap)) / 2)))}
.v2-hero .display{margin-top:0}
.hero-lede{margin-top:20px;font-size:var(--t-lead, clamp(17px,1.3vw,19px));line-height:1.6;max-width:34em}
.hero-when{margin-top:20px}
.hero-by{font-size:15px;line-height:1.5;color:var(--ink)}
.hero-by [data-cohort]::before{content:"· "}
.hero-local{font-size:14px;line-height:1.5;color:var(--muted);min-height:1.5em;text-wrap:pretty}
.hero-local span:not([hidden]) ~ span:not([hidden])::before{content:" · "}
/* the hours in the visitor's own time zone, or, in New York (where cohort.js leaves 'local' empty), New York's own */
.hero-local [data-cohort=local]:not([hidden]) ~ [data-cohort=hours]{display:none}
.v2-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-film{display:inline-flex;align-items:center;gap:10px}
.hf-tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* the robot stands on the near crest: its feet are 91.4% down its box */
.v2-hero .hero-bot{position:absolute;z-index:1;width:var(--bot-w);left:calc(var(--bot-cx) - var(--bot-w) / 2);bottom:calc(var(--crest) - var(--bot-w) * .0963 - 6px)}
/* the still until the live robot fades in: assets/rig/rest.webp is the live rig's own rest frame (rendered from Robot.jsx
   at 500 x 560, scale 1.2), so it fills the box exactly and the crossfade shows no jump */
#heroRobot > .hr-still{left:0;top:0;width:100%;max-height:none}
/* on a phone the robot's bubble grows out to the left of its face; it stops 12px short of the edge of the screen */
@media (max-width:999px){#heroRobot .hr-bubble{max-width:min(220px, calc(50vw - 14cqw - 12px))}}

/* the bridge to the race: the gold ? block floats over the right end of the hills */
.hz-block{position:absolute;z-index:1;right:clamp(20px,5vw,96px);bottom:calc(var(--crest) + clamp(70px,9vh,110px));display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px;border-radius:12px;animation:hzBob 2.4s ease-in-out infinite}
.hz-block img{width:44px;height:auto;transition:transform .3s var(--spring)}
.hz-block span{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.2;color:var(--ink2);white-space:nowrap}
.hz-block:hover img{transform:translateY(-5px) rotate(-4deg)}
.v2-hero.off .hz-block{animation-play-state:paused}
@keyframes hzBob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hz-cloud,.hz-block{animation:none}.hz-cloud.c2{transform:translateX(60vw)}.hz-cloud.c1{transform:translateX(30vw)}}

/* below 1000px: a poster stacked top to bottom: the robot on a narrow band of horizon, then the title, Register,
   the dates, the film, the lede */
@media (max-width:999px){
  .v2-hero{--hz-h:120px;--bot-h:min(300px, 34svh);--bot-cx:50vw;--bot-w:calc(var(--bot-h) / .914 * .893);
    display:block;min-height:0;padding:calc(var(--nav-h) + 8px) 0 clamp(28px,5vw,44px)}
  .hz{top:calc(var(--nav-h) + 8px + var(--bot-h) + var(--crest) + 4px - var(--hz-h));bottom:auto;opacity:.95}
  .hz-sky{height:calc(var(--bot-h) * .7)}
  .v2-hero .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  .v2-hero .hero-copy{display:contents;max-width:none}
  .v2-hero .hero-bot{position:relative;order:0;left:auto;bottom:auto;margin:0 auto;width:var(--bot-w)}
  .v2-hero .display{order:1;margin-top:calc(var(--hz-h) - var(--crest) - var(--bot-w) * .0963 + 6px)}
  .v2-hero .hero-cta{display:contents}
  .v2-hero .hero-reg{order:2;margin-top:20px;justify-content:center;align-self:flex-start;min-width:240px}
  .v2-hero .hero-when{order:3;margin-top:12px}
  .v2-hero .hero-film{order:4;align-self:flex-start;margin-top:16px}
  .v2-hero .hero-lede{order:5;margin-top:22px}
  .hz-block{top:calc(var(--nav-h) + 8px + var(--bot-h) * .38);bottom:auto;right:max(12px, calc(50vw - var(--bot-w) * .5 - 70px))}
}
@media (max-width:699px){
  .v2-hero{--hz-h:96px;--bot-h:220px}
  .v2-hero .hero-reg{align-self:stretch}
  .hero-by [data-cohort]{display:block;font-weight:600}
  .hero-by [data-cohort]::before{content:none}
  .hz-block{right:12px}
  .hz-block img{width:38px}
  .hz-block span{font-size:13px}
}
@media (max-width:699px) and (max-height:700px){.v2-hero{--bot-h:180px}}

/* =====================================================================
   THE FILM in the site modal (window 'film:play'): 16:9, as large as the window allows
   ===================================================================== */
.modal .box.film-box{max-width:min(1120px, calc((88vh - 72px) * 16 / 9 + 32px));padding:56px 16px 16px}
.film-modal{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.film-modal iframe,.film-modal video{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.modal .box.film-box{padding:54px 10px 10px}}

/* ?wet: the wet-paper sheet behind the hero (assets/wetpaper.js) */
.v2-hero > canvas.wet{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:multiply}
.v2-hero.wet-on{cursor:crosshair;-webkit-user-select:none;user-select:none}

/* the trailer, first under the hero: the course promo (58 s, on YouTube) with its poster in the site's style. The play
   control sits in the open paper between the headline and the robot; under 1000px it is a button below the poster. */
.trailer-fig{position:relative;margin:clamp(22px,3vw,36px) auto 0;max-width:1100px}
.trailer-player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--paper2);
  border:1px solid var(--line);box-shadow:0 22px 50px -30px rgba(24,25,24,.45)}
.trailer-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.trailer-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:block;background:none}
.trailer-poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.trailer-poster:hover img{transform:scale(1.03)}
.trailer-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:11px;padding:13px 26px 13px 22px;
  font-size:15px;font-weight:650;color:#fffefb;white-space:nowrap;border:1px solid transparent;border-image:url(btn/ink.webp) 0 22% fill / 0 1.6em stretch;transition:transform .3s var(--spring),filter .3s}
.trailer-poster:hover .trailer-play{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.3)}
.trailer-go{display:none;--stroke:url(btn/purple.webp)}
@media (max-width:999px){
  .trailer-play{display:none}
  .trailer-go{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:520px;margin:18px auto 0;font-size:16px;padding:15px 24px}
}