/* ==========================================
   HERO BANNER (EWO)
========================================== */

/* 1) The full-bleed banner container */
#hero-banner.hero-ewo {
  --moon-x: 50%;

  position: relative;
  height: 420px;
  width: 100%;

  overflow: hidden;
  overflow-x: clip;
  overflow-y: hidden;

  background-image: url("../images/banner/banner-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: none;

  contain: paint;
  clip-path: inset(0);
  transform: translateZ(0);
}

/* ==========================================
   Prevent animated background-size scrollbar issues
========================================== */

@supports (overflow: clip) {
  #hero-banner.hero-ewo {
    overflow: clip;
    overflow-clip-margin: 20px;
  }
}

@supports not (overflow: clip) {
  #hero-banner.hero-ewo {
    overflow-x: hidden;
  }
}

/* Extra safety on the foreground pseudo-element */
#hero-banner.hero-ewo::after {
  clip-path: inset(0);
}

/* slow breathing zoom */
@keyframes slowZoom {
  from { background-size: 100%; }
  to   { background-size: 120%; }
}

/* 2) The clouds-over-moon veil */
#hero-banner.hero-ewo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(10, 18, 45, 0.45),
    rgba(4, 6, 25, 0.75)
  );
  z-index: 3;
  animation: veilFade 12s ease-in-out infinite alternate;
}

@keyframes veilFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 3) The centered content layer */
#hero-banner.hero-ewo .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: clip;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  padding: 0 1rem;
}

/* 4) Rising title */
#hero-banner.hero-ewo h1.ewo-logo{
  opacity: 0;
  filter: brightness(0.35) saturate(0.85);
  transform: translateY(220px);
  max-width: 100%;
  overflow-wrap: break-word;

  animation:
    ewoRiseGlow 12s linear forwards,
    letterHalo 12s ease-in-out infinite alternate;

  animation-delay:
    0s,
    12s;

  will-change: transform, opacity, filter, text-shadow;
}

@keyframes ewoRiseGlow{
  from{
    opacity: 0;
    filter: brightness(0.35) saturate(0.85);
    transform: translateY(220px);
  }
  to{
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateY(0);
  }
}

@keyframes letterHalo {
  0% {
    text-shadow:
      0 0 6px rgba(180, 215, 255, 0.85),
      0 0 16px rgba(150, 200, 255, 0.55),
      0 0 32px rgba(120, 180, 255, 0.35),
      0 0 60px rgba(90, 160, 255, 0.18);
  }
  50% {
    text-shadow:
      0 0 8px rgba(230, 235, 255, 0.95),
      0 0 22px rgba(200, 215, 255, 0.65),
      0 0 44px rgba(170, 200, 255, 0.40),
      0 0 80px rgba(140, 180, 255, 0.22);
  }
  100% {
    text-shadow:
      0 0 10px rgba(255, 220, 170, 1),
      0 0 26px rgba(255, 200, 120, 0.75),
      0 0 52px rgba(255, 180, 90, 0.45),
      0 0 90px rgba(255, 160, 60, 0.25);
  }
}

/* ==========================================
   RISING MOON   <div class="moon"></div>
========================================== */

#hero-banner.hero-ewo .moon{
  position: absolute;
  left: var(--moon-x);
  bottom: calc(-24vh - 70px);

  width: min(24vh, 180px);
  height: min(24vh, 180px);
  pointer-events: none;
  z-index: 0;

  offset-path: path("M 0 0 Q 120 -300 220 -585");
  offset-rotate: 0deg;
  offset-distance: -12%;
  opacity: 0;

  animation:
    moonArc 14s ease-out forwards,
    moonDrift 60s ease-in-out infinite alternate;

  animation-delay:
    12s,
    26s;

  animation-fill-mode: both, both;
}

/* HALOS (both rings) */
#hero-banner.hero-ewo .moon::before{
  content:"";
  position:absolute;
  inset:-80px;
  border-radius:50%;
  pointer-events:none;

  background:
    radial-gradient(circle,
      transparent 0%,
      transparent 50%,
      rgba(220,235,255,0.70) 53%,
      rgba(180,210,255,0.38) 58%,
      rgba(140,190,255,0.0) 64%
    ),
    radial-gradient(circle,
      transparent 0%,
      transparent 88%,
      rgba(220,235,255,0.30) 92%,
      rgba(180,210,255,0.18) 96%,
      rgba(140,190,255,0.0) 100%
    );

  filter: blur(6px);
  opacity: 0;
  animation: haloFadeIn 10s ease-in-out forwards;
  animation-delay: 22s;
  animation-fill-mode: both;
}

