/* ───────── Brand fonts ───────── */
@font-face{
  font-family:'Proxon';
  src:url('../assets/fonts/PROXON.ttf') format('truetype'),
      url('../assets/fonts/PROXON.otf') format('opentype');
  font-weight:400 900;
  font-display:swap;
}
@font-face{
  font-family:'Mavis';
  src:url('../assets/fonts/MAVISLight.woff') format('woff');
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:'Mavis';
  src:url('../assets/fonts/MAVISRegular.woff') format('woff');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Mavis';
  src:url('../assets/fonts/MAVISBold.woff') format('woff');
  font-weight:700;
  font-display:swap;
}

:root{
  --bg:#05060f;
  --bg2:#0a0c1f;
  --ink:#e8ecff;
  --ink-dim:#9aa3c7;
  --accent:#7df9ff;
  --accent2:#ff5cf3;
  --accent3:#a48bff;
  --line:rgba(125,249,255,.18);
  --glass:rgba(18,22,48,.55);
  --glass-strong:rgba(18,22,48,.78);
  --rad:18px;
  --maxw:1180px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'Proxon',ui-sans-serif,system-ui,sans-serif;
  --body:'Mavis',ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

a{color:var(--accent);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}
code{font-family:var(--mono);font-size:.9em;background:rgba(125,249,255,.08);padding:1px 6px;border-radius:6px;color:var(--accent)}

/* ───────── Cosmic background layers ───────── */
body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(164,139,255,.10), transparent 60%),
    radial-gradient(1400px 900px at 50% 110%, rgba(125,249,255,.06), transparent 60%),
    linear-gradient(180deg,#02030a 0%, #04061a 50%, #03040e 100%);
}
#space-3d{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:-3; pointer-events:none;
}
#space-3d canvas{display:block;width:100% !important;height:100% !important}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.65) 100%),
    radial-gradient(60% 35% at 50% 22%, rgba(0,0,0,.35), transparent 70%);
}

/* ───────── "YOU ARE HERE" sticker ───────── */
.here{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
.here.visible{ opacity:1 }
.here-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible;
}
.here-line{
  stroke:#ff3a3a; stroke-width:1.6;
  stroke-dasharray:5 5;
  filter:drop-shadow(0 0 4px rgba(255,58,58,.6));
}
.here-ring,.here-ring2{
  fill:none; stroke:#ff3a3a; stroke-width:1.6;
  filter:drop-shadow(0 0 6px rgba(255,58,58,.7));
  transform-box:fill-box;
  transform-origin:center;
}
.here-ring{ animation:hereRing 2.4s ease-out infinite }
.here-ring2{ animation:hereRing 2.4s ease-out 0.6s infinite; stroke-width:1.2; opacity:.6 }
.here-dot{ fill:#ff3a3a; filter:drop-shadow(0 0 5px rgba(255,58,58,.9)) }
@keyframes hereRing{
  0%   { r:6;  opacity:1 }
  100% { r:34; opacity:0 }
}
.here-label{
  position:absolute;
  font-family:var(--display);
  font-size:11px; font-weight:900; letter-spacing:.18em;
  color:#fff; text-align:center; line-height:1.4;
  background:#ff3a3a;
  padding:8px 14px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:
    0 0 0 2px rgba(255,58,58,.4),
    0 6px 18px rgba(0,0,0,.55),
    0 0 24px rgba(255,58,58,.4);
  transform:translate(-50%,-50%) rotate(-6deg);
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  max-width:calc(100vw - 32px);
}
.here-label i{
  display:block;
  font-style:normal;
  font-size:9.5px; font-weight:700; letter-spacing:.22em;
  opacity:.85;
  margin-top:2px;
}
@media (max-width: 600px){
  .here-label{
    font-size:9px;
    padding:6px 10px;
    letter-spacing:.12em;
    transform:translate(-50%,-50%) rotate(-4deg) scale(0.78);
  }
  .here-label i{
    font-size:8px;
    letter-spacing:.14em;
    /* Population number is long — let it wrap on tiny screens. */
    white-space:normal;
    max-width:160px;
    margin-left:auto;margin-right:auto;
  }
  /* Make the line thinner so it doesn't overpower a small viewport. */
  .here-line{ stroke-width:1.1; stroke-dasharray:3 3 }
  .here-ring{ animation-duration:1.8s }
  .here-ring2{ animation-duration:1.8s }
}

/* ───────── Nav ───────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  /* env(safe-area-inset-*) keeps notched phones from clipping the brand
     under the status bar / home indicator on iOS landscape. */
  padding:18px max(clamp(20px,4vw,48px), env(safe-area-inset-right));
  padding-left:max(clamp(20px,4vw,48px), env(safe-area-inset-left));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(180deg, rgba(5,6,15,.7), rgba(5,6,15,.2));
  border-bottom:1px solid var(--line);
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
  /* DO NOT set overflow:hidden here — it would clip the absolutely-
     positioned mobile dropdown menu. Use child-level constraints instead. */
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display);
  font-weight:900; letter-spacing:.18em; font-size:14px;
  color:#fff;
  min-width:0;                 /* allow brand to shrink inside flex parent */
  flex:1 1 auto;               /* shrink-fit; the button stays as 0-shrink */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand img{ flex:0 0 auto; }   /* logo image must not shrink */
