/* seasonal-hero.css — seasonal scene layers (CSS-first) */

.home-portal .hero {
  position: relative;
  z-index: 5;
  overflow: visible;
  isolation: auto;
}

.home-portal .hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: layout style paint;
  transform: translate3d(var(--hero-px, 0), var(--hero-py, 0), 0);
}

.home-portal .hero-scene .hero-glow {
  position: absolute;
  inset: -120px -160px auto -160px;
  height: 520px;
  z-index: 0;
}

.home-portal .hero-inner.hero-content,
.home-portal .hero-inner {
  position: relative;
  z-index: 2;
}

.home-portal .scene-backdrop,
.home-portal .scene-props,
.home-portal .scene-characters,
.home-portal .scene-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-portal .scene-props,
.home-portal .scene-characters {
  /* Keep logo / search / title readable — fade props in the content band */
  -webkit-mask-image: radial-gradient(
    ellipse 58% 48% at 50% 44%,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 38%,
    #000 72%
  );
  mask-image: radial-gradient(
    ellipse 58% 48% at 50% 44%,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 38%,
    #000 72%
  );
}

.home-portal .scene-backdrop { z-index: 1; }
.home-portal .scene-props { z-index: 2; }
.home-portal .scene-characters { z-index: 3; }
.home-portal .scene-particles { z-index: 4; overflow: hidden; }

/* ── Default / ambient only ── */
.hero-scene[data-season="default"] .scene-backdrop,
.hero-scene:not([data-season]) .scene-backdrop {
  opacity: 0;
}

/* ── Winter — layered wonderland ── */
.hero-scene[data-season="winter"] .scene-backdrop {
  background:
    radial-gradient(ellipse 60% 40% at 75% 8%, rgba(180, 210, 255, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(8, 18, 48, 0.28) 0%, transparent 55%);
}

.hero-scene[data-season="winter"] .scene-backdrop::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40px;
  height: 200px;
  background:
    radial-gradient(ellipse 55% 80% at 18% 100%, rgba(255, 255, 255, 0.62), transparent 58%),
    radial-gradient(ellipse 45% 70% at 52% 100%, rgba(220, 235, 255, 0.52), transparent 55%),
    radial-gradient(ellipse 40% 65% at 82% 100%, rgba(255, 255, 255, 0.48), transparent 52%);
  filter: blur(2px);
}

.hero-scene[data-season="winter"] .scene-backdrop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(230, 240, 255, 0.12));
  pointer-events: none;
}

.hero-scene[data-season="winter"] .scene-props::before {
  content: '🌲';
  position: absolute;
  left: 8%;
  bottom: 18%;
  font-size: 2rem;
  opacity: 0.35;
  animation: qmSeasonBob 5s ease-in-out infinite alternate;
}

.hero-scene[data-season="winter"] .scene-props::after {
  content: '🏠';
  position: absolute;
  right: 10%;
  bottom: 22%;
  font-size: 1.4rem;
  opacity: 0.28;
  animation: qmSeasonBob 6.5s ease-in-out infinite alternate-reverse;
}

