:root {
  color-scheme: dark;
  --bg: #050612;
  --ink: #f7f1e8;
  --muted: #b8b1a7;
  --line: rgba(247, 241, 232, .18);
  --gold: #f3c76a;
  --coral: #ff5a4f;
  --cyan: #66e3ff;
  --green: #77e29c;
  --panel: rgba(15, 17, 24, .68);
  --x: 68vw;
  --y: 42vh;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 90, 79, .18), transparent 28rem),
    radial-gradient(circle at 82% 12%, rgba(102, 227, 255, .16), transparent 26rem),
    radial-gradient(circle at 56% 72%, rgba(119, 226, 156, .10), transparent 30rem),
    linear-gradient(150deg, #050612 0%, #120918 44%, #07151b 100%);
}

body.is-adult {
  --gold: #ffe08b;
  --coral: #ff756d;
  --cyan: #8df0ff;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 224, 139, .25), transparent 30rem),
    radial-gradient(circle at 75% 18%, rgba(119, 226, 156, .20), transparent 24rem),
    linear-gradient(140deg, #0b0c10 0%, #1b1610 48%, #081416 100%);
}

button { font: inherit; }
.noise {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.45) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

#motion-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.universe {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 900px;
}
.universe::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 18%, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, rgba(102,227,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 66%, rgba(243,199,106,.7) 0 1px, transparent 1.5px);
  background-size: 220px 180px, 310px 260px, 260px 220px, 360px 300px;
  opacity: .48;
  animation: star-drift 42s linear infinite;
}
.sun {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(96px, 13vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #171014;
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 950;
  background:
    radial-gradient(circle at 32% 28%, #fff8ce 0 12%, #ffd46f 34%, #ff765a 68%, rgba(255,90,79,.08) 72%);
  box-shadow: 0 0 40px rgba(255, 212, 111, .52), 0 0 120px rgba(255, 90, 79, .32);
  transform: translate(-50%, -50%);
}
.sun span { transform: rotate(-8deg); }
.orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: orbit-spin var(--speed) linear infinite;
}
.orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(102, 227, 255, .08);
  filter: blur(1px);
}
.orbit-ai { width: min(46vw, 560px); height: min(24vw, 292px); margin: min(-12vw, -146px) 0 0 max(-23vw, -280px); --speed: 13s; }
.orbit-style { width: min(66vw, 760px); height: min(34vw, 392px); margin: min(-17vw, -196px) 0 0 max(-33vw, -380px); --speed: 19s; animation-direction: reverse; }
.orbit-money { width: min(84vw, 980px); height: min(44vw, 510px); margin: min(-22vw, -255px) 0 0 max(-42vw, -490px); --speed: 25s; }
.orbit-love { width: min(104vw, 1180px); height: min(54vw, 620px); margin: min(-27vw, -310px) 0 0 max(-52vw, -590px); --speed: 31s; animation-direction: reverse; }
.planet {
  position: absolute;
  left: 50%;
  top: -16px;
  min-width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #071015;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 12px 42px rgba(0,0,0,.32), 0 0 34px rgba(255,255,255,.18);
  transform: translateX(-50%);
}
.planet-ai { background: linear-gradient(135deg, #8df0ff, #5b8dff); }
.planet-style { background: linear-gradient(135deg, #f7f1e8, #f3c76a); }
.planet-money { background: linear-gradient(135deg, #77e29c, #d8ff89); }
.planet-love { background: linear-gradient(135deg, #ff756d, #ffb0d4); }
.planet-finger {
  min-width: 58px;
  height: 58px;
  font-size: 31px;
  line-height: 1;
  background:
    radial-gradient(circle at 35% 25%, #fff0cb 0 18%, transparent 19%),
    linear-gradient(135deg, #ffd18a, #ff756d 64%, #a73cff);
  border: 2px solid rgba(255, 255, 255, .42);
  box-shadow: 0 16px 46px rgba(0,0,0,.38), 0 0 42px rgba(255,117,109,.38);
  transform: translateX(-50%) rotate(-12deg);
  animation: finger-wobble 1.8s ease-in-out infinite alternate;
}
.asteroid {
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(247,241,232,.72);
  box-shadow: 0 0 22px rgba(247,241,232,.42);
  animation: asteroid-float 12s ease-in-out infinite alternate;
}
.a1 { left: 18%; top: 31%; }
.a2 { left: 76%; top: 24%; width: 7px; animation-delay: -4s; }
.a3 { left: 68%; top: 78%; width: 13px; animation-delay: -8s; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes finger-wobble { to { transform: translateX(-50%) rotate(14deg) scale(1.08); } }
@keyframes star-drift { to { transform: translate3d(-120px, 70px, 0); } }
@keyframes asteroid-float { to { transform: translate3d(38px, -26px, 0) scale(1.35); opacity: .38; } }


.stage { position: relative; z-index: 2; min-height: 100vh; }
.hero {
  min-height: 86vh;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
  align-items: center;
  gap: clamp(28px, 6vw, 74px);
  padding: clamp(34px, 7vw, 86px) 0 28px;
}

.hero-copy { max-width: 650px; }
.kicker {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1, h2 { margin: 0; letter-spacing: 0; }
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 9vw, 118px);
  line-height: .82;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 5vw, 62px); line-height: .95; }
p { color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.58; margin: 20px 0 0; }
.lead { color: var(--ink); font-weight: 760; }

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.adult-button {
  min-height: 50px;
  border: 1px solid rgba(243, 199, 106, .72);
  border-radius: 8px;
  padding: 0 18px;
  color: #111217;
  background: linear-gradient(135deg, var(--gold), #fff0bc);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(243, 199, 106, .20);
}
.status { color: var(--muted); font-size: 13px; font-weight: 800; }

.showcase { position: relative; min-height: 520px; display: grid; place-items: center; }
.target-card {
  position: absolute;
  inset: auto 0 44px auto;
  width: min(330px, 82vw);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 9, 12, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 80px rgba(0,0,0,.36);
  transform: translate3d(calc((var(--x) - 50vw) * -.018), calc((var(--y) - 50vh) * -.012), 0) rotate(-2deg);
}
.target-card .age { display: block; color: var(--gold); font-size: 72px; line-height: .8; font-weight: 950; }
.target-card strong, .target-card small { display: block; }
.target-card strong { margin-top: 12px; font-size: 22px; }
.target-card small { margin-top: 8px; color: var(--muted); }

.fig {
  position: fixed;
  left: clamp(118px, var(--x), calc(100vw - 118px));
  top: clamp(110px, var(--y), calc(100vh - 110px));
  z-index: 5;
  width: 236px;
  height: 220px;
  margin: -110px 0 0 -118px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  cursor: grab;
  transform: rotate(calc((var(--xnum, .68) - .5) * 22deg - 11deg)) scale(var(--fig-scale, 1));
  box-shadow: 0 36px 86px rgba(0,0,0,.44), 0 0 0 1px rgba(243,199,106,.22) inset;
  transition: box-shadow .18s ease, transform .08s linear;
}
.fig:active { cursor: grabbing; --fig-scale: 1.08; }
.fig img { display: block; width: 100%; height: 166px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0,0,0,.34)); }
.fig span { display: block; color: var(--gold); font-size: 13px; font-weight: 950; text-transform: uppercase; }

.excuses, .finale { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.excuse-board { min-height: 180px; position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.excuse {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 8px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter: blur(12px);
  cursor: grab;
  user-select: none;
  touch-action: none;
  font-weight: 880;
  box-shadow: 0 12px 34px rgba(0,0,0,.20);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 0deg));
}
.excuse:active { cursor: grabbing; }
.excuse.is-gone { opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }

.finale {
  margin-bottom: 52px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(243,199,106,.32);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(243,199,106,.13), rgba(102,227,255,.08));
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.finale p { max-width: 760px; color: var(--ink); font-weight: 720; }

.ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 9, 13, .78);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.ticker span {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  animation: marquee 14s linear infinite;
  padding-right: 26px;
}

.burst {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  animation: burst .82s ease-out forwards;
}

@keyframes marquee { to { transform: translateX(-480px); } }
@keyframes burst { to { transform: translate3d(var(--bx), var(--by), 0) scale(.6); opacity: 0; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 42px; }
  .showcase { min-height: 430px; }
  .sun { left: 72%; top: 39%; opacity: .78; }
  .orbit { left: 72%; top: 39%; }
  .orbit-ai { width: 300px; height: 168px; margin: -84px 0 0 -150px; }
  .orbit-style { width: 410px; height: 226px; margin: -113px 0 0 -205px; }
  .orbit-money { width: 520px; height: 286px; margin: -143px 0 0 -260px; }
  .orbit-love { width: 640px; height: 352px; margin: -176px 0 0 -320px; }
  .fig { width: 172px; height: 166px; margin: -83px 0 0 -86px; }
  .fig img { height: 118px; }
  .target-card { inset: auto auto 18px 0; }
  .section-head { display: block; }
}

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