/* Summer Splash homepage takeover (seasonal, 2026).
 * Only the Ken Burns keyframe lives here — it can't be expressed inline.
 * Everything else (layout, gradients, fade in/out, replay show/hide) is inline
 * in components/HomeSummerSplash.jsx. Rebuilt from the Claude Design
 * "Summer Splash.dc.html" handoff. To retire the takeover, see the SUMMER_SPLASH
 * flag in components/App.jsx (the home route). */
@keyframes albSplashKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.alb-splash-kb { animation: albSplashKenBurns 20s ease-in-out infinite alternate; transform-origin: 32% 60%; }
@media (prefers-reduced-motion: reduce) { .alb-splash-kb { animation: none; } }

/* ---- Mobile polish (desktop unchanged) ----
 * Two problems on phones: (1) white type sat over the bright/busy middle of the
 * photo, and (2) the dismiss controls fell off the bottom (fixed inset:0 uses the
 * layout viewport, so the bottom hid behind the browser toolbar, and the content
 * was simply too tall for a short viewport). Fixes: a stronger BOTTOM-WEIGHTED
 * scrim (the top of the photo stays bright), the inner column pinned to the
 * *dynamic* viewport (100dvh) with safe-area padding so the controls sit just
 * above the toolbar, and compacted type/spacing so it all fits without scrolling. */
@media (max-width: 600px) {
  .alb-splash-inner {
    height: 100dvh !important;
    padding: clamp(14px, 4vw, 22px) 22px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .alb-splash-scrim {
    background: linear-gradient(
      180deg,
      rgba(18,24,20,0.50) 0%,
      rgba(18,24,20,0.18) 24%,
      rgba(18,24,20,0.34) 44%,
      rgba(18,24,20,0.68) 64%,
      rgba(18,24,20,0.90) 82%,
      rgba(18,24,20,0.98) 100%
    ) !important;
  }
  .alb-splash-h1 { font-size: clamp(38px, 10vw, 52px) !important; margin-top: 14px !important; }
  .alb-splash-p { margin-top: 14px !important; }
  .alb-splash-cta { margin-top: 20px !important; gap: 14px 22px !important; }
  .alb-splash-dismiss { margin-top: 16px !important; padding-top: 14px !important; }

  /* Mobile photo recompose: the desktop crop (wide landscape into a tall phone
     frame) pushed the player off the left edge. Zoom in (taller background-size
     than the default cover) and shift the focal point so she's fully framed —
     head and paddle in, not cropped. Desktop keeps cover @ 28% 64%. */
  .alb-splash-kb {
    background-size: auto 142% !important;
    background-position: 18% 58% !important;
  }
}