.hero-scene[data-season="winter"] .scene-characters::before {
  content: '';
  position: absolute;
  right: 16%;
  bottom: 24%;
  width: 36px;
  height: 44px;
  background:
    radial-gradient(circle at 50% 18%, #fff 0%, #fff 28%, transparent 30%),
    radial-gradient(ellipse 80% 55% at 50% 72%, #fff 0%, #eef4ff 100%);
  border-radius: 50% 50% 45% 45%;
  opacity: 0.72;
  filter: drop-shadow(0 6px 14px rgba(100, 160, 255, 0.2));
  box-shadow: inset -6px 0 0 rgba(200, 60, 60, 0.45);
  animation: qmSeasonBob 4.5s ease-in-out infinite alternate;
}

/* ── Christmas ── */
.hero-scene[data-season="christmas"] .scene-backdrop {
  background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(34, 197, 94, 0.08), transparent 62%);
}

.hero-scene[data-season="christmas"] .scene-props::before {
  content: '🎄';
  position: absolute;
  left: 12%;
  bottom: 16%;
  font-size: 2.6rem;
  opacity: 0.38;
  animation: qmSeasonBob 5.5s ease-in-out infinite alternate;
}

.hero-scene[data-season="christmas"] .scene-props::after {
  content: '🎁';
  position: absolute;
  right: 14%;
  bottom: 20%;
  font-size: 1.8rem;
  opacity: 0.36;
  animation: qmSeasonBob 4.8s ease-in-out infinite alternate-reverse;
}

.hero-scene[data-season="christmas"] .scene-characters::before {
  content: '🎅';
  position: absolute;
  right: 22%;
  bottom: 26%;
  font-size: 2rem;
  opacity: 0.34;
  animation: qmSeasonBob 6s ease-in-out infinite alternate;
}

.hero-scene[data-season="christmas"] .scene-characters::after {
  content: '✨';
  position: absolute;
  left: 28%;
  top: 28%;
  font-size: 1.2rem;
  opacity: 0.5;
  animation: qmSeasonSparkle 3s ease-in-out infinite alternate;
}

/* ── New Year ── */
.hero-scene[data-season="new-year"] .scene-backdrop {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1), transparent 35%),
    radial-gradient(circle at 78% 24%, rgba(255, 77, 109, 0.08), transparent 32%);
}

.hero-scene[data-season="new-year"] .scene-props::before {
  content: '🧧';
  position: absolute;
  left: 10%;
  bottom: 22%;
  font-size: 2rem;
  opacity: 0.42;
  animation: qmSeasonSwing 4.5s ease-in-out infinite alternate;
}

.hero-scene[data-season="new-year"] .scene-props::after {
  content: '🎆';
  position: absolute;
  right: 16%;
  top: 18%;
  font-size: 1.6rem;
  opacity: 0.35;
  animation: qmSeasonSparkle 2.8s ease-in-out infinite alternate;
}

.hero-scene[data-season="new-year"] .scene-characters::before {
  content: '🎊';
  position: absolute;
  right: 24%;
  bottom: 24%;
  font-size: 2.2rem;
  opacity: 0.38;
  animation: qmSeasonBob 5s ease-in-out infinite alternate;
}

.hero-scene[data-season="new-year"] .scene-characters::after {
  content: '⭐';
  position: absolute;
  left: 32%;
  top: 32%;
  font-size: 1.3rem;
  opacity: 0.45;
  animation: qmSeasonSparkle 3.2s ease-in-out infinite alternate-reverse;
}

