/* typicalmonk — Spatial Scene: two-layer parallax (iOS depth effect) */

.hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #4a6080;
}

/* ── Layer 1: background wrapper ────────────────────────────
   Oversized by 12% so parallax movement never shows edges.
   JS translates this div (no CSS transform conflict).        */
.parallax-bg {
  position: absolute;
  inset: -4%;
  will-change: transform;
}

/* ── Background image: Ken Burns slow zoom ─────────────────
   CSS animates transform here — JS never touches this element. */
.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  animation: kenBurns 26s ease-in-out infinite;
}

@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0%,    0%);   }
  50%  { transform: scale(1.03) translate(-0.3%, -0.2%);}
  100% { transform: scale(1.00) translate(0%,    0%);   }
}

/* ── Layer 2: foreground island wrapper ────────────────────
   JS translates this div at a lower rate than the background
   → island appears CLOSER (moves less = feels in front).     */
.hero-island-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 3;
  will-change: transform;
}

/* ── Island image: float up/down animation ─────────────────
   CSS animates this — JS never touches this element.         */
.hero-island {
  width: clamp(360px, 50vw, 800px);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  animation: islandFloat 5.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes islandFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-26px); }
}

/* ── Vignette overlay ───────────────────────────────────────*/
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* ── Fog at bottom ──────────────────────────────────────────*/
.hero-fog {
  position: absolute;
  bottom: -5%;
  left: -10%;
  width: 120%;
  height: 160px;
  z-index: 4;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,230,185,0.3)  0 10%, transparent 22%),
    radial-gradient(circle at 50% 45%, rgba(255,230,185,0.25) 0 12%, transparent 24%),
    radial-gradient(circle at 80% 50%, rgba(255,230,185,0.2)  0 10%, transparent 22%);
  filter: blur(14px);
  animation: fogMove 20s ease-in-out infinite alternate;
}

@keyframes fogMove {
  from { transform: translate(-20px, 0); }
  to   { transform: translate(20px, -8px); }
}

/* ── Clouds ─────────────────────────────────────────────────*/
.clouds-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cloud {
  position: absolute;
  border-radius: 100px;
  background: rgba(255,255,255,0.44);
  filter: blur(5px);
  will-change: transform;
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud::before { width: 55%; height: 160%; top: -60%; left: 18%; }
.cloud::after  { width: 38%; height: 130%; top: -45%; right: 16%; }

/* Upper sky */
.c1 { width: 220px; height: 52px; top: 10%; opacity: 0.62; animation: cloudDrift   62s linear infinite 0s;   }
.c2 { width: 155px; height: 38px; top: 19%; opacity: 0.40; animation: cloudDrift   84s linear infinite -22s; }
.c3 { width: 185px; height: 46px; top: 6%;  opacity: 0.48; animation: cloudDrift   72s linear infinite -44s; }
.c4 { width: 115px; height: 30px; top: 27%; opacity: 0.32; animation: cloudDrift   98s linear infinite -10s; }
/* Lower — mountain mist / low-hanging clouds */
.c5 { width: 260px; height: 58px; top: 40%; opacity: 0.28; animation: cloudDriftR  90s linear infinite -15s; }
.c6 { width: 180px; height: 44px; top: 54%; opacity: 0.22; animation: cloudDrift  110s linear infinite -38s; }
.c7 { width: 140px; height: 34px; top: 66%; opacity: 0.18; animation: cloudDriftR  78s linear infinite -55s; }

@keyframes cloudDrift {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-40vw); }
}

@keyframes cloudDriftR {
  from { transform: translateX(-40vw); }
  to   { transform: translateX(110vw); }
}

/* ── Birds ──────────────────────────────────────────────────*/
.birds-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.flock {
  position: absolute;
  fill: none;
  stroke: rgba(25,15,5,0.5);
  stroke-width: 1.8;
  stroke-linecap: round;
  overflow: visible;
  will-change: transform;
}

/* Upper sky */
.f1 { width: 140px; top: 14%; animation: birdFlyLR 48s linear infinite 0s; }
.f2 { width: 88px;  top: 23%; animation: birdFlyLR 66s linear infinite -20s; opacity: 0.65; }
.f3 { width: 115px; top: 8%;  animation: birdFlyRL 56s linear infinite -32s; opacity: 0.75; }

/* Lower scene — near hills */
.f4 { width: 120px; top: 55%; animation: birdFlyRL 60s linear infinite -8s;  opacity: 0.65; }
.f5 { width: 95px;  top: 68%; animation: birdFlyLR 72s linear infinite -28s; opacity: 0.55; }
.f6 { width: 80px;  top: 78%; animation: birdFlyRL 82s linear infinite -50s; opacity: 0.40; }

@keyframes birdFlyLR {
  0%   { transform: translateX(108vw) translateY(0px);   }
  30%  { transform: translateX(65vw)  translateY(-18px); }
  65%  { transform: translateX(22vw)  translateY(8px);   }
  100% { transform: translateX(-35vw) translateY(-6px);  }
}

@keyframes birdFlyRL {
  0%   { transform: translateX(-35vw) translateY(0px);   }
  30%  { transform: translateX(20vw)  translateY(12px);  }
  65%  { transform: translateX(60vw)  translateY(-8px);  }
  100% { transform: translateX(108vw) translateY(4px);   }
}

/* ── Floating particles (fireflies / light motes) ───────────*/
.particles-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.p {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,210,90,0.75);
  will-change: transform, opacity;
}

.p1  { left: 12%; bottom: 18%; animation: particleFloat 9s  ease-in-out infinite 0s;   }
.p2  { left: 28%; bottom: 12%; animation: particleFloat 12s ease-in-out infinite -3s;  }
.p3  { left: 45%; bottom: 22%; animation: particleFloat 8s  ease-in-out infinite -5s;  }
.p4  { left: 60%; bottom: 15%; animation: particleFloat 11s ease-in-out infinite -1s;  }
.p5  { left: 74%; bottom: 28%; animation: particleFloat 10s ease-in-out infinite -7s;  }
.p6  { left: 85%; bottom: 10%; animation: particleFloat 13s ease-in-out infinite -4s;  }
.p7  { left: 38%; bottom: 32%; animation: particleFloat 7s  ease-in-out infinite -9s;  }

@keyframes particleFloat {
  0%   { transform: translateY(0)     translateX(0);    opacity: 0;   }
  15%  { opacity: 0.9; }
  50%  { transform: translateY(-28px) translateX(10px); opacity: 0.6; }
  85%  { opacity: 0.2; }
  100% { transform: translateY(-55px) translateX(-8px); opacity: 0;   }
}

/* ── Reduced motion ─────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .hero-scene,
  .hero-island,
  .hero-fog,
  .cloud,
  .flock,
  .p {
    animation: none !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .hero-island { width: 90vw; }
}