/* ==========================================================================
   Skycast — animations.css (loaded AFTER styles.css)
   1. Ken Burns drift on the active background photo layer (#bg.bg-anim)
   2. Pulsing chevron hint on the horizontally-scrollable 48h pane
   3. prefers-reduced-motion: kill both
   Transform/opacity only — GPU friendly for Safari iOS.
   ========================================================================== */

/* ---------------------------- 1. Ken Burns ------------------------------- */
/* Two stacked .bg-layer divs crossfade via .on (opacity, styles.css).
   While the visible layer drifts we scale 1.03 → 1.12 so the cover-fit
   photo always overfills the viewport — no edge gaps while panning.
   transform-only animation keeps everything on the compositor. */
@keyframes skycast-kenburns {
  from {
    transform: scale(1.03) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-1.8%, -1.2%, 0);
  }
}

.bg-layer {
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden; /* Safari flicker fix */
  -webkit-backface-visibility: hidden;
}

/* Active layer drifts when the root opts in with .bg-anim. 46s alternate
   so the motion eases back the way it came instead of snapping. */
#bg.bg-anim .bg-layer.on {
  animation: skycast-kenburns 46s ease-in-out infinite alternate;
}

/* Second layer runs the mirror direction, so while two layers are visible
   mid-crossfade they never sit at an identical transform. */
#bg.bg-anim .bg-layer:nth-child(2).on {
  animation-direction: alternate-reverse;
}

/* -------------------------- 2. Scroll hint ------------------------------- */
/* Scrim + chevron overlaid on the right edge of the 48h card, over the
   scrollable pane (.hour-wrap is position: relative in styles.css).
   JS adds .done once the pane has been scrolled / fully seen. */
.scroll-hint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; /* full height of the pane */
  width: 44px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right, transparent, rgba(8, 13, 24, 0.55));
  border-radius: 0 var(--radius, 20px) var(--radius, 20px) 0; /* match card */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
  animation: skycast-hint-nudge 1.8s ease-in-out infinite;
}

.scroll-hint::after {
  content: "\203A";
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}

@keyframes skycast-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.75;
  }
  50% {
    transform: translateX(6px);
    opacity: 1;
  }
}

/* Dismissed: drop the pulse (it would otherwise pin opacity) and fade out. */
.scroll-hint.done {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------- 3. Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-layer,
  .scroll-hint {
    animation: none !important;
  }
}