/*
 * Hero polish — visual/motion only (no markup changes)
 */

.hero--studio {
  --hero-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* Stronger atmosphere */
.hero--studio .hero-grid {
  opacity: 0.9;
  animation: heroGridDrift 24s linear infinite;
}

@keyframes heroGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 56px, 56px 56px; }
}

.hero--studio .hero-aurora-beam {
  opacity: 0.55;
  filter: blur(100px);
}

html:not([data-theme="dark"]) .hero--studio .hero-aurora-beam {
  opacity: 0.32;
}

.hero--studio .hero-spotlight {
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.16) 0%, rgba(var(--primary-rgb), 0.1) 35%, transparent 68%);
  transition: opacity 0.45s ease, width 0.4s, height 0.4s;
}

/* Choreographed entrance for existing nodes */
.hero--studio .hero-status {
  animation: heroEnterSoft 0.9s 0.05s var(--hero-enter) both;
}

.hero--studio .hero-title .line > span,
.hero--studio .hero-title .line--accent > span {
  animation-duration: 1.05s !important;
  animation-timing-function: var(--hero-enter) !important;
}

.hero--studio .hero-desc {
  animation: heroEnterSoft 1s 0.7s var(--hero-enter) both;
}

.hero--studio .hero-actions {
  animation: heroEnterSoft 0.95s 0.85s var(--hero-enter) both;
}

.hero--studio .hero-stats {
  animation: heroEnterSoft 1s 1.05s var(--hero-enter) both;
}

.hero--studio .hero-stat {
  transition: transform 0.45s var(--hero-spring), background 0.35s, border-color 0.35s, box-shadow 0.45s;
}

.hero--studio .hero-stat:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  border-color: rgba(var(--gold-rgb), 0.35);
}

.hero--studio .hero-stat .num {
  background: linear-gradient(135deg, var(--gold-light), #fff6c8 45%, #8df5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .hero--studio .hero-stat .num {
  background: linear-gradient(135deg, #ffe06a, #ffb800 40%, #8df5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Showcase depth */
.hero-showcase {
  animation: heroShowcaseIn 1.2s 0.25s var(--hero-enter) both;
}

@keyframes heroShowcaseIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(36px) scale(0.92) rotateX(8deg);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotateX(0);
  }
}

.hero-showcase-ring {
  width: min(420px, 90%);
  height: min(420px, 90%);
  border-color: rgba(var(--primary-rgb), 0.22);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.05), 0 0 80px rgba(var(--primary-rgb), 0.12);
}

.hero-showcase-glow {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.28) 0%, rgba(var(--primary-rgb), 0.18) 40%, transparent 70%);
  animation: heroGlowPulse 3.2s ease-in-out infinite;
}

.hero-browser {
  transform: rotateY(-10deg) rotateX(6deg) translateZ(0);
  transition: transform 0.55s var(--hero-enter), box-shadow 0.45s;
}

.hero-showcase-inner:hover .hero-browser,
.hero-showcase-inner.is-tilting .hero-browser {
  transform: rotateY(-4deg) rotateX(2deg) translateY(-6px);
  box-shadow: 0 48px 110px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hero-preview-nav,
.hero-preview-hero-block,
.hero-preview-cards span {
  animation-timing-function: var(--hero-enter) !important;
}

.hero-preview-hero-block {
  position: relative;
  overflow: hidden;
}

.hero-preview-hero-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45), transparent 70%);
  transform: translateX(-120%);
  animation: heroSheen 3.8s 2s ease-in-out infinite;
}

@keyframes heroSheen {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

.hero-preview-cards span {
  transition: transform 0.45s var(--hero-spring), background 0.35s, box-shadow 0.35s;
}

.hero-browser:hover .hero-preview-cards span:nth-child(1) { transform: translateY(-4px); }
.hero-browser:hover .hero-preview-cards span:nth-child(2) { transform: translateY(-7px); }
.hero-browser:hover .hero-preview-cards span:nth-child(3) { transform: translateY(-4px); }

/* Terminal */
.hero-terminal {
  animation: heroTerminalPop 0.95s 1.15s var(--hero-spring) both;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@keyframes heroTerminalPop {
  from {
    opacity: 0;
    transform: rotate(3deg) translateY(28px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(3deg) translateY(0) scale(1);
  }
}

.hero-terminal:hover {
  transform: rotate(1deg) translateY(-4px) scale(1.02);
  transition: transform 0.45s var(--hero-spring);
}

/* Chips — entrance then float */
.hero-chip {
  opacity: 0;
  animation: heroChipLife 5.5s var(--hero-spring) infinite;
  transition: box-shadow 0.35s, border-color 0.35s, background 0.35s;
}

.hero-chip--1 { animation-delay: 1.2s; }
.hero-chip--2 { animation-delay: 1.35s; }
.hero-chip--3 { animation-delay: 1.5s; }
.hero-chip--4 { animation-delay: 1.65s; }

@keyframes heroChipLife {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.86);
    filter: blur(6px);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-chip:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--gold-rgb), 0.12);
}

/* Scroll cue */
.hero-scroll {
  animation: heroEnterSoft 1s 1.6s var(--hero-enter) both;
  opacity: 0.75;
}

.hero-scroll-line {
  width: 2px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  border-radius: 2px;
  animation: heroScrollLine 1.8s ease-in-out infinite;
}

.hero--studio .hero-badge {
  animation: heroEnterSoft 1s 1.35s var(--hero-enter) both;
  backdrop-filter: blur(18px) saturate(140%);
}

.hero--studio .hero-badge:hover {
  transform: translateY(-4px);
  transition: transform 0.45s var(--hero-spring);
}

@keyframes heroEnterSoft {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Scroll depth (driven by JS classes/vars) */
.hero--studio.is-scrolling .hero-content {
  transform: translate3d(0, calc(var(--hero-shift, 0) * 0.35px), 0);
  opacity: calc(1 - (var(--hero-shift, 0) * 0.0011));
  transition: none;
}

.hero--studio.is-scrolling .hero-showcase {
  transform: translate3d(0, calc(var(--hero-shift, 0) * 0.18px), 0) scale(calc(1 - var(--hero-shift, 0) * 0.00015));
  transition: none;
}

.hero--studio.is-scrolling .hero-aurora {
  transform: translateY(calc(var(--hero-shift, 0) * 0.12px));
}

@media (max-width: 1024px) {
  .hero-showcase { animation: none; }
  .hero--studio.is-scrolling .hero-content,
  .hero--studio.is-scrolling .hero-showcase {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--studio .hero-status,
  .hero--studio .hero-desc,
  .hero--studio .hero-actions,
  .hero--studio .hero-stats,
  .hero-showcase,
  .hero-chip,
  .hero-terminal,
  .hero-scroll,
  .hero--studio .hero-badge,
  .hero--studio .hero-grid {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}