/* ============================================================
   The front page.

   It opens the way the launcher does: the wind tunnel startup scene
   (str/v7-wind-tunnel.html in the client repository). Air flows across the
   whole screen and parts around the badge and the BREEZE wordmark, so the
   name shows as a hole in the air before its letters light up. Here the
   letters are real text on top of the canvas (assets/js/opening.js reads
   where they are and shapes the air around them). Under the tagline come
   the download buttons and nothing else.

   After the opening the page is plain: how it works in three steps, three
   real screenshots with a short paragraph each, the versions, the download.
   ============================================================ */

/* ── The navigation bar sits on the scene until the page scrolls ── */
body.home .nav{background:transparent;border-bottom-color:transparent;transition:background-color .25s,border-color .25s}
body.home.nav-solid .nav,
body.home #site-nav:has(.mobile-nav.open) .nav{background:var(--void);border-bottom-color:var(--line)}

/* ── Opening ── */
.opening{
  /* The wordmark's size; everything in the lockup is measured from it, the
     way the launcher's lockup is measured from its 48px wordmark. BREEZE at
     the scene's 0.46em spacing is 7.57em wide; with the badge, 9.8em. */
  --wm:min(96px,calc((100vw - 64px) / 9.9));
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#03060E 0%,#061021 50%,#08192B 100%);
}
/* Plain compositing: the scene adds the air onto the sky, but on a dark sky
   "over" looks the same, and a blend mode doubled the cost of every frame. */
.op-air{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* A click on the air fires a wind charge (opening.js). */
.opening{cursor:crosshair}
@media (prefers-reduced-motion:reduce){.opening{cursor:auto}}
/* The startup scenes' square moon: far off, the air passes in front of it. */
.op-moon{position:absolute;z-index:0;top:calc(var(--nav-h) + 7vh);right:9vw;width:clamp(20px,2.1vw,30px);aspect-ratio:1;background:rgba(214,233,238,.72);box-shadow:0 0 50px 16px rgba(200,231,240,.08)}
.op-moon::before,.op-moon::after{content:'';position:absolute;background:rgba(120,160,180,.3)}
.op-moon::before{left:19%;top:23%;width:23%;height:23%}
.op-moon::after{left:58%;top:54%;width:27%;height:23%}
/* The scene's vignette, and a fade into the page below. */
.op-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(4,7,15,0) 45%,rgba(3,6,13,.8) 100%),linear-gradient(180deg,rgba(6,13,26,0) 78%,var(--night) 100%)}

.op-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + 24px);padding-bottom:72px}
.op-lockup{display:flex;align-items:center;gap:calc(var(--wm) * .3)}
.op-badge{flex:none;width:calc(var(--wm) * 1.92);height:calc(var(--wm) * 1.92);border-radius:calc(var(--wm) * .33);outline:1px solid rgba(228,241,242,.24);outline-offset:-1px}
.op-words{min-width:0;padding-top:calc(var(--wm) * .5)}
.op-title{margin:0;font-weight:700;line-height:1}
.wm{display:block;white-space:nowrap;font-size:var(--wm);font-stretch:125%;color:var(--frost);text-shadow:0 0 .46em rgba(106,219,219,.45)}
.wm-l{display:inline-block}
.wm-l + .wm-l{margin-left:.46em}
.wm-base{display:inline-block;width:0;height:0;vertical-align:baseline}
.op-client{display:flex;align-items:center;gap:1.1em;margin-top:calc(var(--wm) * .32);font-family:var(--font-mono);font-weight:500;font-size:max(11px,calc(var(--wm) * .2));letter-spacing:.58em;text-transform:uppercase;color:var(--aurora);line-height:1}
.op-client::before{content:'';width:calc(var(--wm) * .62);height:1px;background:var(--aurora)}
.op-tag{margin-top:calc(var(--wm) * .34);font-size:max(16px,calc(var(--wm) * .27));line-height:1.35;color:rgba(228,241,242,.84);letter-spacing:.01em}

.op-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:max(28px,calc(var(--wm) * .62));padding-left:calc(var(--wm) * 2.22)}
.op-actions .btn-outline{background:rgba(4,7,15,.35)}

/* The opening plays once a visit (opening.js); until each part's moment it
   is hidden. The 6 s fallback shows everything if the script never runs. */
