/* ==========================================================================
   BLOCK HP-3 — GIF-Style Flash Sequence
   Files: block-hp-3-gif-flash.php | block-hp-3-gif-flash.css
   ========================================================================== */

/* ── Shell ──────────────────────────────────────────────────────────────── */
.taula-gif {
  position: relative;
  width: 100vw;
  height: 600px;
  overflow: hidden;
  background: #000; /* letterbox fallback while images load */
  display: block;
}

/* ── Frames — stacked, object-fit cover ─────────────────────────────────── */
.taula-gif__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /*
   * Default state: invisible.
   * The animation's 0% keyframe makes it visible for its 400ms slot,
   * then steps back to invisible for the remaining 2800ms of the cycle.
   * animation-delay (set inline in PHP) staggers each frame by 400ms.
   *
   * Using step-end timing ensures a true hard cut — no interpolation
   * between opacity values at any keyframe boundary.
   *
   * Total cycle = 8 frames × 400ms = 3200ms.
   * Each frame is visible for 400ms = 12.5% of 3200ms.
   */
  opacity: 0;
  animation-name: taula-gif-frame;
  animation-duration: 3200ms;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  animation-fill-mode: none; /* stay at CSS default (opacity:0) during delay */

  /* GPU compositing hint */
  will-change: opacity;
}

/* ── Keyframe — single frame's visibility window ────────────────────────── */
/*
 * step-end on the animation means the value holds at the FROM value
 * until the TO time is reached, then jumps instantly — a hard cut.
 *
 * Frame visible:   0%  → 12.5%  (0ms → 400ms)
 * Frame invisible: 12.5% → 100% (400ms → 3200ms)
 */
@keyframes taula-gif-frame {
  0%     { opacity: 1; }
  12.5%  { opacity: 0; }
  100%   { opacity: 0; }
}

/* ── Overlay strip — always 330px tall, never squishes ─────────────────── */
/*
 * object-fit: cover fills the full width at exactly 330px tall.
 * On narrow screens it crops from the sides rather than squashing the image.
 * object-position: left center keeps the left edge visible on crop.
 */
.taula-gif__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: left center;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* ── Accessibility — pause for users who prefer reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  .taula-gif__frame {
    animation: none;
  }

  /* Show only the first frame when motion is reduced */
  .taula-gif__frame:first-child {
    opacity: 1;
  }
}

/* ── Responsive — block scales down, overlay stays at 330px always ─────── */
@media (max-width: 1024px) {
  .taula-gif {
    height: 600px;
  }
}

@media (max-width: 768px) {
  .taula-gif {
    height: 480px;
  }
}

@media (max-width: 480px) {
  .taula-gif {
    height: 360px;
  }
}