/* Home: the logo as a gate (Nachtrag 3, C1) and "choose" (C2).
   Without html.js (no script) or with reduced motion this is the normal film
   hero from base.css. Only transform, opacity, mask-size and mask-position are
   animated (js/home-gate.js). */

/* "choose" in the H1: a button with JS, plain text without. */
.choose{all:unset;cursor:pointer;color:inherit;position:relative;display:inline-block}
span.choose{cursor:auto}
.choose::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;background:var(--choose,#4fb3ef);transition:height .2s ease,background .3s ease}
button.choose:hover::after{height:.14em}
.choose:focus-visible{outline:3px solid var(--green);outline-offset:6px}

/* Colour wipe when the film changes (also through the diamond). */
.wipe{position:absolute;inset:0;z-index:1;background:var(--blue);clip-path:inset(0 100% 0 0);pointer-events:none}
.gate .film-img,.gate video{z-index:0}
.gate .wrap,.gate .cap{z-index:3}
.hint,.flyer{display:none}

@media (prefers-reduced-motion:no-preference){
  /* Start state (p = 0) in CSS, same formula as the script, so nothing jumps
     before it runs: diamond w0 wide, centred at 70 % / 34 % (phones: 50 % / 27 %). */
  html.js .gate{height:230vh;background:var(--ink);--w0:min(42vw,66vh,660px);--cx:70vw;--cy:34vh}
  @media (max-width:899px){html.js .gate{--w0:min(78vw,42vh);--cx:50vw;--cy:27vh}}
  html.js .gate{--h0:calc(var(--w0) * 0.7891)}
  html.js .gate-stick{position:sticky;top:0;height:100vh;min-height:0}
  /* The scrim (.film::after) stays at full strength from the start: the H1 runs
     over the diamond, and R3 needs at least .72 behind the text on every frame.
     The draft faded it in with the gate (see log). */
  html.js .gate-stick::after{z-index:2}
  /* Ink with a diamond-shaped hole: the diamond mask excluded from a full layer. */
  html.js .gate-cover{position:absolute;inset:0;z-index:2;background:var(--ink);
    -webkit-mask-image:url(/assets/diamond.svg),linear-gradient(#000 0 0);-webkit-mask-repeat:no-repeat;-webkit-mask-composite:xor;
    mask-image:url(/assets/diamond.svg),linear-gradient(#000 0 0);mask-repeat:no-repeat;mask-composite:exclude;
    -webkit-mask-size:var(--w0) var(--h0),100% 100%;mask-size:var(--w0) var(--h0),100% 100%;
    -webkit-mask-position:calc(var(--cx) - var(--w0) / 2) calc(var(--cy) - var(--h0) / 2),0 0;mask-position:calc(var(--cx) - var(--w0) / 2) calc(var(--cy) - var(--h0) / 2),0 0;
    will-change:mask-size,mask-position,opacity}
  /* "Scroll" under the diamond on phones and tablets; js/home-gate.js hides it
     if it would touch the H1. On desktops the H1 always runs under the
     diamond, so the hint sits at the bottom centre instead (see log). */
  html.js .hint{display:block;position:absolute;left:var(--cx);top:calc(var(--cy) + var(--h0) / 2 + 18px);z-index:3;margin:0;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;transform:translateX(-50%)}
  @media (min-width:900px){html.js .hint{left:50vw;top:auto;bottom:28px}}
  html.js .hint.off{visibility:hidden}
  html.js .flyer{display:block;position:fixed;left:0;top:0;width:58px;height:auto;z-index:55;pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform,opacity}
  /* The header logo waits for the flying logo (JS shows it when it lands). */
  html.js:has(#gate) #hdLogo{opacity:0}
}
@media (max-width:700px){
  .gate .cap{position:absolute;left:var(--gut);right:var(--gut-r);bottom:10px;text-align:left;padding:0}
  .gate .wrap{padding-bottom:104px}
}