/* ═══════════════════════════════════════════════════════════
   WAB Video Scroll — style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Outer scroll-track wrapper ────────────────────────────
   Height drives how long the user scrolls through the block.
   Position:relative is required for the sticky child.        */
.wab-scroll-video {
  position: relative;
  width: 100%;
  /* e.g. scrollHeight=300 → 300vh of scroll distance */
  height: calc(var(--scroll-height, 300) * 1vh);
  padding: 0;
}

/* ── alignwide: nothing special needed, theme handles it ── */

/* ── alignfull: same fix as sticky-stack ───────────────────
   wab.css sets overflow:hidden on .alignfull which kills
   position:sticky. Fix overflow only — do NOT touch
   left/transform/width which wab.css handles correctly.     */

.entry-content:has(.wab-scroll-video),
.wab-article__content:has(.wab-scroll-video),
.wp-site-blocks:has(.wab-scroll-video),
main:has(.wab-scroll-video),
body:has(.wab-scroll-video) { overflow: visible !important; }

.wab-scroll-video { overflow: visible !important; }
.wab-scroll-video.alignfull,
.wab-scroll-video.alignwide { overflow: visible !important; }

/* alignfull: handled by wab.css inside .wab-article__content. On pages/CPTs
   without that wrapper, alignfull falls back to whatever the theme provides.
   We do NOT override alignfull width/margins here — the previous attempt to
   do so risked breaking existing sites where the theme's own alignfull already
   works. If a specific site needs full-width outside posts, handle per-site. */

/* alignfull: wab.css handles left/transform/width. */

/* ── Sticky viewport panel ─────────────────────────────────
   This is the visible "screen" that stays fixed while the
   outer wrapper scrolls past it.
   CRITICAL: it must NOT contribute to document height by itself
   — only position:sticky + height:100vh is correct here.      */
.video-scroll-sticky {
  position: sticky;
  top: 0;
  left: 0;                /* needed when margin-left offset is applied by JS */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* GPU layer for smooth compositing */
  transform: translateZ(0);
}

/* ── Media element (video or canvas) ──────────────────────
   Must fill the sticky panel completely.                     */
.video-scroll-media {
  /* Reset any theme overrides (some themes cap video at 900px etc.) */
  max-width:     none   !important;
  width:         100%   !important;
  height:        100%   !important;
  min-height:    100%;
  margin:        0      !important;
  padding:       0      !important;
  border-radius: 0      !important;
  display:       block  !important;
  object-fit:    cover;
  /* Effects engine writes filter/opacity/transform here */
  will-change:   filter, transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Canvas sequence: explicit 100% both axes */
canvas.video-scroll-media {
  width:  100% !important;
  height: 100% !important;
}

/* ── Effects overlays ──────────────────────────────────────*/
.video-scroll-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
}

.video-scroll-color-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Overlay container (inner blocks) ─────────────────────*/
.video-scroll-overlays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Grid so multiple overlays stack in the same cell */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.video-scroll-overlays > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  pointer-events: auto;
  margin: 0 !important;
}

/* ── Stacked timing: overlays accumulate vertically as user scrolls.
   Container becomes a flex column centered in the viewport. Each overlay
   sits in normal flow — when the next one animates in, the group naturally
   re-centers as one unit. Grid-stack rules above are overridden. */
.wab-scroll-video[data-overlay-timing="stacked"] .video-scroll-overlays {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.wab-scroll-video[data-overlay-timing="stacked"] .video-scroll-overlays > * {
  grid-column: auto;
  grid-row: auto;
  /* When an overlay is in enter-state (opacity:0), collapse its layout box
     entirely so it doesn't take up space in the flex column. GSAP will remove
     display:none by animating opacity → we handle box collapse via a class. */
}
.wab-scroll-video[data-overlay-timing="stacked"] .video-scroll-overlay-wrapper.sn-stacked-hidden {
  display: none;
}

/* ── Poster overlay ────────────────────────────────────────*/
.video-scroll-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

/* ── Mobile ────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .wab-scroll-video {
    height: calc(var(--scroll-height-mobile, 200) * 1vh);
  }

  .video-scroll-overlays {
    padding: 1rem;
  }

  .wab-scroll-video.has-effects .video-scroll-media {
    will-change: transform;
  }
}

/* ── Overlay backdrop variants ─────────────────────────────
   Injected dynamically by view.js per overlay wrapper.      */
.video-scroll-overlay-backdrop,
.sn-overlay-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.video-scroll-overlay-backdrop--blur,
.sn-overlay-backdrop--blur {
  backdrop-filter: blur(calc(var(--bd-intensity, 0.5) * 20px));
  -webkit-backdrop-filter: blur(calc(var(--bd-intensity, 0.5) * 20px));
  background: rgba(0, 0, 0, calc(var(--bd-intensity, 0.5) * 0.2));
}

.video-scroll-overlay-backdrop--dark-pill,
.sn-overlay-backdrop--dark-pill {
  inset: 15% 10%;
  border-radius: 24px;
  background: rgba(0, 0, 0, calc(var(--bd-intensity, 0.5) * 0.8));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.video-scroll-overlay-backdrop--gradient-bottom,
.sn-overlay-backdrop--gradient-bottom {
  background: linear-gradient(
    to top,
    rgba(0,0,0, calc(var(--bd-intensity, 0.5) * 0.9)) 0%,
    transparent 60%
  );
}

.video-scroll-overlay-backdrop--gradient-top,
.sn-overlay-backdrop--gradient-top {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0, calc(var(--bd-intensity, 0.5) * 0.9)) 0%,
    transparent 60%
  );
}

/* Overlay inner content sits above its own backdrop */
.video-scroll-overlay-wrapper > *:not(.sn-overlay-backdrop),
.video-scroll-overlays > *:not(.video-scroll-overlay-backdrop):not(.video-scroll-overlay-wrapper) {
  position: relative;
  z-index: 1;
}

/* Mobile hidden overlays */
@media (max-width: 768px) {
  .sn-overlay-mobile-hidden {
    display: none !important;
  }
}

/* ── Loading state (sequence preload) ──────────────────────*/
.video-scroll-canvas.loading {
  opacity: 0.5;
  animation: wab-pulse 1.5s ease-in-out infinite;
}

@keyframes wab-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.8; }
}

/* ── Performance ───────────────────────────────────────────*/
.wab-scroll-video.has-effects {
  isolation: isolate;
}

/* ── Reduced motion ────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .video-scroll-media {
    animation:    none !important;
    will-change:  auto !important;
  }
  .wab-scroll-video.has-effects .video-scroll-media {
    filter:    none  !important;
    transform: none  !important;
    opacity:   1     !important;
  }
}

/* ── Editor styles (not shown on frontend) ─────────────────*/
.wab-scroll-video-editor {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #f9f9f9;
}

.video-scroll-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background: #fff;
  border-radius: 4px;
}

.video-scroll-preview {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.video-scroll-overlays-editor {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 100px;
}

.video-scroll-overlays-editor .block-editor-block-list__layout {
  margin: 0;
}