.brand span{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.brand img{filter:drop-shadow(0 0 8px rgba(125,249,255,.45))}
.brand i{font-style:normal;color:var(--accent);margin-left:2px}
.nav nav{display:flex; gap:8px; align-items:center}
.nav nav a{
  font-family:var(--display);
  font-size:12px;letter-spacing:.16em;
  color:var(--ink-dim);
  padding:8px 12px;border-radius:10px;
  transition:color .2s, background .2s;
}
.nav nav a:hover{color:#fff; background:rgba(125,249,255,.08)}
.nav nav a.cta{
  color:#02030a; background:linear-gradient(135deg,var(--accent),var(--accent3));
  padding:10px 16px; font-weight:700;
  box-shadow:0 0 24px rgba(125,249,255,.35);
}
.nav nav a.cta:hover{color:#02030a; filter:brightness(1.1)}
.navtoggle{display:none;background:none;border:0;width:38px;height:32px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;flex:0 0 38px}
.navtoggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:.25s;align-self:stretch}
.navtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded=true] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .nav{
    padding:12px clamp(14px, 4vw, 24px);
    align-items:center;
  }
  .brand{
    font-size:11px; letter-spacing:.12em; gap:8px;
    line-height:1.1;
    white-space:normal;             /* allow wordmark to wrap */
    flex:1 1 0;
  }
  .brand span{
    white-space:normal;
    word-break:break-word;
  }
  .brand img{ width:36px; height:36px; }
  .navtoggle{display:flex; flex:0 0 auto}
  .nav nav{
    position:absolute; top:100%; right:0; left:0;
    flex-direction:column; gap:0; padding:8px 16px 18px;
    background:rgba(5,6,15,.92); border-bottom:1px solid var(--line);
    transform:translateY(-110%); opacity:0; pointer-events:none; transition:.3s;
    max-height:calc(100vh - 60px); overflow-y:auto;
    box-sizing:border-box;
  }
  .nav.open nav{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav nav a{padding:14px 8px;border-bottom:1px solid rgba(125,249,255,.06)}
  .nav nav a.cta{margin-top:10px;text-align:center}
}
@media (max-width:380px){
  .nav{ padding:10px 12px }
  .brand{ font-size:11px; letter-spacing:.10em; gap:6px }
  .brand img{ width:30px; height:30px }
  /* If even that's too tight, hide the wordmark and keep the icon. */
  .brand span{
    text-overflow:ellipsis; overflow:hidden;
  }
}

/* ───────── Sections ───────── */
main{padding-top:0}
.panel{
  max-width:var(--maxw);
  margin:0 auto;
  padding:120px clamp(20px,4vw,48px);
  position:relative;
}
.kicker{
  display:inline-block;
  font-family:var(--display);
  font-size:11px; letter-spacing:.32em;
  color:var(--accent);
  margin-bottom:18px;
  text-shadow:0 0 12px rgba(125,249,255,.5);
}
.kicker.center{display:block;text-align:center}
h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:.04em;color:#fff;margin:0 0 18px}
h1{font-size:clamp(48px,9vw,128px); line-height:.95; letter-spacing:.06em}
h2{font-size:clamp(28px,4.5vw,52px); line-height:1.05}
h2.center{text-align:center;margin-bottom:48px}
h3{font-size:18px; letter-spacing:.1em; margin:14px 0 8px}
.center{text-align:center}
.muted{color:var(--ink-dim)}
.small{font-size:13px}
em{font-style:normal;color:var(--accent2);text-shadow:0 0 18px rgba(255,92,243,.4)}

/* ───────── Hero ───────── */
.hero{
  min-height:100vh;
  display:grid;place-items:center;
  padding:120px 24px 80px;
  position:relative;
  text-align:center;
}
.hero-inner{position:relative;z-index:1;max-width:900px}
.hero-mark{
  margin:0 auto 24px;
  width:min(280px,42vw);
  height:auto;
  filter:drop-shadow(0 0 36px rgba(125,249,255,.55)) drop-shadow(0 0 14px rgba(255,92,243,.35));
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-12px) rotate(1deg)}
}
h1 span{
  display:block;
  background:linear-gradient(120deg,var(--accent),var(--accent3) 50%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(164,139,255,.4));
}
.tag{font-size:clamp(15px,1.8vw,19px);color:var(--ink-dim);max-width:620px;margin:18px auto 32px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  font-family:var(--display);
  font-size:13px; letter-spacing:.18em; font-weight:700;
  padding:14px 22px; border-radius:12px;
  border:1px solid var(--line);
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  cursor:pointer;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  color:#02030a; border-color:transparent;
  box-shadow:0 0 32px rgba(125,249,255,.35), 0 6px 24px rgba(0,0,0,.3);
}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.ghost{color:var(--ink); background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(125,249,255,.08); border-color:var(--accent); color:#fff}

.scrollhint{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  font-family:var(--display); font-size:10px; letter-spacing:.4em;
  color:var(--ink-dim); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollhint span{
  display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:trail 1.6s ease-in-out infinite;
}
@keyframes trail{
  0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.2);transform-origin:bottom}
}

