/* The hero scene (hero.js). The sky layers cross-fade with the time of day;
   the copy stays real HTML on top of the canvas. */
.hero3d{position:relative;overflow:hidden;isolation:isolate;padding:0;display:flex;align-items:center;
  min-height:clamp(620px,calc(100svh - 64px),860px);
  --h-ink:#1B2524;--h-slate:#46544F;--h-line:rgba(27,37,36,.2);--h-pill:rgba(255,255,255,.6);--h-pill-on:#FFFFFF}
.hero3d[data-tod=blue],.hero3d[data-tod=night]{--h-ink:#EEF2F0;--h-slate:#C5D0CB;--h-line:rgba(238,242,240,.3);--h-pill:rgba(17,22,21,.45);--h-pill-on:rgba(238,242,240,.18)}

.hero3d .sky,.hero3d .scrim{position:absolute;inset:0;pointer-events:none}
.hero3d .sky{z-index:-3}
.hero3d .scrim{z-index:-1}
.hero3d .sky i,.hero3d .scrim i{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.45,0,.55,1)}
.hero3d[data-tod=afternoon] .afternoon,.hero3d[data-tod=golden] .golden,
.hero3d[data-tod=blue] .blue,.hero3d[data-tod=night] .night{opacity:1}
.sky .afternoon{background:radial-gradient(circle at 66% 13%,#FFFBEA 0 22px,rgba(255,246,214,.55) 24px,transparent 120px),radial-gradient(55% 50% at 84% 6%,rgba(255,251,236,.95),transparent 70%),linear-gradient(180deg,#D5E5E0 0%,#E5EDE9 55%,#EEF1EF 100%)}
.sky .golden{background:radial-gradient(circle at 54% 40%,#FFE3B8 0 26px,rgba(255,200,140,.5) 28px,transparent 150px),radial-gradient(50% 60% at 10% 32%,rgba(255,212,158,.9),transparent 70%),linear-gradient(180deg,#F0CFAA 0%,#F4E1CA 55%,#F3ECE2 100%)}
.sky .blue{background:radial-gradient(70% 45% at 55% 100%,rgba(216,190,206,.6),transparent 70%),linear-gradient(180deg,#34496C 0%,#5F7598 55%,#9C9DB8 100%)}
.sky .night{background:
  radial-gradient(circle at 63% 15%,#F1EDDB 0 13px,rgba(241,237,219,.16) 14px,transparent 80px),
  radial-gradient(1.2px 1.2px at 30px 40px,rgba(255,255,255,.75),transparent),
  radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.55),transparent),
  radial-gradient(1.4px 1.4px at 210px 20px,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 80px 130px,rgba(255,255,255,.45),transparent),
  linear-gradient(180deg,#0A1313 0%,#101A1A 60%,#142020 100%);
  background-size:auto,240px 160px,240px 160px,240px 160px,240px 160px,auto}
.scrim .afternoon{background:linear-gradient(90deg,rgba(226,236,232,.9) 0%,rgba(226,236,232,.55) 30%,transparent 48%)}
.scrim .golden{background:linear-gradient(90deg,rgba(243,222,198,.9) 0%,rgba(243,222,198,.55) 30%,transparent 48%)}
.scrim .blue{background:linear-gradient(90deg,rgba(48,67,99,.85) 0%,rgba(48,67,99,.5) 30%,transparent 48%)}
.scrim .night{background:linear-gradient(90deg,rgba(10,19,19,.88) 0%,rgba(10,19,19,.5) 30%,transparent 48%)}

.hero3d .scene{position:absolute;inset:0;z-index:-2}
.hero3d canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;touch-action:pan-y;cursor:grab}
.hero3d.gl-ready canvas{opacity:1}
.hero3d .poster{display:none}
.hero3d.no-gl .poster,.hero3d .poster.ns{display:block;position:absolute;inset:0}
.hero3d .poster img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero3d.no-gl canvas,.hero3d.no-gl .tod,.hero3d.no-gl .bubble{display:none}

.hero3d .wrap{width:100%;pointer-events:none}
.hero3d .hero-copy{pointer-events:auto;max-width:650px;padding:56px 0 80px}
.hero3d .eyebrow,.hero3d .lede,.hero3d .facts{color:var(--h-slate);transition:color 1.2s ease}
.hero3d h1{font-size:clamp(2.2rem,4.1vw,3.5rem);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:16px 0 16px;color:var(--h-ink);transition:color 1.2s ease}
.hero3d h1 span{display:block;font-size:.62em;line-height:1.15;letter-spacing:-.015em;margin-top:.3em;color:var(--h-ink)}
.hero3d .lede{font-size:1.15rem;max-width:30em}

/* install, right in the hero: pick a way in, copy, paste */
.hero3d .get{margin:26px 0 18px;max-width:650px}
.get-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.get-tabs button{font:600 .82rem/1 var(--sans);color:var(--h-slate);background:transparent;border:1px solid transparent;border-radius:999px;padding:8px 12px;cursor:pointer;transition:color .3s,background .3s,border-color .3s}
.get-tabs button:hover{color:var(--h-ink)}
.get-tabs button[aria-selected=true]{color:var(--h-ink);border-color:var(--h-line);background:var(--h-pill)}
.hero3d .cmd{box-shadow:0 12px 32px rgba(10,19,19,.14);font-size:.76rem}
.get-note{font-size:.88rem;color:var(--h-slate);margin-top:9px;transition:color 1.2s ease}
.get-note a{color:inherit}
.hero3d .lede b{color:var(--h-ink);font-weight:650}
.hero3d .btn-ghost{color:var(--h-ink);border-color:var(--h-line)}
.hero3d .btn-ghost:hover{border-color:var(--h-slate)}

/* the line above the laptop: what CTO is saying right now */
.hero3d .bubble{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .8s ease;will-change:transform}
.hero3d .bubble.on{opacity:1}
.hero3d .bubble .card{position:absolute;left:0;bottom:12px;transform:translateX(-14%);width:max-content;max-width:300px;
  background:rgba(27,37,36,.93);color:#E5EBE8;border-radius:10px;padding:9px 12px;font:400 12.5px/1.5 var(--mono);
  box-shadow:0 8px 24px rgba(10,19,19,.18),0 0 0 1px rgba(229,235,232,.08)}
.hero3d .bubble .card::after{content:"";position:absolute;left:14%;bottom:-6px;width:12px;height:12px;background:rgba(27,37,36,.93);transform:rotate(45deg);border-radius:0 0 3px 0}
.hero3d .bubble p+p{margin-top:4px}
.hero3d .bubble .prompt{color:#9AA8A3}
.hero3d .bubble .quiet{color:#9AA8A3;font-style:italic}
.hero3d .bubble b{color:#E08A55;font-weight:700}

/* time of day */
.hero3d .tod{position:absolute;top:18px;right:20px;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--h-pill);
  border:1px solid var(--h-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background 1.2s ease}
.hero3d .tod button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--h-ink);
  font:600 .8rem/1 var(--sans);padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .3s ease,color 1.2s ease}
.hero3d .tod button:hover{background:var(--h-pill-on)}
.hero3d .tod button[aria-pressed=true]{background:var(--h-pill-on);box-shadow:0 1px 3px rgba(10,19,19,.12)}
.hero3d .tod i{width:8px;height:8px;border-radius:50%;flex:none}
.hero3d .tod [data-tod=afternoon] i{background:#EBD98F}
.hero3d .tod [data-tod=golden] i{background:#E3A262}
.hero3d .tod [data-tod=blue] i{background:#7D92C2}
.hero3d .tod [data-tod=night] i{background:#DDE4F2;box-shadow:inset -3px -1px 0 #5C6B8A}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* phones: headline, then the scene and its pills, then the rest of the copy */
@media (max-width:859px){
  .hero3d{flex-direction:column;align-items:stretch;min-height:0}
  .hero3d .wrap,.hero3d .hero-copy{display:contents}
  .hero3d .hero-copy>*{padding-inline:20px}
  .hero3d .eyebrow{order:1;margin-top:28px}
  .hero3d h1{order:2;margin-bottom:0}
  .hero3d .scene{position:relative;inset:auto;order:3;height:min(86vw,520px)}
  .hero3d .tod{position:relative;order:4;top:auto;right:auto;align-self:center;margin:0 16px 22px}
  .hero3d .lede{order:5}
  .hero3d .get{order:6;margin-top:14px}
  .hero3d .facts{order:7;margin-bottom:40px}
  .hero3d .scrim{display:none}
  .hero3d .tod button{padding:8px 10px}
  .hero3d .bubble .card{max-width:min(230px,60vw);font-size:11.5px;padding:8px 10px}
}
@media (max-width:380px){.hero3d .tod button{font-size:.74rem;padding:8px 8px;gap:5px}}

/* ?poster=day|night renders the scene alone, for the no-WebGL fallback image */
.poster-mode header.top,.poster-mode .hero3d .wrap,.poster-mode .hero3d .tod,.poster-mode .hero3d .scrim,.poster-mode .hero3d .bubble{display:none}
.poster-mode .hero3d{min-height:100vh}
.poster-mode .hero3d canvas{transition:none}

/* "drag to look around" hint, gone after the first turn */
.hero3d .hint{position:absolute;right:20px;bottom:18px;font:500 .78rem/1 var(--mono);color:var(--h-slate);background:var(--h-pill);border:1px solid var(--h-line);border-radius:999px;padding:8px 12px;pointer-events:none;transition:opacity .8s ease}
.hero3d.spun .hint,.hero3d.no-gl .hint{opacity:0}
@media (max-width:859px){.hero3d .hint{right:12px;bottom:10px;font-size:.7rem}}