/* ═══════════════════════════════════════════════════════════════════════
   Memorial Atmosphere  ·  public marketing pages only
   Applied to two zones: (1) .hero / .page-hero   (2) .atm-cta section
   Activated by body.has-atmosphere — never on dashboard/booking/auth.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero — isolated stacking context ────────────────────────────────
   Creates a clean z-index container so cloud layer, butterflies, and
   the hill never bleed out into the rest of the document.               */
body.has-atmosphere .hero {
  isolation: isolate;

  /* Cloud shimmer blobs baked into the base gradient.
     These are the "depth" layer — barely visible brightening in the
     upper corners that hints at light catching on distant clouds.       */
  background:
    /* Moon — three-layer rendering: defined disc + inner bloom + outer atmosphere ring */
    radial-gradient(circle 48px at 66% 13%, rgba(236,242,255,0.068) 0%, transparent 100%),
    radial-gradient(circle 22px at 66% 13%, rgba(248,246,238,0.20)  0%, transparent 100%),
    radial-gradient(circle 13px at 66% 13%, rgba(250,249,242,0.52)  0%, rgba(250,249,242,0.46) 56%, rgba(250,249,242,0.06) 84%, transparent 100%),
    /* Cloud shimmer — slightly brighter to stay visible against the lighter upper sky */
    radial-gradient(ellipse 280px 92px at 12% 24%, rgba(255,255,255,0.10) 0%, transparent 68%),
    radial-gradient(ellipse 185px 62px at  8% 14%, rgba(255,255,255,0.08) 0%, transparent 62%),
    radial-gradient(ellipse 240px 80px at 87% 22%, rgba(255,255,255,0.09) 0%, transparent 68%),
    radial-gradient(ellipse 158px 54px at 91% 13%, rgba(255,255,255,0.06) 0%, transparent 62%),
    /* Sky: luminous early-evening blue at top → deepening dusk toward horizon */
    linear-gradient(175deg, #4a7cb8 0%, #2c5688 40%, #1b3a62 66%, #132540 100%);
}

/* ── 2. Hero — floating cloud layer ────────────────────────────────────
   Uses ::after (::before is already the grid pattern from style.css).
   Seven soft ellipses in three clusters create visible but low-contrast
   clouds that read naturally against the dark navy canvas.              */
body.has-atmosphere .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Cloud A — upper-left, largest puff */
    radial-gradient(ellipse 210px 76px at  7% 22%, rgba(210,232,255,0.19) 0%, transparent 72%),
    radial-gradient(ellipse 140px 52px at  4% 13%, rgba(220,238,255,0.14) 0%, transparent 68%),
    radial-gradient(ellipse 100px 38px at 14%  9%, rgba(225,242,255,0.10) 0%, transparent 62%),
    /* Cloud B — upper-right */
    radial-gradient(ellipse 225px 82px at 88% 17%, rgba(210,232,255,0.16) 0%, transparent 72%),
    radial-gradient(ellipse 152px 58px at 85%  8%, rgba(220,238,255,0.12) 0%, transparent 68%),
    radial-gradient(ellipse 112px 42px at 93% 14%, rgba(225,242,255,0.08) 0%, transparent 62%),
    /* Cloud C — mid-right drifting wisp */
    radial-gradient(ellipse 130px 48px at 97% 52%, rgba(215,234,255,0.10) 0%, transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  body.has-atmosphere .hero::after {
    animation: atm-cloud-drift 100s ease-in-out infinite;
  }
}

/* ── 3. Hero — z-index stack ────────────────────────────────────────────
   Cloud (::after) z:1 → hill z:2 → butterflies z:3 → content z:4      */
body.has-atmosphere .hero-content {
  position: relative;
  z-index: 4;
}

/* ── 4. Hill — pinned to bottom of hero ─────────────────────────────────
   Rolling sage-green silhouette that grounds the hero visually and
   transitions into the first content section below.                     */
.atm-hill-hero {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.atm-hill-hero svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 5. Butterflies — shared rules ──────────────────────────────────────
   Each butterfly is a <span class="atm-butterfly"> (positioned wrapper)
   containing an inner <svg>.  Drift animates the span; flutter animates
   the svg — they layer independently without fighting over transform.   */
.atm-butterfly {
  position: absolute;
  pointer-events: none;
  display: block;
  z-index: 3;
}

/* Inner svg fills the span so width/height on the span control size */
.atm-butterfly > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Drift stagger — span gets the slow floating motion */
@media (prefers-reduced-motion: no-preference) {
  .atm-butterfly {
    animation: atm-butterfly-drift 22s ease-in-out infinite;
  }
  .atm-butterfly:nth-of-type(2) {
    animation-delay: -9s;
    animation-duration: 28s;
  }
  .atm-butterfly:nth-of-type(3) {
    animation-delay: -16s;
    animation-duration: 25s;
  }

  /* Wing flutter — inner svg gets an independent fast cycle.
     scaleX(0.60) compresses wings to 60% width at midpoint — clearly
     visible as a wing-fold without looking cartoonish on a tiny shape. */
  .atm-butterfly > svg {
    animation: atm-wing-flutter 1.8s ease-in-out infinite;
  }
  .atm-butterfly:nth-of-type(2) > svg {
    animation-delay: -0.65s;
    animation-duration: 2.0s;
  }
  .atm-butterfly:nth-of-type(3) > svg {
    animation-delay: -1.15s;
    animation-duration: 1.6s;
  }
}

/* Drift: slow undulating float — purely positional, no wing action.
   --atm-rot is set inline so each butterfly holds its own tilt.       */
@keyframes atm-butterfly-drift {
  0%   { transform: rotate(var(--atm-rot, 0deg)) translate(  0px,  0px) scale(1.00); }
  22%  { transform: rotate(var(--atm-rot, 0deg)) translate(  4px, -5px) scale(0.97); }
  45%  { transform: rotate(var(--atm-rot, 0deg)) translate(  7px, -3px) scale(1.02); }
  66%  { transform: rotate(var(--atm-rot, 0deg)) translate(  3px, -7px) scale(0.98); }
  84%  { transform: rotate(var(--atm-rot, 0deg)) translate( -2px, -4px) scale(1.01); }
  100% { transform: rotate(var(--atm-rot, 0deg)) translate(  0px,  0px) scale(1.00); }
}

/* Wing flutter: scaleX compresses at midpoint, simulating the wing-fold
   seen from a slight front angle.  scaleY(1.06) adds a hint of vertical
   lift as wings fold — more naturalistic than pure horizontal squeeze.  */
@keyframes atm-wing-flutter {
  0%, 100% { transform: scaleX(1.00) scaleY(1.00); }
  50%       { transform: scaleX(0.60) scaleY(1.06); }
}

/* ── 6. Page-hero (service-areas.html) — lighter cloud treatment ────────
   Simpler page, one cloud layer and one butterfly.  No hill.           */
body.has-atmosphere .page-hero {
  isolation: isolate;
}

body.has-atmosphere .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 185px 68px at  7% 32%, rgba(210,232,255,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 200px 74px at 88% 22%, rgba(210,232,255,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 125px 46px at  5% 18%, rgba(220,238,255,0.10) 0%, transparent 65%);
}

@media (prefers-reduced-motion: no-preference) {
  body.has-atmosphere .page-hero::after {
    animation: atm-cloud-drift 120s ease-in-out infinite;
  }
}

/* Text and butterfly sit above the cloud layer */
body.has-atmosphere .page-hero h1,
body.has-atmosphere .page-hero p {
  position: relative;
  z-index: 2;
}

/* ── 7. CTA section — calmer companion to the hero ──────────────────────
   Shares the hero's early-evening color language but simpler (3 stops vs 4)
   and slightly more muted so the hero stays the scenic focal point.      */
.atm-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 4-stop sky mirroring the hero structure — slightly more muted at top */
  background: linear-gradient(175deg, #4174b2 0%, #2a5a8c 36%, #1c3a64 64%, #132540 100%);
}

.atm-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Upper-left cloud shimmer — mirrors hero cloud blob placement */
    radial-gradient(ellipse 380px 140px at 10% 28%, rgba(255,255,255,0.08) 0%, transparent 70%),
    /* Upper-right cloud shimmer */
    radial-gradient(ellipse 300px 110px at 86% 20%, rgba(255,255,255,0.07) 0%, transparent 68%),
    /* Subtle bottom glow — grounds the section where hills meet sky */
    radial-gradient(ellipse 280px 100px at 50% 92%, rgba(255,255,255,0.04) 0%, transparent 68%);
}

/* All direct children (button, headings, butterfly) sit above the glow */
.atm-cta-inner {
  position: relative;
  z-index: 1;
}

/* Faint hill silhouette pinned to bottom of the CTA section.
   Light sage tones read gently against the navy background.  */
.atm-hill-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atm-hill-cta svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 8. Standalone section-separator hill ───────────────────────────────
   Used between sections as a visual connector (e.g. coverage → CTA).  */
.atm-hill {
  pointer-events: none;
  line-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-top:    -2px;
  margin-bottom: -2px;
}

.atm-hill svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 9. Butterfly glow / halo ────────────────────────────────────────────
   A soft drop-shadow applied only to the two more-visible hero butterflies
   and the single CTA butterfly.  The blur radius is large so the glow
   reads as diffused ambient light, not a hard edge or neon ring.
   The third hero butterfly (tiny, 0.09 opacity) stays glow-free.          */
body.has-atmosphere .hero .atm-butterfly:nth-of-type(1) {
  filter: drop-shadow(0 0 8px rgba(168,210,160,0.36));
}

body.has-atmosphere .hero .atm-butterfly:nth-of-type(2) {
  filter: drop-shadow(0 0 6px rgba(168,210,160,0.28));
}

/* CTA butterfly: pale blue-white glow to match its own wing fill */
.atm-cta .atm-butterfly {
  filter: drop-shadow(0 0 6px rgba(190,218,255,0.30));
}

/* ── 10. Keyframes ───────────────────────────────────────────────────── */
@keyframes atm-cloud-drift {
  0%, 100% { transform: translateX(  0px); }
  50%       { transform: translateX( 22px); }
}

/* ── 10. Mobile — reduce complexity, preserve feel ──────────────────── */
@media (max-width: 768px) {
  body.has-atmosphere .hero::after {
    background:
      radial-gradient(ellipse 160px 60px at  6% 20%, rgba(210,232,255,0.16) 0%, transparent 72%),
      radial-gradient(ellipse 170px 64px at 88% 16%, rgba(210,232,255,0.13) 0%, transparent 72%);
  }

  body.has-atmosphere .page-hero::after {
    background:
      radial-gradient(ellipse 135px 50px at  6% 28%, rgba(210,232,255,0.13) 0%, transparent 70%),
      radial-gradient(ellipse 145px 56px at 88% 20%, rgba(210,232,255,0.11) 0%, transparent 70%);
  }
}