/* ============================================
   SUNRISE-HERO.CSS v3.0 — Cinematic Sunrise Atmosphere
   Maddy's Dancing Tails
   
   Design goal: premium, cinematic, soft, minimal —
   sunlight emerging through morning mist. NOT a
   striped wallpaper.

   Layers (back to front), all inside .sunrise-hero (z-index 0):
     1. White base
     2. ONE large sunrise glow — the focal point behind the
        page heading (center 35%, 1100–1400px, blur 120px).
     3. Soft vertical light beam (60% wide, centered, blur 140px)
        that melts into the glow.
     4. Subtle horizon lines (1px, ~2% opacity, fading at both
        edges so they vanish near the left/right margins).
     5. 4–6 large blurred atmospheric circles (edges only).
     6. Edge vignette (cinematic depth at extreme sides).

   .sunrise-hero sits at z-index 0, beneath the decorative
   system (paw prints / doodles, z-index 1) and content (5).
   ============================================ */

/* Layer 0 — wrapper fills the hero, sits behind decorations */
.sunrise-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #ffffff;
}

/* ---------- 2. Main Sunrise Glow ---------- */
/* ONE large radial glow behind the heading. Centers near the
   top (35%) so the eye is drawn to the title, then atmosphere
   falls away — it must NOT fill the whole hero. */
.sunrise-hero__glow {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 1250px;
  height: 1250px;
  margin-top: -625px;
  margin-left: -625px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 247, 224, 0.95) 0%,
    rgba(255, 238, 205, 0.55) 45%,
    rgba(255, 238, 205, 0) 74%
  );
  filter: blur(120px);
  will-change: transform;
}

/* ---------- Layer 3. Soft Vertical Light Beam ---------- */
/* Wide column of warm light, centered, dissolving top & bottom
   so it simply feeds into the sunrise glow. */
.sunrise-hero__bands {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 232, 200, 0) 0%,
    rgba(255, 232, 200, 0.10) 32%,
    rgba(255, 232, 200, 0.10) 68%,
    rgba(255, 232, 200, 0) 100%
  );
  filter: blur(140px);
  will-change: transform;
}

/* ---------- Layer 4. Horizon Lines ---------- */
/* 1px lines, ~2% opacity, that gently fade out near the left
   and right edges. Barely-there atmosphere, never dominant.
   Spacing ~100px. */
.sunrise-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.03) 22%, rgba(50,50,50,0.03) 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.02) 24%, rgba(50,50,50,0.02) 76%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.03) 22%, rgba(50,50,50,0.03) 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.02) 24%, rgba(50,50,50,0.02) 76%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.02) 22%, rgba(50,50,50,0.02) 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.02) 24%, rgba(50,50,50,0.02) 76%, transparent 100%);
  background-position:
    0 100px,
    0 200px,
    0 300px,
    0 400px,
    0 500px,
    0 600px;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  will-change: transform;
}

/* ---------- Layer 5. Atmospheric Depth Circles ---------- */
/* Sizes 220 / 180 / 140 / 100px at 4–6% opacity. Placed only
   near the corners/edges so they never sit behind the heading.
   Deliberately sparse and very soft. */
.sunrise-hero__particles {
  position: absolute;
  inset: 0;
}

.sunrise-hero__particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 243, 214, 0.90) 0%,
    rgba(255, 243, 214, 0.38) 50%,
    transparent 76%
  );
  filter: blur(32px);
}

/* ---------- Layer 6. Cinematic Edge Vignette ---------- */
/* Darkens only the extreme left/right edges. ~6% so it reads
   as depth rather than a border. */
.sunrise-hero__vignette {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(46% 100% at 0% 50%, rgba(15,15,15,0.06) 0%, transparent 62%),
    radial-gradient(46% 100% at 100% 50%, rgba(15,15,15,0.06) 0%, transparent 62%);
}

/* ---------- Tablet — gentle re-scale ---------- */
@media (max-width: 1024px) {
  .sunrise-hero__glow {
    width: 1000px;
    height: 1000px;
    margin-top: -500px;
    margin-left: -500px;
  }
}

/* ---------- Mobile ---------- */
/* Glow shrinks, horizon lines drop to 5 and move higher,
   and the two smallest mid-edge particles are hidden to
   keep the composition clean and airy. */
@media (max-width: 768px) {
  .sunrise-hero__glow {
    width: 720px;
    height: 720px;
    margin-top: -360px;
    margin-left: -360px;
    filter: blur(90px);
  }

  .sunrise-hero__grid {
    background-image:
      linear-gradient(90deg, transparent 6%, rgba(50,50,50,0.02) 30%, rgba(50,50,50,0.02) 70%, transparent 94%),
      linear-gradient(90deg, transparent 6%, rgba(50,50,50,0.02) 30%, rgba(50,50,50,0.02) 70%, transparent 94%),
      linear-gradient(90deg, transparent 6%, rgba(50,50,50,0.02) 30%, rgba(50,50,50,0.02) 70%, transparent 94%),
      linear-gradient(90deg, transparent 6%, rgba(50,50,50,0.02) 30%, rgba(50,50,50,0.02) 70%, transparent 94%),
      linear-gradient(90deg, transparent 6%, rgba(50,50,50,0.02) 30%, rgba(50,50,50,0.02) 70%, transparent 94%);
    background-position:
      0 60px,
      0 150px,
      0 240px,
      0 330px,
      0 420px;
    background-size: 100% 1px;
    background-repeat: no-repeat;
  }

  .sunrise-hero__particle:nth-child(5),
  .sunrise-hero__particle:nth-child(6) {
    display: none;
  }
}