/* FILE-MAP:
purpose: MAGNETAR — liquid gravity. Design system + layout for / (experience).
depends_on: [assets/fonts/unbounded/font.css, assets/fonts/schibsted-grotesk/font.css]
used_by: [index.html, guide/index.html (tokens + shared chrome via css/guide.css import)]
invariants: [base achromatic blue-black; iridescent material ONLY on hero media + .iride-rule + .cta;
  body contrast >= 4.5:1; no #000/#FFF absolutes; prefers-reduced-motion honored]
END-FILE-MAP */

/* ============ tokens ============ */
:root{
  --ink:        #0A0A12;
  --raised:     #12121E;
  --text:       #E9E9F2;
  --body:       #CFCFDD;
  --muted:      #8B8B9E;
  --line:       rgba(139,139,158,.22);
  --iride-a:    #E44FD3;
  --iride-b:    #7C5CFF;
  --iride-c:    #4FD8E4;
  --iride:      linear-gradient(115deg, var(--iride-a), var(--iride-b) 48%, var(--iride-c));
  --font-display:'Unbounded', system-ui, sans-serif;
  --font-body:  'Schibsted Grotesk', system-ui, sans-serif;
  --pad:        clamp(1.25rem, 4vw, 4rem);
  --shadow-plate: 0 34px 90px -24px rgba(4,4,10,.85);
}

/* ============ base ============ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; overflow-x:clip }
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img, video{ display:block; max-width:100% }
a{ color:inherit }
::selection{ background:var(--iride-b); color:var(--ink) }
:focus-visible{ outline:2px solid var(--iride-c); outline-offset:3px; border-radius:2px }

.skip-link{
  position:absolute; left:-999px; top:.75rem; z-index:99;
  background:var(--raised); color:var(--text); padding:.6rem 1.1rem; border-radius:6px;
}
.skip-link:focus{ left:.75rem }

.kicker{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.24em; color:var(--muted);
}
.kicker .num{ font-family:var(--font-display); font-weight:500; letter-spacing:.08em }
.nowrap{ white-space:nowrap }

/* ============ nav ============ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  background:rgba(10,10,18,.58);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  pointer-events:none;
}
.nav a{ pointer-events:auto }
.nav-logo{ color:var(--text); display:inline-flex }
.nav-logo svg{ height:22px; width:auto }
.nav-links{ display:flex; gap:2rem }
.nav-links a{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--muted); text-decoration:none; transition:color .3s ease;
}
.nav-links a:hover{ color:var(--text) }

/* ============ hero ============ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid; align-content:center;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; background:var(--ink) }
.hero-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  mix-blend-mode:screen;             /* sinks video blacks into the page ink */
  opacity:0; transition:opacity .85s linear;
}
.hero-vid.is-front{ opacity:1 }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,18,.42), rgba(10,10,18,0) 32%,
      rgba(10,10,18,0) 58%, rgba(10,10,18,.9) 94%),
    linear-gradient(100deg, rgba(10,10,18,.5), rgba(10,10,18,0) 55%);
}
.hero-inner{
  position:relative; z-index:1;
  padding:7rem var(--pad) 6rem clamp(1.25rem, 9vw, 11rem);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.35rem, 9vw, 8rem);
  line-height:1.02;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-top:1.4rem;
}
.hero-title .line{ display:block }
.hero-title .line--blend{
  margin-left:clamp(2rem, 12vw, 13rem);
  mix-blend-mode:difference;         /* type interferes with the fluid highlights */
}
.hero-title .char{ display:inline-block }
.hero-lede{
  max-width:44ch;
  margin-top:2.1rem;
  font-size:1.06rem;
  color:var(--body);
}
.hero-lede em{ font-style:italic; color:var(--text) }

/* THE one iridescent CTA */
.hero-cta-zone{ margin-top:2.6rem }
.cta{
  position:relative;
  display:inline-flex; align-items:center;
  padding:1.05rem 2.3rem;
  border-radius:999px;
  background:var(--iride);
  background-size:230% 230%;
  background-position:12% 50%;
  color:var(--ink);
  font-weight:700; font-size:.95rem; letter-spacing:.03em;
  text-decoration:none;
  transition:background-position .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
  box-shadow:0 18px 44px -18px rgba(124,92,255,.45); /* tinted, not neon */
}
.cta:hover{ background-position:88% 50% }
.cta:active{ transform:scale(.98) }

