/* ============================================================
   DANK MOON PICS — home / hero styles
   ============================================================ */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 70% 10%, #15224a 0%, #0B1026 55%, #070b1c 100%);
  color:#F4EFE2;overflow:hidden;
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;
  padding:40px 0 60px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__stars{position:absolute;inset:0;z-index:0}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}

.hero__copy .eyebrow{color:#FF7286}
.hero h1.kin{
  font-size:clamp(40px,6.4vw,84px);line-height:.98;margin:18px 0 0;font-weight:600;
  letter-spacing:-.02em;color:#fff;
}
.kin .w{display:inline-block;opacity:0;transform:translateY(26px) scale(.82);
  transition:opacity .5s var(--ease),transform .6s cubic-bezier(.16,1.4,.3,1)}
.kin .w.in{opacity:1;transform:none}
.kin .accent{color:#FF8FA0}
.kin .dank{color:#9CC6EE}
.hero__lede{margin:24px 0 0;font-size:clamp(16px,1.45vw,19px);color:rgba(244,239,226,.74);max-width:46ch;line-height:1.6}
.hero__cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.hero__art{position:relative;display:flex;align-items:center;justify-content:center}
#hero-stage{width:100%;max-width:620px;will-change:transform}
.hero-svg{width:100%;height:auto;overflow:visible}
.dmp-rocket{transition:opacity .12s linear;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.rk-flame{transform-box:fill-box;transform-origin:right center;animation:flame .14s steps(2) infinite}
@keyframes flame{from{transform:scaleX(.8) scaleY(1.1)}to{transform:scaleX(1.15) scaleY(.85)}}
.planet-halo{opacity:0;transition:opacity 1.4s ease}
.hero-svg.settled .planet-halo{opacity:1;animation:halo 5s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.65}50%{opacity:1}}

@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}

.hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(244,239,226,.5);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.hero__scroll .dot{width:5px;height:5px;border-radius:50%;background:#FF7286;animation:scrolldot 1.7s ease-in-out infinite}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(13px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .rk-flame,.hero-svg.settled .planet-halo,.hero__scroll .dot{animation:none}
  .planet-halo{opacity:.8}
}

@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr;gap:8px;text-align:center}
  .hero__copy{order:2}
  .hero__art{order:1}
  .hero__cta{justify-content:center}
  .hero__lede{margin-left:auto;margin-right:auto}
  #hero-stage{max-width:460px}
  .hero__scroll{display:none}
}

/* ---------- featured strip ---------- */
.feat{position:relative;background:var(--bg)}
.feat .grid-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:980px){.feat .grid-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feat .grid-row{grid-template-columns:1fr}}
.feat__cta{display:flex;justify-content:center;margin-top:42px}

/* ---------- about teaser ---------- */
.teaser{background:var(--bg-2);position:relative;overflow:hidden}
.teaser__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.teaser h2{font-size:clamp(30px,4.6vw,54px);max-width:14ch}
.teaser p{margin-top:18px}
.teaser__visual{position:relative;aspect-ratio:1;border-radius:24px;background:
  radial-gradient(120% 120% at 30% 20%,#15224a,#0B1026);overflow:hidden;display:grid;place-items:center;
  box-shadow:var(--shadow-lift)}
.teaser__visual .stars-layer .twinkle{background:#fff}
.teaser__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-family:var(--sans);font-weight:600;font-size:13px;padding:8px 14px;border-radius:999px;
  background:var(--surface);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--hairline)}
@media (max-width:820px){.teaser__grid{grid-template-columns:1fr;gap:34px}.teaser__visual{max-width:420px;margin:0 auto;width:100%}}

/* ---------- moon-phase band ---------- */
.moonband{background:var(--bg);text-align:center}
.moonband__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.moonband h2{font-size:clamp(26px,3.6vw,40px);max-width:18ch}
.moonband p{color:var(--ink-soft);max-width:40ch}

/* ---------- instagram marquee ---------- */
.ig{background:var(--space);color:var(--paper);overflow:hidden;position:relative}
.ig__stars{position:absolute;inset:0;opacity:.5}
.ig .section-head{position:relative;z-index:2}
.ig .section-head h2{color:#fff}
.ig .h-link{color:#FF8FA0}
.marquee{position:relative;z-index:2;display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:18px;padding:6px;animation:scrollx 44s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
.igcard{position:relative;flex:none;width:230px;aspect-ratio:1;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;text-decoration:none;box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  transition:transform .3s var(--ease)}
.igcard:hover{transform:translateY(-5px) scale(1.02)}
.igcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.igcard__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;font-family:var(--sans);
  font-size:13px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:6px}
.igcard:hover .igcard__cap{opacity:1;transform:none}
.ig__handle{position:relative;z-index:2;text-align:center;margin-top:26px;color:rgba(247,244,236,.6);font-size:14px}
.ig__handle a{color:#FF8FA0;font-weight:600}
