/* ============================================================
   Wunderlust — hero illustration
   A layered vector landscape standing in for the mood board:
   sky wash, haze, far hills, treeline, meadow, blossom row.
   Vector rather than photography: a few KB, crisp on Retina,
   and it never reads as stock imagery.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-art svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: max(1440px, 100%);
  height: 100%;
  display: block;
}

/* Sky is a CSS gradient rather than SVG so dusk mode can retint
   it from tokens alone. */
.hero-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 6%, rgba(255,255,255,.55), transparent 58%),
    linear-gradient(176deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--cloud) 100%);
}

:root[data-mode="dark"] .hero-sky {
  background:
    radial-gradient(60% 40% at 80% 12%, rgba(214,228,255,.28), transparent 62%),
    linear-gradient(176deg, #0F1A30 0%, var(--sky-1) 46%, var(--sky-2) 100%);
}

/* Parallax: app.js writes --par (0 to 1) on scroll. Each layer
   multiplies it differently, so the far hills barely move while
   the blossoms slide. Guarded by prefers-reduced-motion below. */
.layer-haze     { transform: translate3d(0, calc(var(--par, 0) * -6px),  0); }
.layer-hills    { transform: translate3d(0, calc(var(--par, 0) * -14px), 0); }
.layer-trees    { transform: translate3d(0, calc(var(--par, 0) * -26px), 0); }
.layer-meadow   { transform: translate3d(0, calc(var(--par, 0) * -38px), 0); }
.layer-blossoms { transform: translate3d(0, calc(var(--par, 0) *  22px), 0); }

@media (prefers-reduced-motion: reduce) {
  .layer-haze, .layer-hills, .layer-trees,
  .layer-meadow, .layer-blossoms { transform: none; }
}

/* Soft-focus foreground, mirroring the shallow depth of field in
   the reference image. */
.layer-blossoms { filter: blur(.4px); }

/* The veil only needs to protect the bottom edge, where the meadow
   meets the page background. Ramping it from 46% — as it did first —
   washed the whole landscape to pastel and threw away the saturation
   the mood board is built on. Headline copy sits over the upper sky,
   which is already light enough for dark ink, so the top stays clear. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251,248,243,.00) 0%,
    rgba(251,248,243,.00) 62%,
    rgba(251,248,243,.30) 82%,
    rgba(251,248,243,.82) 94%,
    var(--bg) 100%
  );
}

:root[data-mode="dark"] .hero-veil {
  background: linear-gradient(
    to bottom,
    rgba(16,22,26,.00) 0%,
    rgba(16,22,26,.10) 58%,
    rgba(16,22,26,.46) 80%,
    rgba(16,22,26,.86) 93%,
    var(--bg) 100%
  );
}

/* A drifting cloud band, slow enough to notice only if you look. */
.cloud-drift {
  position: absolute;
  top: 8%;
  left: -20%;
  width: 140%;
  height: 34%;
  z-index: 0;
  opacity: .5;
  background:
    radial-gradient(38% 52% at 18% 52%, var(--cloud), transparent 70%),
    radial-gradient(30% 44% at 44% 40%, var(--cloud), transparent 70%),
    radial-gradient(34% 48% at 72% 56%, var(--cloud), transparent 70%);
  animation: drift 90s linear infinite;
}

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(14%); }
}

/* --- Motes: gentle rising pollen, the hero's one nod to "alive" --- */
/* Same spirit as crabby's rising bubbles, dialled to Apple restraint:
   soft pollen drifting up through the meadow air. Warm butter tone —
   a white glow vanishes on the light-blue sky, but pollen reads on it
   and fits the meadow theme. Sized/timed unevenly so none feel synced,
   delays kept tight so several are always mid-flight. */
.motes { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
/* Soft bokeh orbs, not hard dots. A blurred translucent glow reads as
   drifting light on the pale sky AND the green meadow — a small crisp
   dot vanishes on both. Larger + blurred + low opacity is what makes
   ambient motion legible on a light hero. */
.motes i {
  position: absolute; bottom: -6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,248,225,.5) 40%, transparent 72%);
  filter: blur(1px); opacity: 0;
  animation: wl-mote-rise ease-in-out infinite;
}
.motes i:nth-child(1) { left: 8%;  width: 22px; height: 22px; animation-duration: 17s; animation-delay: 0s; }
.motes i:nth-child(2) { left: 22%; width: 14px; height: 14px; animation-duration: 21s; animation-delay: 2s; }
.motes i:nth-child(3) { left: 38%; width: 28px; height: 28px; animation-duration: 19s; animation-delay: 5s; }
.motes i:nth-child(4) { left: 54%; width: 16px; height: 16px; animation-duration: 23s; animation-delay: 1s; }
.motes i:nth-child(5) { left: 68%; width: 13px; height: 13px; animation-duration: 18s; animation-delay: 7s; }
.motes i:nth-child(6) { left: 82%; width: 24px; height: 24px; animation-duration: 22s; animation-delay: 3s; }
.motes i:nth-child(7) { left: 93%; width: 17px; height: 17px; animation-duration: 20s; animation-delay: 9s; }

/* Drifts up through the full hero; peaks in the mid-band where it
   crosses both sky and meadow, fades before the top edge. */
@keyframes wl-mote-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  18%  { opacity: .7; }
  55%  { transform: translateY(-34vh) translateX(14px); opacity: .6; }
  88%  { opacity: .4; }
  100% { transform: translateY(-52vh) translateX(-8px); opacity: 0; }
}

:root[data-mode="dark"] .motes i {
  background: radial-gradient(circle, rgba(255,224,158,.9), rgba(255,220,150,.4) 40%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .motes { display: none; }
}