@keyframes haloFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* MOON IMAGE */
#hero-banner.hero-ewo .moon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;

  background: url("../images/banner/moon.png") center / contain no-repeat;

  -webkit-mask-image: radial-gradient(circle, black 92%, transparent 100%);
          mask-image: radial-gradient(circle, black 92%, transparent 100%);

  filter: blur(0.3px) brightness(1.05);
}

/* Rise along the arc with a gentle reveal */
@keyframes moonArc{
  0%{
    opacity: 0;
    offset-distance: -12%;
  }
  12%{
    opacity: 0;
    offset-distance: 0%;
  }
  22%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    offset-distance: 100%;
  }
}

/* Subtle drift after it settles */
@keyframes moonDrift{
  from{ transform: translateX(0); }
  to  { transform: translateX(12px); }
}

/* FOREGROUND onion */
#hero-banner.hero-ewo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  background-image: url("../images/banner/banner-ewo-double-topset-clusters.png");
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;

  clip-path: inset(0);

  transform-origin: center;
  transform: scale(1);
  will-change: transform;
  animation: onionBreath 40s ease-in-out infinite alternate;
}

/* old feel preserved via transform ratio */
@keyframes onionBreath{
  from { transform: scale(1); }
  to   { transform: scale(1.0909); }
}

/* HARD CLAMP: banner must never become a scroll container */
#hero-banner.hero-ewo{
  overflow: hidden;
  overflow-x: clip;
  overflow-y: hidden;
}

@supports (overflow: clip){
  #hero-banner.hero-ewo{
    overflow: clip;
    overflow-clip-margin: 20px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #hero-banner.hero-ewo::before,
  #hero-banner.hero-ewo::after,
  #hero-banner.hero-ewo h1.ewo-logo,
  #hero-banner.hero-ewo .moon,
  #hero-banner.hero-ewo .moon::before{
    animation: none;
  }

  #hero-banner.hero-ewo h1.ewo-logo{
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateY(0);
  }

  #hero-banner.hero-ewo .moon{
    opacity: 1;
    offset-distance: 100%;
  }

  #hero-banner.hero-ewo .moon::before{
    opacity: 1;
  }
}

/* ==========================================
   LARGER SCREENS
========================================== */

@media (min-width: 640px){
  #hero-banner.hero-ewo {
    height: 500px;
  }

  #hero-banner.hero-ewo h1.ewo-logo{
    transform: translateY(320px);
  }

  @keyframes ewoRiseGlow{
    from{
      opacity: 0;
      filter: brightness(0.35) saturate(0.85);
      transform: translateY(320px);
    }
    to{
      opacity: 1;
      filter: brightness(1) saturate(1);
      transform: translateY(0);
    }
  }

  #hero-banner.hero-ewo .moon{
    bottom: calc(-28vh - 90px);
    width: min(26vh, 220px);
    height: min(26vh, 220px);
  }

  #hero-banner.hero-ewo .moon::before{
    inset: -100px;
  }
}

@media (min-width: 900px){
  #hero-banner.hero-ewo {
    height: 600px;
    background-size: 100%;
  }

  #hero-banner.hero-ewo h1.ewo-logo{
    transform: translateY(500px);
  }

  @keyframes ewoRiseGlow{
    from{
      opacity: 0;
      filter: brightness(0.35) saturate(0.85);
      transform: translateY(500px);
    }
    to{
      opacity: 1;
      filter: brightness(1) saturate(1);
      transform: translateY(0);
    }
  }

  #hero-banner.hero-ewo .moon{
    bottom: calc(-30vh - 100px);
    width: min(28vh, 260px);
    height: min(28vh, 260px);
  }

  #hero-banner.hero-ewo .moon::before{
    inset: -120px;
  }

  #hero-banner.hero-ewo::after{
    background-size: 100%;
  }
}