/* ── Mid-Autumn — warm navy + flat golden moon ── */
.hero-scene[data-season="mid-autumn"] .scene-backdrop {
  background:
    radial-gradient(ellipse 70% 48% at 72% 12%, rgba(255, 210, 120, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(12, 22, 58, 0.38) 0%, rgba(18, 28, 72, 0.14) 40%, transparent 74%);
}

.hero-scene[data-season="mid-autumn"] .scene-backdrop::before {
  content: '';
  position: absolute;
  top: 7%;
  left: 74%;
  transform: translateX(-50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.42) 0%, transparent 24%),
    radial-gradient(circle at 58% 62%, rgba(200, 160, 80, 0.1) 0%, transparent 20%),
    radial-gradient(circle, #fff2bf 0%, #ffe7a3 78%, #f5d78a 100%);
  box-shadow:
    0 0 36px rgba(255, 210, 120, 0.28),
    0 0 72px rgba(255, 190, 90, 0.14);
  animation: qmMoonGlow 8s ease-in-out infinite alternate;
}

.hero-scene[data-season="mid-autumn"] .scene-backdrop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 55%;
  width: 42%;
  height: 42%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(255, 220, 150, 0.1), transparent 68%),
    radial-gradient(ellipse 50% 40% at 30% 60%, rgba(255, 200, 120, 0.06), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* Mid-autumn props: lanterns/clouds via scene-extras JS — hide emoji clutter */
.hero-scene[data-season="mid-autumn"] .scene-props::before,
.hero-scene[data-season="mid-autumn"] .scene-props::after,
.hero-scene[data-season="mid-autumn"] .scene-characters::before,
.hero-scene[data-season="mid-autumn"] .scene-characters::after {
  display: none;
}

/* Mid-autumn — light mode: +12% clarity + warmer glow */
[data-theme="light"] .hero-scene[data-season="mid-autumn"] .scene-backdrop::before {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 24%),
    radial-gradient(circle, #fff6d4 0%, #ffe7a3 80%, #f0cc70 100%);
  box-shadow:
    0 0 40px rgba(255, 200, 90, 0.3),
    0 0 80px rgba(255, 180, 70, 0.15);
}

[data-theme="dark"] .hero-scene[data-season="mid-autumn"] .scene-backdrop::before {
  box-shadow:
    0 0 40px rgba(255, 210, 120, 0.26),
    0 0 80px rgba(255, 180, 80, 0.1);
}

/* ── Sakura (preview / spring) ── */
.hero-scene[data-season="sakura"] .scene-backdrop {
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(255, 180, 200, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(40, 20, 50, 0.12) 0%, transparent 60%);
}

.hero-scene[data-season="sakura"] .scene-props::before {
  content: '🌸';
  position: absolute;
  left: 12%;
  bottom: 22%;
  font-size: 1.6rem;
  opacity: 0.38;
  animation: qmSeasonBob 5s ease-in-out infinite alternate;
}

.hero-scene[data-season="sakura"] .scene-characters::before {
  content: '🌸';
  position: absolute;
  right: 18%;
  top: 24%;
  font-size: 1.4rem;
  opacity: 0.32;
  animation: qmSeasonSwing 6s ease-in-out infinite alternate-reverse;
}

/* ── Scene extras (JS-managed, single container) ── */
.home-portal .scene-extras {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.scene-extra--lantern {
  position: absolute;
  left: var(--l-left);
  bottom: var(--l-bottom);
  width: calc(24px * var(--l-scale, 1));
  height: calc(34px * var(--l-scale, 1));
  color: #e83828;
  opacity: var(--l-opacity, 0.5);
  transform-origin: top center;
  animation: qmLanternFloat var(--l-duration, 6s) ease-in-out infinite alternate;
  animation-delay: var(--l-delay, 0s);
  filter: drop-shadow(0 3px 10px rgba(255, 110, 40, 0.22));
}

.scene-extra--lantern svg {
  display: block;
  width: 100%;
  height: 100%;
}

.scene-extra--lantern-bg {
  filter: blur(0.4px) drop-shadow(0 2px 6px rgba(255, 100, 30, 0.12));
  z-index: 0;
}

.scene-extra--lantern-fg {
  z-index: 2;
}

.scene-extra--cloud {
  position: absolute;
  left: var(--c-left);
  top: var(--c-top);
  width: var(--c-w, 140px);
  height: calc(var(--c-w, 140px) * 0.35);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 225, 170, 0.09), transparent 72%);
  filter: blur(10px);
  animation: qmCloudDrift 28s ease-in-out infinite alternate;
  animation-delay: var(--c-delay, 0s);
}

.scene-extra--rabbit {
  position: absolute;
  right: 20%;
  bottom: 26%;
  width: 42px;
  height: 32px;
  opacity: 0.1;
  background:
    radial-gradient(ellipse 35% 45% at 28% 22%, rgba(255, 240, 220, 0.9), transparent),
    radial-gradient(ellipse 35% 45% at 72% 22%, rgba(255, 240, 220, 0.9), transparent),
    radial-gradient(ellipse 55% 65% at 50% 68%, rgba(255, 240, 220, 0.85), transparent);
  filter: blur(0.3px);
  animation: qmSeasonBob 7s ease-in-out infinite alternate;
}

@keyframes qmLanternFloat {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-5px) rotate(2deg); }
}

.scene-extra--firefly {
  position: absolute;
  left: var(--f-left);
  top: var(--f-top);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 220, 120, 0.9);
  box-shadow: 0 0 8px rgba(255, 200, 80, 0.8);
  opacity: 0;
  animation: qmFirefly 4s ease-in-out infinite;
  animation-delay: var(--f-delay, 0s);
}