.hero-scrollcue{
  position:absolute; z-index:1;
  bottom:2rem; right:var(--pad);
  color:var(--muted);
  animation:cue-drift 2.8s ease-in-out infinite;
}
@keyframes cue-drift{
  0%,100%{ transform:translateY(0); opacity:.85 }
  50%{ transform:translateY(8px); opacity:.4 }
}

/* ============ marquee ============ */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:1.15rem;
  background:var(--ink);
}
.marquee-track{
  display:inline-flex; white-space:nowrap;
  will-change:transform;
}
/* solid translucent fill — text-stroke shows seam artifacts on Unbounded's
   overlapping contours (pass-2 finding) */
.marquee-seg{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem, 5.4vw, 4.2rem);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(139,139,158,.30);
}

/* ============ manifesto ============ */
.manifesto{
  position:relative;
  padding:clamp(6rem, 15vh, 11rem) var(--pad);
  overflow:hidden;
}
.mesh{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.manifesto-inner{
  position:relative; z-index:1;
  max-width:62rem;
  margin-left:clamp(0rem, 14vw, 16rem);   /* massive asymmetric void */
}
.statement{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.65rem, 3.5vw, 3.3rem);
  line-height:1.3;
  margin-top:1.6rem;
  text-wrap:balance;
}

/* THE one iridescent rule */
.iride-rule{
  border:0;
  height:2px;
  width:min(36rem, 74%);
  margin:3rem 0 2.6rem;
  background:var(--iride);
  background-size:300% 100%;
  animation:iride-slide 10s ease-in-out infinite alternate;
}
@keyframes iride-slide{
  from{ background-position:0% 50% }
  to{ background-position:100% 50% }
}

.manifesto-copy{ max-width:56ch }
.manifesto-copy p{ color:var(--body); font-size:1.05rem }
.manifesto-copy p + p{ margin-top:1.4rem }

/* ============ matéria — pranchas ============ */
.materia{ padding-block:clamp(3rem, 8vh, 6rem) }
.materia-head{ padding-inline:var(--pad); margin-bottom:clamp(3rem, 8vh, 6rem) }

.plate{ position:relative; margin-block:clamp(6rem, 18vh, 13rem) }
.plate-media img{
  width:100%; height:auto;
  border-radius:18px;
  box-shadow:var(--shadow-plate);
}
.plate-num{
  position:absolute; z-index:2;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(5rem, 13vw, 11rem);
  line-height:1;
  color:rgba(139,139,158,.17);   /* ghost fill — stroke artifacts on Unbounded (pass-2) */
  pointer-events:none;
  user-select:none;
}
.plate h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.15rem, 1.9vw, 1.6rem);
  letter-spacing:.02em;
  margin-bottom:1.1rem;
}
.plate p{ color:var(--body); max-width:46ch }
.plate p + p{ margin-top:1.2rem }

/* 01 — torus: media bleeds off the right edge */
.plate--torus{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  gap:clamp(2rem, 5vw, 5rem);
  padding-left:var(--pad);
}
.plate--torus .plate-media{
  order:2;
  margin-right:calc(-1 * (var(--pad) + 5vw));
  transform:rotate(-4deg);
}
.plate--torus .plate-body{ order:1; padding-left:clamp(0rem, 6vw, 7rem) }
.plate--torus .plate-num{ left:46%; top:-.5em }

/* 02 — spire: type wraps the fluid form (shape-outside).
   NOTE: no transform/parallax on .wrap-spire — a transform would detach the
   painted image from its float geometry and cover the wrapped text (pass-1 bug). */
