/* ════════════════════════════════════════════════════════════
   Theme-song "distant rainfall" feature.
   A soft, gray-to-white rain column that falls IN FRONT OF the
   mountain (lower on the hero), with very fuzzy rectangular edges
   and downward motion — as if showering onto the hills. Hovering
   anywhere over it reveals a translucent plaque with the song.

   Layering, so it never steals clicks from the oval cards:
     • the rain veil sits BELOW the cards (z-index 1) and is the
       hover target — cards occlude it and stay clickable;
     • the plaque sits ABOVE the cards (z-index 5) when revealed.
   .mist-feature itself has no z-index/transform so it creates no
   stacking context that would trap the plaque beneath the cards.
   ════════════════════════════════════════════════════════════ */

.mist-feature {
  position: absolute;
  top: 46%;                                /* lower — in front of the mountain */
  left: 2.5%;                              /* nudged further left */
  width: clamp(343px, 32.4vw, 449px);      /* +20% wider again */
  height: clamp(294px, 28.8vw, 391px);     /* +20% taller */
  pointer-events: none;
  outline: none;
}

/* The hero content layer sits above the rain veil and would otherwise
   swallow hover everywhere it spans. Let hover fall THROUGH it to the veil,
   while keeping the oval cards (the only interactive content) clickable —
   so hovering any open part of the rain reveals the plaque, yet the cards
   still work. */
.home-hero__content { pointer-events: none; }
.oval-card { pointer-events: auto; }

/* ── Rainfall veil (in front of the mountain, behind the cards) ── */
.mist-veil {
  position: absolute;
  inset: 0;
  z-index: 1;                /* above the hero photo/overlay, below the cards */
  overflow: hidden;
  pointer-events: auto;      /* hovering ANY part of this reveals the plaque */
  /* Soft blur + turbulence displacement → a wispy, curvy fog cloud rather
     than straight rain lines. */
  filter: blur(4px) url(#mist-distort);
  /* Cloud-blob silhouette: a soft elliptical fade (no hard rectangle edges). */
  -webkit-mask-image: radial-gradient(58% 52% at 50% 47%, #000 28%, rgba(0,0,0,0.55) 58%, transparent 82%);
  mask-image: radial-gradient(58% 52% at 50% 47%, #000 28%, rgba(0,0,0,0.55) 58%, transparent 82%);
}

.mist-veil > span {
  position: absolute;
  inset: -14%;
  pointer-events: none;
}

/* Soft gray-to-white cloud haze — brighter than the original, but eased back
   a touch; still translucent enough that the mountain shows through. */
.mist-fog {
  background:
    linear-gradient(to bottom,
      rgba(240, 244, 250, 0.345),
      rgba(250, 252, 254, 0.22) 56%,
      rgba(240, 244, 250, 0.07)),
    radial-gradient(74% 56% at 50% 28%, rgba(252, 253, 255, 0.31), transparent 78%);
  animation: mist-drift 18s ease-in-out infinite alternate;
}

/* Soft, less-defined vertical streaks — gentle alpha ramps, no hard lines —
   warped curvy by the displacement filter. Very slow drift. */
.mist-rain {
  /* Bright bands dominate; only thin, low-contrast darker seams between them
     — so the lines read as soft, not linearly distinct. */
  background-image: repeating-linear-gradient(
    94deg,
    rgba(252, 253, 255, 0.08) 0px,
    rgba(252, 253, 255, 0.08) 4px,
    rgba(250, 252, 255, 0.023) 6px,
    rgba(252, 253, 255, 0.08) 8px
  );
  animation: mist-rain 11s linear infinite alternate;
}

/* Downward sheen, made non-linear: two soft band layers of different sizes
   scroll down at different speeds (each by exactly one tile, so each loops
   seamlessly). The displacement filter bends them into curvy, varied motion. */
.mist-shimmer {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0,
      rgba(255, 255, 255, 0.115) 24%,
      rgba(255, 255, 255, 0.15) 32%,
      rgba(255, 255, 255, 0.115) 40%,
      transparent 62%),
    repeating-linear-gradient(to bottom,
      transparent 0,
      rgba(255, 255, 255, 0.069) 34%,
      transparent 70%);
  background-size: 100% 154px, 100% 98px;
  animation: mist-shimmer 6s linear infinite;
}

@keyframes mist-drift {
  from { transform: translate3d(-3px, 0, 0); }
  to   { transform: translate3d(4px, 0, 0); }
}
@keyframes mist-rain    { to { background-position: 8px 0; } }
/* two layers move different distances over the same time → different speeds */
@keyframes mist-shimmer { to { background-position: 0 154px, 0 98px; } }

/* ── Faint "there's a song here" hint ── */
.mist-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;                /* above the rain, below the cards */
  font-size: 22px;
  color: rgba(248, 250, 253, 0.78);
  text-shadow: 0 1px 6px rgba(50, 64, 88, 0.55);
  pointer-events: none;
  animation: mist-pulse 3.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
@keyframes mist-pulse {
  0%, 100% { opacity: 0.4;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -52%) scale(1.08); }
}

/* ── Reveal plaque — a gentle, translucent cloud with fuzzy edges ── */
.mist-panel {
  position: absolute;
  top: 50%;
  left: -8px;                /* anchored near the cloud's left, opens rightward
                                so widening doesn't run off the left edge */
  z-index: 5;                /* above the cards when revealed */
  transform: translate(0, -46%) scale(0.96);
  width: 448px;              /* wide enough for the title on one line */
  padding: 32px 34px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

/* The translucent fill + frosted backdrop live on a separate layer so its
   edges can be feathered (radial mask) without fading the text on top. */
.mist-panel::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  background: rgba(255, 252, 245, 0.34);   /* translucent, like the cards but more */
  border-radius: 48% 52% 47% 53% / 62% 60% 42% 40%;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  /* soft, fuzzy cloud edge */
  -webkit-mask-image: radial-gradient(60% 58% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(60% 58% at 50% 50%, #000 58%, transparent 100%);
}

.mist-feature:hover .mist-panel,
.mist-feature:focus-within .mist-panel,
.mist-feature.is-open .mist-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
  pointer-events: auto;
}

/* retire the hint while the plaque is open */
.mist-feature:hover .mist-hint,
.mist-feature:focus-within .mist-hint,
.mist-feature.is-open .mist-hint { opacity: 0; }

.mist-panel__title {
  font-family: var(--font-display);
  font-size: 24px;           /* larger, and now the dominant line */
  font-weight: 700;
  line-height: 1.22;
  color: #1b2a4a;
  margin: 0 0 6px;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.55);
}

.mist-panel__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;           /* smaller than the title */
  line-height: 1.25;
  color: var(--text-secondary);
  margin: 0 0 14px;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.55);
}

