/* ═══════════════════════════════════════════════════════
   HERO — full-screen section, orbs, waveform canvas,
           letter animation, scroll indicator
   Depends on: tokens.css, base.css
   ═══════════════════════════════════════════════════════ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-inline: var(--gutter);
  padding-bottom: clamp(72px, 11vw, 140px);
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
  /* Fallback gradient (shown until video is provided) */
  background: linear-gradient(
    to bottom,
    #232D42 0%,
    #1D2638 35%,
    #191F2E 65%,
    #171B20 100%
  );
}

/* ── Light mode hero ───────────────────────────────────── */
[data-theme="light"] .hero {
  background: linear-gradient(
    to bottom,
    #E4E1D8 0%,
    #E8E5DC 35%,
    #EBE8DF 65%,
    #F0EDE4 100%
  );
}
/* Orbs: light-mode versions — Cyprus/sand tints instead of dark blue */
[data-theme="light"] .hero__orb-1 {
  background: radial-gradient(circle, rgba(0,71,65,0.08) 0%, rgba(0,71,65,0.03) 45%, transparent 70%);
}
[data-theme="light"] .hero__orb-2 {
  background: radial-gradient(circle, rgba(140,100,64,0.09) 0%, rgba(140,100,64,0.03) 50%, transparent 70%);
}
[data-theme="light"] .hero__orb-3 {
  background: radial-gradient(circle, rgba(93,62,128,0.06) 0%, transparent 65%);
}
[data-theme="light"] .hero__orb-4 {
  background: radial-gradient(circle, rgba(0,71,65,0.07) 0%, rgba(0,71,65,0.02) 50%, transparent 70%);
}

/* Text shadow — depth without dominance */
[data-theme="light"] .hero__name,
[data-theme="light"] .hero__statement,
[data-theme="light"] .hero__label {
  text-shadow: 0 1px 4px rgba(0,71,65,0.10);
}

/* ── Video background slot ─────────────────────────────── */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Remove display:none to activate */
  display: none;
}

/* Dark cinematic overlay (activates with video) */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 24, 36, 0.55) 0%,
    rgba(18, 20, 28, 0.70) 60%,
    rgba(23, 27, 32, 0.92) 100%
  );
  z-index: 1;
  display: none;
}
.hero__bg-video:not([style*="display:none"]):not([style*="display: none"]) ~ .hero__bg-overlay,
.hero__bg-video.active ~ .hero__bg-overlay {
  display: block;
}
/* Never show dark overlay in light mode */
[data-theme="light"] .hero__bg-overlay { display: none !important; }

/* Top vignette — nav legibility in dark mode */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(
    to bottom,
    rgba(10, 15, 28, 0.45) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .hero::after { display: none; }

/* Film grain overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* ── Ambient orbs ──────────────────────────────────────── */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  will-change: transform;
}

.hero__orb-1 {
  width: clamp(450px, 70vw, 960px);
  height: clamp(450px, 70vw, 960px);
  bottom: -30%;
  right: -15%;
  background: radial-gradient(circle, rgba(70, 110, 200, 0.13) 0%, rgba(50, 80, 160, 0.06) 45%, transparent 70%);
  animation: orbDrift1 18s ease-in-out infinite;
}

.hero__orb-2 {
  width: clamp(280px, 42vw, 600px);
  height: clamp(280px, 42vw, 600px);
  top: 10%;
  left: -10%;
  background: radial-gradient(circle, rgba(50, 150, 170, 0.10) 0%, rgba(30, 110, 130, 0.04) 50%, transparent 70%);
  animation: orbDrift2 24s ease-in-out infinite;
  animation-delay: -9s;
  filter: blur(90px);
}

.hero__orb-3 {
  width: clamp(220px, 32vw, 480px);
  height: clamp(220px, 32vw, 480px);
  top: -8%;
  left: 30%;
  background: radial-gradient(circle, rgba(110, 80, 180, 0.09) 0%, transparent 65%);
  animation: orbDrift3 30s ease-in-out infinite;
  animation-delay: -15s;
  filter: blur(100px);
}

.hero__orb-4 {
  width: clamp(240px, 36vw, 520px);
  height: clamp(240px, 36vw, 520px);
  bottom: 5%;
  left: 10%;
  background: radial-gradient(circle, rgba(196, 149, 106, 0.08) 0%, rgba(180, 120, 60, 0.03) 50%, transparent 70%);
  animation: orbDrift1 22s ease-in-out infinite;
  animation-delay: -7s;
  filter: blur(80px);
}

@keyframes orbDrift1 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  25%     { transform: translate(-3%,  2%)  scale(1.04); }
  50%     { transform: translate(2%,   4%)  scale(0.97); }
  75%     { transform: translate(4%,  -2%)  scale(1.02); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  33%     { transform: translate(4%,  -3%)  scale(1.06); }
  66%     { transform: translate(-3%,  5%)  scale(0.95); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  40%     { transform: translate(-5%,  3%)  scale(1.08); }
  80%     { transform: translate(3%,  -4%)  scale(0.94); }
}

/* ── Waveform canvas ───────────────────────────────────── */
.hero__waveform {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 50vh;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ── Content ───────────────────────────────────────────── */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin-inline: auto;
  width: 100%;
}

.hero__logomark {
  display: block;
  height: clamp(56px, 8vw, 88px);
  width: auto;
  color: var(--accent);
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 1.1s var(--ease-out) 0.05s forwards;
  filter: drop-shadow(0 0 14px rgba(196, 149, 106, 0.3));
  will-change: opacity, transform;
  transform-origin: center center;
}

.hero__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.9s var(--ease-out) 0.2s forwards;
}

.hero__name {
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 14vw, 11rem);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 3rem;
  display: flex;
  overflow: hidden;
}

.hero__name .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(-2deg);
  animation: letterReveal 0.9s var(--ease-out) forwards;
}

@keyframes letterReveal {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.hero__divider {
  width: clamp(32px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-bottom: 2rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: scaleIn 1s var(--ease-out) 0.75s forwards;
}

.hero__statement {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 1s var(--ease-out) 0.95s forwards;
}

/* ── Scroll indicator ──────────────────────────────────── */
.hero__scroll {
  position: absolute;
  bottom: clamp(28px, 4vw, 52px);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 1.6s forwards;
  z-index: 1;
}

.hero__scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--accent-dim), transparent);
  animation: scrollPulse 3s ease-in-out 2.5s infinite;
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(1); }
  50%       { opacity: 0.8;  transform: scaleY(1.2); }
}