.plate--spire .plate-body--wrap{
  max-width:58rem;
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flow-root;   /* contain the float — else it displaces the next plate's grid */
}
.plate-body--wrap p{ max-width:none }
.wrap-spire{
  float:left;
  width:clamp(180px, 26vw, 340px);
  height:auto;
  margin:.4rem 2.4rem 1.2rem 0;
  mix-blend-mode:screen;   /* fluid dissolves into the ink — type wraps the spike itself.
                              source webp has its low end crushed to black so screen
                              reveals no backdrop panel (pass-3 fix) */
  shape-outside:polygon(0 0, 42% 0, 55% 35%, 70% 65%, 88% 88%, 100% 100%, 0 100%);
  shape-margin:1.3rem;
}
.plate--spire .plate-num{ right:var(--pad); top:-.7em }
.plate--spire h3{ padding-top:.6rem }

/* 03 — field: media bleeds off the left edge */
.plate--field{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:end;
  gap:clamp(2rem, 5vw, 5rem);
  padding-right:var(--pad);
}
.plate--field .plate-media{
  margin-left:calc(-1 * (var(--pad) + 4vw));
  transform:rotate(2deg);
}
.plate--field .plate-num{ left:52%; top:-.6em }
.plate--field .plate-body{ padding-bottom:2rem }

/* ============ finale ============ */
.finale{
  position:relative;
  padding:clamp(7rem, 18vh, 13rem) var(--pad);
  overflow:hidden;
}
.finale-emblem{
  position:absolute; z-index:0;
  top:50%; right:-8%;
  transform:translateY(-50%);
  width:clamp(300px, 42vw, 620px);
  color:rgba(139,139,158,.09);
  pointer-events:none;
}
.finale-line{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.9rem, 4.6vw, 4rem);
  line-height:1.18;
  max-width:16ch;
  margin-left:clamp(0rem, 8vw, 9rem);
}
.finale-sub{
  position:relative; z-index:1;
  color:var(--muted);
  max-width:52ch;
  margin-top:2rem;
  margin-left:clamp(0rem, 8vw, 9rem);
}
.guide-link{
  position:relative; z-index:1;
  display:inline-block;
  margin-top:2.6rem;
  margin-left:clamp(0rem, 8vw, 9rem);
  font-weight:600;
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--muted);
  text-underline-offset:.4em;
  transition:text-decoration-color .3s ease;
}
.guide-link:hover{ text-decoration-color:var(--text) }

/* ============ footer ============ */
.footer{
  border-top:1px solid var(--line);
  padding:3rem var(--pad) 3.5rem;
  display:grid; gap:1.6rem;
}
.footer-brand{ display:flex; align-items:center; gap:1.1rem }
.footer-emblem{ height:32px; width:auto; color:var(--muted) }
.footer-brand p{ color:var(--muted); font-size:.85rem }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.6rem }
.footer-links a, .footer-links span{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); text-decoration:none;
}
.footer-links a:hover{ color:var(--text) }
.footer-links span[aria-current]{ color:var(--text) }
.footer-colophon{ color:var(--muted); font-size:.78rem }

/* ============ mobile collapse (< 880px) ============ */
@media (max-width: 879px){
  .nav-links{ gap:1.1rem }
  .nav-links a:not(:last-child){ display:none }

  .hero-inner{ padding:6.5rem 1.25rem 5.5rem }
  .hero-title .line--blend{ margin-left:8vw }
  .hero-scrollcue{ right:1.25rem; bottom:1.4rem }

  .manifesto-inner{ margin-left:0 }

  .plate--torus,
  .plate--field{ display:block; padding-inline:1.25rem }
  .plate--torus .plate-media{ margin:0 -1.25rem 2rem; transform:rotate(-2deg) }
  .plate--field .plate-media{ margin:0 -1.25rem 2rem; transform:rotate(1.5deg) }
  .plate--torus .plate-body,
  .plate--field .plate-body{ padding:0 }
  .plate-num{ font-size:clamp(4rem, 22vw, 6.5rem) }
  .plate--torus .plate-num{ left:auto; right:1rem; top:-.5em }
  .plate--field .plate-num{ left:auto; right:1rem }

  .wrap-spire{
    float:none;
    width:100%;
    margin:0 0 1.6rem;
    shape-outside:none;
  }
  .finale-emblem{ right:-24%; width:76vw }
  .finale-line, .finale-sub, .guide-link{ margin-left:0 }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero-vid{ display:none }
  .hero-media{
    background:url("../assets/img/magnetar-hero-spikes.webp") center / cover no-repeat;
  }
}