.mist-panel__play {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-brown-900);
  background: var(--accent-primary);
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mist-panel__play:hover { background: var(--accent-light); transform: translateY(-1px); }
.mist-panel__play.is-playing { background: var(--color-forest-500); color: var(--text-on-dark); }

/* keyboard focus ring */
.mist-feature:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .mist-fog, .mist-rain, .mist-shimmer, .mist-hint { animation: none; }
}

/* ── Small screens ──
   The hero is fully packed (masthead → ovals), so there's no room for a
   large rain column. Collapse to a compact, tappable shimmer chip in the
   open corner above the title; the plaque opens downward into view. */
@media (max-width: 960px) {
  .mist-feature {
    top: 10px;
    left: 10px;
    width: 48px;
    height: 48px;
  }

  /* hide the rain column; the chip stands in for it */
  .mist-veil { -webkit-mask-image: none; mask-image: none; filter: none; }
  .mist-veil > span { display: none; }

  .mist-hint {
    top: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 20px;
    pointer-events: auto;   /* the chip is the tap target on touch */
    cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(244, 248, 255, 0.30), rgba(214, 226, 242, 0.12) 70%, transparent);
    box-shadow: 0 1px 8px rgba(40, 60, 90, 0.25);
    backdrop-filter: blur(2px);
  }

  /* plaque drops below the chip, left-aligned */
  .mist-panel {
    top: 56px;
    left: 0;
    width: 250px;
    padding: 14px 16px;
    transform: translate(0, -8px) scale(0.97);
  }
  .mist-feature:hover .mist-panel,
  .mist-feature:focus-within .mist-panel,
  .mist-feature.is-open .mist-panel {
    transform: translate(0, 0) scale(1);
  }
  .mist-panel__title { font-size: 20px; }
  .mist-panel__sub { font-size: 16px; margin-bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════
   Lyrics — button + caption in the plaque, and the pop-up modal
   ════════════════════════════════════════════════════════════ */

.mist-panel__lyrics {
  display: block;
  width: fit-content;
  margin: 12px auto 0;       /* its own line, centered, below Play */
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-brown-900);
  background: transparent;
  border: 1px solid rgba(90, 62, 40, 0.5);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mist-panel__lyrics:hover {
  background: rgba(255, 252, 245, 0.5);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.mist-panel__caption {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15.5px;        /* ~25% larger */
  font-weight: 600;         /* bolder, to stand out */
  line-height: 1.3;
  color: var(--text-secondary);
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

/* ── Modal ── */
.lyrics-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lyrics-modal[hidden] { display: none; }

.lyrics-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 12, 4, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lyrics-modal__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--surface-page);
  border: 1px solid var(--accent-primary);
  border-radius: 14px;
  box-shadow: var(--shadow-heavy);
  padding: 32px 36px 24px;
}

.lyrics-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lyrics-modal__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); }

.lyrics-modal__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #1b2a4a;
  margin: 0 0 2px;
}
.lyrics-modal__title span {
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--text-secondary);
}
.lyrics-modal__credit {
  text-align: center;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.lyrics-modal__body { font-family: var(--font-body); color: var(--text-primary); line-height: 1.5; }
.lyrics-modal__body p { margin: 0; }

.lyric-verse {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
}
.lyric-verse__num { font-weight: 700; color: var(--text-muted); }

.lyric-chorus {
  margin: 0 0 16px;
  padding-left: 28px;
  font-style: italic;
  color: var(--text-secondary);
}
.lyric-label {
  display: block;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.lyrics-modal__note {
  margin: 0 0 16px;
  padding-left: 28px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.lyrics-modal__note em { color: var(--text-secondary); }

.lyrics-modal__pdf {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-forest);
}

@media (max-width: 540px) {
  .lyrics-modal { padding: 14px; }
  .lyrics-modal__panel { padding: 28px 20px 20px; }
  .lyrics-modal__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mist-panel__lyrics { transition: none; }
}