.scene-extra--pine {
  position: absolute;
  left: var(--t-left);
  bottom: 14%;
  width: calc(48px * var(--t-scale, 1));
  height: calc(64px * var(--t-scale, 1));
  opacity: 0.18;
  background:
    conic-gradient(from 180deg at 50% 100%, transparent 0deg, rgba(30, 60, 40, 0.9) 60deg, transparent 120deg),
    conic-gradient(from 180deg at 50% 85%, transparent 0deg, rgba(25, 55, 35, 0.85) 70deg, transparent 140deg),
    conic-gradient(from 180deg at 50% 70%, transparent 0deg, rgba(20, 50, 30, 0.8) 80deg, transparent 160deg);
  filter: blur(0.5px);
}

@keyframes qmFirefly {
  0%, 100% { opacity: 0; transform: translateY(0); }
  45% { opacity: 0.85; transform: translateY(-4px); }
  55% { opacity: 0.65; transform: translateY(-2px); }
}

/* ── Particles ── */
.scene-particle {
  position: absolute;
  top: -12px;
  left: var(--p-left);
  width: var(--p-size);
  height: var(--p-size);
  border-radius: 999px;
  opacity: var(--p-opacity, 0.75);
  animation: qmParticleFall var(--p-duration) linear infinite;
  animation-delay: var(--p-delay);
  will-change: transform, opacity;
}

.scene-particle--star {
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.scene-particle--star::before {
  content: '✦';
  font-size: var(--p-size);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

.scene-particle--crystal {
  border-radius: 2px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 4px rgba(200, 230, 255, 0.5);
}

.scene-particle--petal {
  border-radius: 50% 0 50% 50%;
  background: rgba(255, 170, 190, 0.75);
  box-shadow: none;
  transform: rotate(25deg);
}

.scene-particle--snow {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.scene-particle--confetti {
  border-radius: 2px;
  background: hsl(calc(var(--p-delay) * 40), 80%, 62%);
}

.scene-particle--spark {
  background: rgba(255, 220, 120, 0.8);
  box-shadow: 0 0 8px rgba(255, 200, 80, 0.45);
}

[data-theme="dark"] .scene-particle--snow {
  background: rgba(230, 240, 255, 0.75);
}

@keyframes qmSeasonBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

@keyframes qmSeasonSwing {
  0% { transform: rotate(-4deg) translateY(0); }
  100% { transform: rotate(4deg) translateY(-4px); }
}

@keyframes qmSeasonSparkle {
  0% { opacity: 0.25; transform: scale(0.92); }
  100% { opacity: 0.65; transform: scale(1.08); }
}

@keyframes qmMoonGlow {
  0% { opacity: 0.92; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.02); }
}

@keyframes qmCloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}

@keyframes qmParticleFall {
  0% {
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  100% {
    transform: translate3d(var(--p-drift), 420px, 0);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .home-portal .hero-scene .hero-glow {
    inset: -90px -120px auto -120px;
    height: 420px;
  }

  .home-portal .scene-props,
  .home-portal .scene-characters {
    -webkit-mask-image: radial-gradient(
      ellipse 62% 52% at 50% 42%,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 42%,
      #000 78%
    );
    mask-image: radial-gradient(
      ellipse 62% 52% at 50% 42%,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 42%,
      #000 78%
    );
  }

  .hero-scene[data-season="mid-autumn"] .scene-backdrop::before {
    width: 84px;
    height: 84px;
    left: 76%;
    top: 5%;
  }

  .hero-scene[data-season] .scene-props::before,
  .hero-scene[data-season] .scene-props::after,
  .hero-scene[data-season] .scene-characters::before,
  .hero-scene[data-season] .scene-characters::after {
    transform: scale(0.72);
  }

  /* Fewer props on small screens */
  .hero-scene[data-season="mid-autumn"] .scene-characters::after,
  .hero-scene[data-season="christmas"] .scene-characters::after,
  .hero-scene[data-season="new-year"] .scene-characters::after {
    display: none;
  }

  .hero-scene[data-season="winter"] .scene-props::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-portal .hero-scene {
    transform: none !important;
  }

  .hero-scene[data-season] .scene-props::before,
  .hero-scene[data-season] .scene-props::after,
  .hero-scene[data-season] .scene-characters::before,
  .hero-scene[data-season] .scene-characters::after,
  .hero-scene[data-season="mid-autumn"] .scene-backdrop::before {
    animation: none !important;
  }

  .scene-particle {
    display: none !important;
  }
}