/* ============================================================
   HERO — White Vibrant Theme  (replaces dark cinematic version)
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #fffdf8 0%, #fff6e4 50%, #ffedc8 100%);
}

/* Warm ambient radial glow behind photography */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(245, 166, 35, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(212, 134, 10, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 2;
}

/* Floating geometric accent rings */
.hero::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.12) 0%, transparent 70%);
  animation: pulseRing 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Light sunray overlay (subtle, warm) */
.hero .sunrays {
  position: absolute;
  inset: -20%;
  z-index: 3;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background: conic-gradient(
    from 200deg at 65% 25%,
    transparent 0deg,
    rgba(245, 166, 35, 0.4) 8deg,
    transparent 20deg,
    transparent 40deg,
    rgba(212, 134, 10, 0.25) 48deg,
    transparent 60deg,
    transparent 200deg,
    rgba(245, 166, 35, 0.3) 210deg,
    transparent 225deg
  );
  animation: rayDrift 50s linear infinite;
  pointer-events: none;
}

@keyframes rayDrift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Photography layers — brighter, more vivid on white bg */
.hero-photo-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 0;
}

.hero-photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
  transform: scale(1.12);
  filter: saturate(1.15) brightness(0.88) contrast(1.05);
}

#heroPhotoA { opacity: 1; z-index: 1; }
#heroPhotoB { opacity: 0; z-index: 2; transform: scale(1.28); }

/* White-friendly overlay — lighter vignette, warm tones */
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(255, 245, 220, 0.45) 100%),
    linear-gradient(180deg,
      rgba(255, 252, 240, 0.55) 0%,
      rgba(255, 248, 228, 0.15) 35%,
      rgba(255, 240, 195, 0.82) 100%
    ),
    linear-gradient(120deg, rgba(255, 220, 120, 0.18), rgba(255, 248, 220, 0) 55%);
  pointer-events: none;
}

/* Particles (white bg) */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.hero-particle {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-particle.leaf {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #72b54a, #3e7022);
  border-radius: 0 60% 0 60%;
  filter: blur(0.2px);
}

.hero-particle.dust {
  width: 5px;
  height: 5px;
  background: var(--color-gold-bright);
  border-radius: 50%;
  filter: blur(0.5px);
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.7);
}

.hero-particle.kernel-bit {
  width: 10px;
  height: 7px;
  background: var(--gradient-gold);
  border-radius: 50% 50% 50% 0;
}

/* ===== Hero Content ===== */
.hero-content {
  position: relative;
  z-index: 6;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding-bottom: 8vh;
  pointer-events: none;
}

.hero-content .eyebrow {
  opacity: 0;
  transform: translateY(20px);
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(212, 134, 10, 0.45);
  color: var(--color-gold-deep);
  backdrop-filter: blur(8px);
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 24px rgba(90, 40, 0, 0.35);
  margin: 12px 0 18px;
  opacity: 0;
  transform: translateY(40px);
}

.hero-title .accent {
  display: block;
}

.hero-subtitle {
  font-size: var(--fs-sub);
  color: rgba(255, 248, 220, 0.92);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(90, 40, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
}

.hero-subtitle .dot {
  color: var(--color-gold-bright);
  margin: 0 12px;
}

.hero-cta {
  margin-top: 34px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: auto;
}

/* ===== Scroll cue ===== */
.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 240, 200, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.scroll-cue .mouse-icon {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(245, 166, 35, 0.75);
  border-radius: 12px;
  position: relative;
}

.scroll-cue .mouse-icon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-gold-bright);
  animation: scrollDot 1.6s ease-in-out infinite;
}

@keyframes scrollDot {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .hero { min-height: 620px; }
  .hero-content { padding-bottom: 6vh; }
  .hero-cta { gap: 12px; }
}