/* PRISM WARD — landing page
   One theme (dark, locked): the page is the game's night.
   One interactive accent: cyan. Violet / magenta / gold appear only as
   2px feature keylines, mapped to their in-game meanings.
   Radius rule: interactive elements are pills; the single craft panel is 24px;
   everything else sits on hairlines and space. */

@font-face{ font-family:'Clash Display'; src:url('/fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url('/fonts/ClashDisplay-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'General Sans'; src:url('/fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'General Sans'; src:url('/fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root{
  --bg:#05060f; --text:#dfe9ff; --text-dim:rgba(223,233,255,.55);
  --cyan:#5ee0ff; --violet:#b98cff; --gold:#ffd75e; --magenta:#ff5ec8;
  --display:'Clash Display', system-ui, sans-serif;
  --body:'General Sans', system-ui, sans-serif;
  --hairline:rgba(223,233,255,.09);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{ margin:0; box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
html, body{ overflow-x:clip; }
body{
  background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--cyan); color:var(--bg); }

/* ---------- Hero ---------- */

.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* melt the 3D scene into the page ground */
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:22svh;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}

.no-webgl #hero-canvas{ display:none; }
.no-webgl .hero{ background:
  radial-gradient(60% 50% at 50% 30%, rgba(94,224,255,.14), transparent 70%),
  radial-gradient(40% 40% at 70% 70%, rgba(255,94,200,.10), transparent 70%), var(--bg); }

.hero-inner{
  position:relative; text-align:center;
  padding:2rem 1.5rem;
  max-width:46rem;
}

.kicker{
  font-family:var(--body); font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:1.4rem;
}

h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(4.25rem, 19vw, 10.5rem);
  line-height:.9; letter-spacing:-.015em;
  margin-bottom:1.6rem;
  text-shadow:0 0 60px rgba(94,224,255,.18);
}

.tagline{
  font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.55;
  color:var(--text-dim);
  max-width:26ch; margin:0 auto 2.75rem;
}

.hint{
  font-size:.8rem; color:var(--text-dim);
  margin-top:1.4rem; letter-spacing:.01em;
}

/* ---------- CTA ---------- */

.cta{
  display:inline-block; font-family:var(--display); font-weight:500;
  font-size:1.05rem; letter-spacing:.01em;
  color:var(--bg); background:var(--cyan); text-decoration:none;
  border-radius:999px; padding:1rem 2.75rem;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .45s var(--ease-out);
}
.cta:hover{
  transform:translateY(-2px);
  background:#7ee8ff;
  box-shadow:0 0 0 1px rgba(94,224,255,.4), 0 10px 40px rgba(94,224,255,.28);
}
.cta:active{ transform:translateY(0) scale(.98); box-shadow:0 0 0 1px rgba(94,224,255,.3), 0 4px 18px rgba(94,224,255,.2); }
.cta:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }

/* ---------- Features ---------- */

main{ padding:0 1.5rem; }

.features{
  max-width:64rem; margin:0 auto;
  padding:clamp(5rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
}

.feature{
  border-top:1px solid var(--hairline);
  padding:2.75rem .25rem;
}

.feature h2::before{
  content:""; display:block;
  width:28px; height:2px; border-radius:1px;
  margin-bottom:1.2rem;
}
.feature-pulse   h2::before{ background:var(--cyan);    box-shadow:0 0 14px rgba(94,224,255,.55); }
.feature-gravity h2::before{ background:var(--violet);  box-shadow:0 0 14px rgba(185,140,255,.55); }
.feature-boss    h2::before{ background:var(--magenta); box-shadow:0 0 14px rgba(255,94,200,.55); }
.feature-dodge   h2::before{ background:var(--gold);    box-shadow:0 0 14px rgba(255,215,94,.55); }

.feature h2{
  font-family:var(--display); font-weight:600;
  font-size:1.45rem; letter-spacing:-.01em; line-height:1.15;
  margin-bottom:.85rem;
}
.feature p{
  color:var(--text-dim); font-size:.98rem; max-width:38ch;
}

/* ---------- Craft ---------- */

.craft{
  max-width:64rem; margin:0 auto;
  padding:clamp(2.5rem, 6vh, 4rem) clamp(1.75rem, 5vw, 4rem) clamp(3rem, 7vh, 4.5rem);
  background:rgba(223,233,255,.025);
  border:1px solid var(--hairline);
  border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(223,233,255,.05);
}

.craft h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem, 3.4vw, 2.15rem);
  letter-spacing:-.01em; line-height:1.2;
  max-width:24ch;
  margin-bottom:clamp(2.25rem, 5vh, 3.25rem);
}

.craft ul{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:2.25rem 2rem;
}
.craft li{ display:flex; flex-direction:column; }
.craft strong{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.75rem, 6vw, 3.75rem); line-height:1;
  color:var(--cyan);
  margin-bottom:.5rem;
}
.stat-term{
  font-weight:500; font-size:.95rem; letter-spacing:.01em;
  margin-bottom:.35rem;
}
.stat-note{
  color:var(--text-dim); font-size:.88rem; line-height:1.5;
  max-width:24ch;
}

/* ---------- Footer CTA + colophon ---------- */

.footer-cta{
  text-align:center;
  padding:clamp(6rem, 16vh, 10rem) 0;
}

.colophon{
  border-top:1px solid var(--hairline);
  padding:2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
  text-align:center;
}
.colophon p{ color:var(--text-dim); font-size:.8rem; }

/* ---------- Desktop ---------- */

@media (min-width:900px){
  .features{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:4.5rem;
  }
  .feature{ padding:3.25rem .25rem; }
  .craft ul{ grid-template-columns:repeat(4, 1fr); gap:2rem; }
  .stat-note{ max-width:20ch; }
}

/* ---------- Reveal (Task 5 toggles .in) ---------- */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* gentle stagger inside the hero */
.hero-inner .reveal:nth-child(2){ transition-delay:.06s; }
.hero-inner .reveal:nth-child(3){ transition-delay:.12s; }
.hero-inner .reveal:nth-child(4){ transition-delay:.18s; }
.hero-inner .reveal:nth-child(5){ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .cta{ transition:none; }
  .cta:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}