/* ───────── About ───────── */
.panel-grid{
  display:grid; gap:64px;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
}
@media (max-width:860px){.panel-grid{grid-template-columns:1fr;gap:40px}}
.panel-text p{color:var(--ink-dim);font-size:17px;margin:0 0 16px}
.stat-row{
  list-style:none; padding:0; margin:32px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.stat-row li{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 12px; text-align:center;
  backdrop-filter:blur(8px);
}
.stat-row strong{display:block;font-family:var(--display);font-size:32px;color:#fff;margin-bottom:4px}
.stat-row span{font-size:11px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase}

/* Force a clear stacking-context order between the about section's two
   columns. .panel-text often gets a transient `transform` from the reveal
   animation which creates an implicit stacking context — without explicit
   z-indexes, the JWST canvas overflowing from .panel-art into the text area
   ends up painted behind the paragraphs. Positioning both columns and
   pushing .panel-art well above guarantees the canvas wins. */
.panel-text{position:relative;z-index:0}
.panel-art{position:relative;aspect-ratio:1/1;z-index:5}
/* On mobile the panel-grid collapses to a single column, which makes the
   .panel-art square huge — and the JWST canvas (150% of that) overflows
   the viewport. Cap the orbital area to a sensible logo size and centre. */
@media (max-width: 860px){
  .panel-art{
    max-width:min(280px, 70vw);
    margin-left:auto; margin-right:auto;
  }
  .jwst-canvas{ inset:-10%; width:120%; height:120% }
}
.orbital{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:visible;isolation:isolate}
.orbital img{position:relative;z-index:2}
.orbital .ring{z-index:3}
/* Two canvases — one behind the logo, one in front. JS picks which to draw
   into based on whether the JWST is on the camera-side (z > 0) or the far
   side (z < 0) of its orbit, giving real depth ordering against the logo. */
.jwst-canvas{
  position:absolute;
  inset:-25%;
  width:150%; height:150%;
  pointer-events:none;
}
/* belt-and-braces: nothing in the about column should clip the canvas */
.panel-art,
#about,
.panel-grid{ overflow:visible }
.jwst-canvas.jwst-back  { z-index:1; }    /* behind logo (z=2) */
.jwst-canvas.jwst-front { z-index:4; }    /* above rings (z=3) */
.orbital img{
  width:78%;height:78%;object-fit:contain;border-radius:50%;
  filter:drop-shadow(0 0 50px rgba(125,249,255,.4));
  animation:bob 8s ease-in-out infinite;
}
.orbital .ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(125,249,255,.35);
  /* Two animations: spin uses `transform`, bob-rise uses `translate` —
     they live on independent CSS transform components and compose. */
  animation: spin 40s linear infinite, bob-rise 6s ease-in-out infinite;
}
.orbital .ring.r2{
  inset:8%;border-style:solid;border-color:rgba(255,92,243,.18);
  animation-duration:60s, 6s;
  animation-direction:reverse, normal;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob-rise{
  0%,100%{translate:0 0}
  50%    {translate:0 -12px}
}

/* ───────── Cards ───────── */
.card-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:28px 24px;
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s, background .25s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(125,249,255,.5)}
.card-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(125,249,255,.08);
  color:var(--accent);
  margin-bottom:16px;
}
.card-icon svg{width:22px;height:22px}
.card p{color:var(--ink-dim);font-size:15px;margin:0}
.card-link{
  display:inline-block;
  margin-top:14px;
  font-family:var(--display);
  font-size:11px; letter-spacing:.18em; font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
}
.card-link:hover{color:#fff}
.card-link.soon{color:rgba(154,163,199,.7); cursor:default}
.card-link.soon:hover{color:rgba(154,163,199,.7)}

/* ───────── Streams / video ───────── */
.video-wrap{max-width:920px;margin:0 auto}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 0 60px rgba(125,249,255,.15);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ───────── Socials ───────── */
.socials{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-bottom:18px;
}
.sbtn{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  font-family:var(--display);font-size:13px;letter-spacing:.14em;font-weight:700;
  transition:transform .2s, border-color .25s, color .25s, background .25s;
}
.sbtn svg{width:22px;height:22px;flex:none}
.sbtn:hover{transform:translateY(-3px);color:#fff;border-color:var(--accent)}
.sbtn[data-net=yt]{color:#ff6b6b}
.sbtn[data-net=tw]{color:#a48bff}
.sbtn[data-net=x]{color:#fff}
.sbtn[data-net=dc]{color:#7d9bff}
.sbtn[data-net=ig]{color:#ff79c6}
.sbtn[data-net=tt]{color:#7df9ff}
.sbtn:hover{color:#fff}

/* ───────── Contact ───────── */
.contact-card{
  max-width:760px; margin:0 auto;
  background:var(--glass-strong);
  border:1px solid var(--line);
  border-radius:24px;
  padding:48px clamp(24px,5vw,56px);
  backdrop-filter:blur(14px);
  text-align:center;
  position:relative;overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; inset:-2px;
  background:conic-gradient(from 0deg, var(--accent), var(--accent3), var(--accent2), var(--accent));
  filter:blur(40px); opacity:.18; z-index:-1;
}
.contact-card .kicker{display:inline-block}
.mail-cta{display:inline-block;margin-top:24px;text-transform:none;font-size:15px;letter-spacing:.06em}

/* ───────── Fun fact ───────── */
.funfact{ padding-top:60px; padding-bottom:100px }
.funfact h2.center{ margin-bottom:24px; max-width:720px; margin-left:auto; margin-right:auto }
.funfact-body{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  color:var(--ink-dim);
  font-size:16px; line-height:1.7;
}
.funfact-body a{
  color:var(--accent);
  border-bottom:1px dotted rgba(125,249,255,.45);
}
.funfact-body a:hover{ color:#fff; border-color:#fff }

/* ───────── Footer ───────── */
.foot{
  border-top:1px solid var(--line);
  padding:32px clamp(20px,4vw,48px) 40px;
  color:var(--ink-dim); font-size:13px;
  background:rgba(2,3,10,.55);
  backdrop-filter:blur(8px);
}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-links{display:flex;gap:18px}
.foot-links a{color:var(--ink-dim)}
.foot-links a:hover{color:#fff}
.credits{
  border-top:1px dashed rgba(125,249,255,.12);
  padding-top:18px;
  font-size:11.5px; line-height:1.6;
  color:rgba(154,163,199,.85);
  max-width:1100px;
}
.credits > summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:baseline; gap:10px;
  user-select:none;
}
.credits > summary::-webkit-details-marker{display:none}
.credits > summary::before{
  content:"+";
  display:inline-block;
  font-family:var(--mono);
  font-size:14px; line-height:1;
  color:var(--accent);
  width:14px;
  transition:transform .25s ease;
}
.credits[open] > summary::before{transform:rotate(45deg)}
.credits strong{
  display:inline-block; font-family:var(--display); font-size:10px; letter-spacing:.28em;
  color:var(--accent);
}
.credits .credits-hint{
  font-family:var(--body); font-size:10.5px; letter-spacing:.06em;
  color:rgba(154,163,199,.55); font-weight:400;
}
.credits[open] .credits-hint{visibility:hidden}
.credits ul{margin:14px 0 0;padding:0;list-style:none}
.credits li{margin:2px 0}
.credits a{color:var(--ink-dim);border-bottom:1px dotted rgba(125,249,255,.3)}
.credits a:hover{color:#fff;border-color:#fff}

/* ───────── Rocketship — engage free-flight mode ───────── */
.foot{ position:relative }
.fly-btn{
  position:absolute;
  right:clamp(20px,4vw,48px); bottom:18px;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(125,249,255,.05);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--accent);
  cursor:pointer;
  transition:transform .25s, color .2s, background .2s, border-color .2s;
  font-family:var(--display);
  font-size:10px; letter-spacing:.22em; font-weight:800;
  text-transform:uppercase;
}
.fly-btn svg{ width:24px; height:24px; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.fly-btn:hover{
  color:#fff; background:rgba(125,249,255,.12);
  border-color:var(--accent);
  box-shadow:0 0 26px rgba(125,249,255,.3);
}
.fly-btn:hover svg{ transform:translate(4px,-4px) rotate(-12deg) }
.fly-btn-label{ display:inline-block }
@media (max-width:640px){ .fly-btn-label{ display:none } }

/* Free-flight mode — hide page chrome and let the canvas take over. */
body.flying .nav,
body.flying main,
body.flying .foot,
body.flying .vignette,
body.flying .here{ display:none !important }
body.flying #space-3d{ pointer-events:auto; z-index:1 }

.fly-hud{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  z-index:50;
}
body.flying .fly-hud{ opacity:1 }
.fly-hint{
  position:absolute; top:clamp(20px,4vw,40px); left:clamp(20px,4vw,40px);
  background:var(--glass-strong);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
  backdrop-filter:blur(10px);
  pointer-events:auto;
  font-family:var(--body);
}
.fly-hint strong{
  display:block; font-family:var(--display);
  font-size:11px; letter-spacing:.32em; color:var(--accent);
  margin-bottom:10px;
}
.fly-hint ul{ margin:0; padding:0; list-style:none; font-size:13px; line-height:1.9 }
.fly-hint kbd{
  display:inline-block;
  font-family:var(--mono); font-size:11px;
  padding:2px 7px; margin-right:6px;
  background:rgba(125,249,255,.1);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--accent);
}
.fly-exit{
  position:absolute; top:clamp(20px,4vw,40px); right:clamp(20px,4vw,40px);
  pointer-events:auto;
  padding:10px 18px;
  background:rgba(255,58,58,.15);
  border:1px solid rgba(255,58,58,.5);
  border-radius:12px;
  color:#ff8a8a;
  cursor:pointer;
  font-family:var(--display); font-size:11px; letter-spacing:.18em; font-weight:800;
  text-transform:uppercase;
  transition:.2s;
}
.fly-exit:hover{ color:#fff; background:rgba(255,58,58,.3); border-color:#ff8a8a }

/* ───────── Touch flight controls (mobile / tablet) ───────── */
.fly-touch{ display:none; pointer-events:none; }
@media (pointer: coarse), (max-width: 900px){
  body.flying .fly-touch{
    display:block;
    position:absolute; inset:0;
    pointer-events:none;
  }
}

/* Each zone occupies one half of the screen, with a hint label that fades
   out the moment you touch it. The puck appears at the touch point. */
.touch-zone{
  position:absolute; top:0; bottom:0;
  width:50%;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.touch-zone-left{ left:0 }
.touch-zone-right{ right:0 }
.touch-zone-label{
  position:absolute;
  bottom:max(28px, env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:9px; letter-spacing:.28em; font-weight:800;
  color:rgba(125,249,255,.45);
  pointer-events:none;
  white-space:nowrap;
  transition:opacity .2s;
}
.touch-zone.active .touch-zone-label{ opacity:0 }

/* The puck itself: outer ring sits where you first touched; inner stick
   slides to the current finger position (clamped to the ring radius). */
.touch-puck{
  position:absolute;
  width:120px; height:120px;
  border:2px solid rgba(125,249,255,.45);
  background:rgba(5,6,15,.4);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .15s ease;
  backdrop-filter:blur(4px);
  box-shadow:0 0 18px rgba(125,249,255,.25);
}
.touch-puck.active{ opacity:1 }
.touch-puck-stick{
  position:absolute; top:50%; left:50%;
  width:54px; height:54px;
  background:radial-gradient(circle at 35% 30%, rgba(125,249,255,.9), rgba(125,249,255,.5));
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(125,249,255,.55);
  transition:transform .08s linear;
}

.touch-boost{
  position:absolute;
  bottom:max(40px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  left:50%; transform:translateX(-50%);
  width:74px; height:74px;
  border-radius:50%;
  background:rgba(255,180,40,.18);
  border:2px solid rgba(255,180,40,.7);
  color:#ffce6a;
  font-family:var(--display); font-size:10px; letter-spacing:.22em; font-weight:800;
  pointer-events:auto;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  backdrop-filter:blur(6px);
  box-shadow:0 0 18px rgba(255,180,40,.35);
  z-index:2;
}
.touch-boost:active,
.touch-boost.active{
  background:rgba(255,180,40,.45);
  color:#fff;
  box-shadow:0 0 28px rgba(255,180,40,.7);
  transform:translateX(-50%) scale(0.94);
}
/* Double-tapped → time-vortex engaged. Switch to TARDIS-blue palette. */
.touch-boost.vortex-on{
  background:rgba(80,140,255,.35);
  border-color:rgba(140,180,255,.9);
  color:#cfe4ff;
  box-shadow:0 0 32px rgba(110,180,255,.7), inset 0 0 18px rgba(140,180,255,.4);
  animation:vortex-pulse 1.4s ease-in-out infinite;
}
@keyframes vortex-pulse{
  0%,100%{ box-shadow:0 0 32px rgba(110,180,255,.7), inset 0 0 18px rgba(140,180,255,.4) }
  50%    { box-shadow:0 0 48px rgba(180,210,255,.9), inset 0 0 28px rgba(180,210,255,.6) }
}
@media (max-width: 420px){
  .touch-puck{ width:100px; height:100px }
  .touch-puck-stick{ width:44px; height:44px }
  .touch-boost{ width:62px; height:62px; font-size:9px }
  .touch-zone-label{ font-size:8px; bottom:18px }
}
/* On mobile / coarse-pointer devices, hide the desktop kbd hint card
   entirely — the player has no keyboard, the touch controls cover it. */
@media (pointer: coarse), (max-width: 900px){
  body.flying .fly-hint{ display:none }
}

/* ───────── Reveal on scroll ───────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}