/* ============================================================
   JADU GAME STUDIO — home.css
   HOME-PAGE-ONLY styles, loaded after css/theme.css in index.html.
   Everything global (tokens, header, cards, footer, copy buttons,
   motion language) lives in theme.css — this file only contains
   the hero: watermark, masked headline, floating cover cards.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + 4rem) 0 5.5rem;
}
.hero::before {
  background:
    radial-gradient(900px 460px at 68% 8%, rgba(143, 155, 242, 0.055), transparent 62%),
    radial-gradient(700px 420px at 10% 90%, rgba(143, 155, 242, 0.03), transparent 60%);
}
.hero .orb { display: none; }
.scroll-hint { display: none; }

/* Giant, ghosted studio logo behind the hero (drifts on scroll via home.js) */
.hero-watermark {
  position: absolute;
  right: -6%;
  top: 4%;
  width: min(44vw, 540px);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.85);
  -webkit-mask-image: radial-gradient(circle at 58% 42%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 58% 42%, #000 30%, transparent 72%);
}

.hero-pill {
  border-radius: 999px;
  border: var(--border);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
}
.hero-pill .pulse-dot { background: var(--gold); animation: pulse 2.8s infinite; }

.hero-title {
  font-size: clamp(2.8rem, 6.6vw, 5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 1.7rem;
}
/* Masked line-by-line reveal */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.hero-title .line-inner { display: inline-block; will-change: transform; }
.hero-title .line-inner.reveal {
  opacity: 1;
  filter: none;
  transform: translateY(114%);
  transition: transform 1.2s var(--ease-out);
}
.hero-title .line-inner.reveal.visible { transform: none; }

.hero-sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  max-width: 52ch;
}

/* Floating cover cards — outer gets pointer-parallax from home.js,
   inner keeps the CSS bobbing animation (zero conflict). */
.hero-art { height: 500px; }
.float-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface);
  box-shadow: 0 44px 90px -32px rgba(0, 0, 0, 0.68);
  overflow: hidden;
  will-change: translate;
}
.float-inner {
  width: 100%;
  height: 100%;
  animation: floaty 9s ease-in-out infinite;
  will-change: translate;
}
.float-card-2 .float-inner { animation-delay: -3s; }
.float-card-3 .float-inner { animation-delay: -6s; }
.float-card img { width: 100%; height: 100%; object-fit: cover; }
.float-card-1 { width: 252px; aspect-ratio: 16 / 10; top: 44px; left: 10%; transform: rotate(-6deg); z-index: 3; }
.float-card-2 { width: 216px; aspect-ratio: 16 / 10; top: 44%; right: 4%; transform: rotate(4deg); z-index: 2; }
.float-card-3 { width: 192px; aspect-ratio: 16 / 10; bottom: 14px; left: 2%; transform: rotate(2deg); z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-title .line-inner.reveal { transition: none; transform: none; }
  .float-inner { animation: none; }
}

/* ---------- Responsive (hero only) ---------- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 3rem); }
  .hero-watermark { display: none; }
}
@media (max-width: 760px) {
  .hero-art { height: 380px; }
  .float-card-1 { width: 200px; left: 4%; top: 20px; }
  .float-card-2 { width: 170px; right: 2%; }
  .float-card-3 { width: 150px; }
}