.op-pending .op-badge,.op-pending .wm-l,.op-pending .op-client,.op-pending .op-tag,
.op-pending .op-actions{opacity:0;animation:op-fade .4s 6s forwards}
.op-pending .op-actions:focus-within{opacity:1}
.op-pending .op-badge.on{animation:op-fade .9s cubic-bezier(.22,1,.36,1) forwards}
.op-pending .wm-l.on{animation:op-ignite .62s ease-out forwards}
.op-pending .op-client.on{animation:op-fade .8s ease-out forwards}
.op-pending .op-tag.on{animation:op-track .9s cubic-bezier(.22,1,.36,1) forwards}
.op-pending .op-actions.on{animation:op-rise .7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes op-fade{from{opacity:0}to{opacity:1}}
@keyframes op-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes op-track{from{opacity:0;letter-spacing:.24em}to{opacity:1;letter-spacing:.01em}}
/* Each letter lights at the speed of the wind: a flash, then the steady glow. */
@keyframes op-ignite{
  0%{opacity:0;text-shadow:0 0 0 rgba(106,219,219,0)}
  30%{opacity:1;color:#fff;text-shadow:0 0 .85em rgba(106,219,219,.95),0 0 .2em rgba(255,255,255,.55)}
  100%{opacity:1;text-shadow:0 0 .46em rgba(106,219,219,.45)}
}

/* ── Sections ── */
.hp-section{padding:112px 0}
.hp-section + .hp-section{border-top:1px solid var(--line)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--aurora)}
/* Each section is marked with a Wind Charge in one of the tag colours: the
   same pixel art the mod draws beside players' names. */
.eyebrow::before{content:'';flex:none;width:32px;height:32px;margin:-8px 0;background:url(/assets/img/wind_charge.png) center/32px 32px no-repeat;image-rendering:pixelated}
.eyebrow[data-charge="blue"]::before{background-image:url(/assets/img/blue_wind_charge.png)}
.eyebrow[data-charge="purple"]::before{background-image:url(/assets/img/purple_wind_charge.png)}
.eyebrow[data-charge="pink"]::before{background-image:url(/assets/img/pink_wind_charge.png)}
.eyebrow[data-charge="red"]::before{background-image:url(/assets/img/red_wind_charge.png)}
.hp-h2{font-size:clamp(1.85rem,3.3vw,2.6rem);font-weight:700;font-stretch:118%;line-height:1.1;color:var(--text-1);max-width:20ch}
.hp-lede{margin-top:16px;font-size:1.125rem;line-height:1.6;color:var(--text-2);max-width:56ch}

/* How it works: three steps */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;counter-reset:hp-step}
.steps3 li{border-top:1px solid var(--line-hi);padding-top:22px}
.steps3 li::before{counter-increment:hp-step;content:'0' counter(hp-step);display:block;font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.2em;color:var(--aurora);margin-bottom:14px}
.steps3 h3{font-size:1.25rem;font-weight:650;font-stretch:110%;line-height:1.25;color:var(--text-1)}
.steps3 p{margin-top:8px;color:var(--text-2);line-height:1.6}

/* A feature: a short text beside a real screenshot */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-text{order:2}
.feature-text > p:not(.eyebrow){margin-top:16px;color:var(--text-2);font-size:1.0625rem;line-height:1.65;max-width:48ch}
.feature-text p strong{color:var(--text-1);font-weight:600}
.facts{margin-top:22px;border-top:1px solid var(--line)}
.facts li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--text-2);font-size:.98rem}
.facts li strong{color:var(--text-1);font-weight:600}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;color:var(--link);font-weight:600}
.more::after{content:'';width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.more:hover{color:var(--frost)}
.more:hover::after{transform:translateX(3px) rotate(45deg)}
/* Screenshots sit in the same window the startup scenes do. */
.shot{margin:0}
.shot-frame{border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(122,130,196,.2);background:var(--void);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 90px -55px var(--aurora)}
.shot-frame img{width:100%;height:auto}
.shot figcaption{margin-top:12px;font-size:.9rem;color:var(--text-3);line-height:1.5}

/* Versions */
.families{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:48px;border-top:1px solid var(--line-hi)}
.family{padding:22px 18px 22px 0;border-bottom:1px solid var(--line)}
.family + .family{padding-left:18px;border-left:1px solid var(--line)}
.family dt{font-size:1.6rem;font-weight:700;font-stretch:118%;line-height:1;color:var(--text-1)}
.family dd{margin-top:12px;font-family:var(--font-mono);font-size:.84rem;line-height:1.7;color:var(--text-2)}
.family dd span{display:block;color:var(--text-3)}
.hp-note{margin-top:20px;color:var(--text-3);font-size:.95rem;max-width:64ch}

/* Download */
.get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.get-os{display:flex;flex-direction:column;align-items:flex-start;padding:28px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-xl)}
.get-os.mine{border-color:rgba(106,219,219,.45)}
.get-os h3{font-size:1.35rem;font-weight:700;font-stretch:115%;color:var(--text-1)}
.get-os p{margin-top:8px;color:var(--text-2);font-size:.95rem;line-height:1.55}
.get-os .file{margin-top:4px;font-family:var(--font-mono);font-size:.82rem;color:var(--text-3)}
.get-os .btn{margin-top:auto}
.get-os .btn-row{margin-top:22px}
.hp-cta-note{margin-top:22px;color:var(--text-3);font-size:.95rem}
.hp-cta-note a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.hp-cta-note a:hover{color:var(--frost)}

/* ── Smaller screens ── */
@media(max-width:1000px){
  .feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:36px}
  .feature.flip .feature-text{order:0}
  .families{grid-template-columns:repeat(3,minmax(0,1fr))}
  .family:nth-child(4){padding-left:0;border-left:none}
}
@media(max-width:780px){
  .opening{--wm:min(84px,calc((100vw - 40px) / 7.6))}
  .op-lockup{flex-direction:column;align-items:flex-start;gap:calc(var(--wm) * .42)}
  .op-badge{width:calc(var(--wm) * 1.5);height:calc(var(--wm) * 1.5)}
  .op-words{padding-top:0}
  .op-actions{padding-left:0}
  .hp-section{padding:80px 0}
  .steps3{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .get{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .op-actions .btn{flex:1 1 100%}
  .families{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family:nth-child(odd){padding-left:0;border-left:none}
  .family:nth-child(4){padding-left:18px;border-left:1px solid var(--line)}
  .family dt{font-size:1.4rem}
  .get-os{padding:22px}
}
@media(max-height:560px) and (min-width:781px){
  .op-inner{padding-bottom:48px}
  .opening{--wm:min(72px,calc((100vw - 64px) / 9.9))}
}