/* ─── Hero container ──────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: clamp(340px, 72vw, 680px);
  overflow: hidden;
  background: #000000;  /* pure black — no blue bleed */
  display: block;
  cursor: default;
}

/* ─── Base cinematic image ───────────────────────────── */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  user-select: none;
  transform: translate(0px, 0px) scale(1.04);
  will-change: transform;
  transition: transform 100ms linear;
  /* Black & white cinematic treatment */
  filter: grayscale(100%) contrast(1.15) brightness(0.85);
}

/* ─── Cloud drift layer ──────────────────────────────── */
.hero__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero__cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  /* Neutral gray — no blue */
  background: rgba(200, 200, 200, 0.015);
}

.hero__cloud--1 {
  width: 60%;
  height: 35%;
  top: 3%;
  left: -5%;
  animation: cloudDrift1 32s ease-in-out infinite alternate;
}

.hero__cloud--2 {
  width: 45%;
  height: 28%;
  top: 6%;
  right: -3%;
  animation: cloudDrift2 42s ease-in-out infinite alternate;
}

@keyframes cloudDrift1 {
  from { transform: translateX(0px);   opacity: 0.7; }
  to   { transform: translateX(32px);  opacity: 1;   }
}

@keyframes cloudDrift2 {
  from { transform: translateX(0px);   opacity: 0.5; }
  to   { transform: translateX(-26px); opacity: 0.9; }
}

/* ─── Wind canvas — grass/flower silhouettes ─────────── */
.hero__wind {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ─── Particle canvas ────────────────────────────────── */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* ─── Bottom fade to pure black (no blue bleed) ──────── */
.hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.88) 75%,
    #000000 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* ─── Letterbox bars — pure black ───────────────────── */
.hero__bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 6;
  background: #000000;
  height: clamp(10px, 1.6vh, 14px);
}

.hero__bar--top    { top: 0; }
.hero__bar--bottom { bottom: 0; }

/* ─── Mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero {
    height: clamp(280px, 100vw, 440px);
  }

  .hero__img {
    object-position: 60% 40%;
  }

  .hero__cloud--2 { display: none; }
}

@media (max-width: 380px) {
  .hero { height: 280px; }
}

/* ─── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__cloud,
  .hero__cloud--1,
  .hero__cloud--2 {
    animation: none;
  }

  .hero__img {
    transform: none !important;
    transition: none;
  }
}