/* ================================================================
   APPLE-STYLE SCROLL CINEMA
   scroll-animation.css  ·  v1.0  ·  Production-ready
   ================================================================ */

/* ── 1. CSS CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  --sc-accent:          #fff;
  --sc-accent-rgb:      255, 255, 255;
  --sc-label-color:     rgba(255, 255, 255, 0.55);
  --sc-headline-color:  #ffffff;
  --sc-cta-bg:          rgba(255, 255, 255, 0.15);
  --sc-cta-border:      rgba(255, 255, 255, 0.4);
  --sc-cta-hover-bg:    rgba(255, 255, 255, 0.28);
  --sc-progress-track:  rgba(255, 255, 255, 0.18);
  --sc-progress-fill:   rgba(255, 255, 255, 0.85);
  --sc-loader-bg:       #0a0a0a;
  --sc-section-bg:      #0a0a0a;

  /* Scroll-section height determines how long the pin lasts.
     300vh = 3× viewport heights of scroll distance.
     Increase for a slower, more luxurious feel. */
  --sc-scroll-height:   400vh;

  /* Typography scale */
  --sc-label-size:      clamp(11px, 1.2vw, 14px);
  --sc-headline-size:   clamp(36px, 5.5vw, 84px);
  --sc-headline-lh:     1.05;
  --sc-headline-weight: 700;
  --sc-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Easing tokens */
  --sc-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --sc-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 2. RESET ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ── 3. DEMO SECTIONS (remove in production) ────────────────────── */
.demo-intro,
.demo-outro {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  background:      #050505;
  color:           #fff;
  font-family:     var(--sc-font);
  text-align:      center;
}
.demo-intro__inner,
.demo-outro__inner { max-width: 640px; padding: 2rem; }
.demo-intro h1     { font-size: clamp(28px, 4vw, 56px); font-weight: 700; margin-bottom: 1rem; }
.demo-intro p,
.demo-outro p      { font-size: 1.1rem; color: rgba(255,255,255,0.5); line-height: 1.6; }
.demo-outro h2     { font-size: clamp(24px, 3vw, 40px); font-weight: 600; margin-bottom: 1rem; }
.demo-scroll-hint  {
  margin-top:  2.5rem;
  font-size:   2rem;
  opacity:     0.45;
  animation:   sc-bounce 1.6s var(--sc-ease-in-out) infinite;
}

/* ── 4. MAIN SECTION ────────────────────────────────────────────── */
.scroll-cinema {
  position:         relative;
  height:           var(--sc-scroll-height);
  background-color: var(--sc-section-bg);
  /* Ensure full-bleed on WordPress */
  width:            100%;
  overflow:         visible; /* ScrollTrigger pin needs this on parent */
}

/* ── 5. STICKY VIEWPORT ─────────────────────────────────────────── */
.scroll-cinema__sticky {
  position:   sticky;
  top:        0;
  left:       0;
  width:      100%;
  height:     100vh;
  overflow:   hidden;
  background: var(--sc-section-bg);

  /* Isolate stacking context */
  isolation:  isolate;
}

/* ── 6. CANVAS (image sequence) ─────────────────────────────────── */
.scroll-cinema__canvas {
  position:   absolute;
  inset:      0;
  width:      100vw;
  height:     100vw;
  object-fit: cover;
  display:block;

  /* Hardware-accelerated compositing */
  will-change:        transform;
  transform:          translateZ(0);
  backface-visibility: hidden;

  /* Hidden until JS loads first frame */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scroll-cinema__canvas.is-ready {
  opacity: 1;
}

/* ── 7. VIDEO FALLBACK ──────────────────────────────────────────── */
.scroll-cinema__video-fallback {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    none; /* shown only by JS when canvas unsupported */
}

.scroll-cinema__video-fallback.is-active {
  display: block;
}

/* ── 8. OVERLAY + TEXT ──────────────────────────────────────────── */
.scroll-cinema__overlay {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    flex-end;
  justify-content: flex-start;
  padding:        clamp(2rem, 6vw, 6rem);
  pointer-events: none;

  /* Subtle vignette so text is always legible */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    transparent 70%
  );
}

.scroll-cinema__text-block {
  position:  absolute;
  bottom:    clamp(2rem, 6vw, 6rem);
  left:      clamp(2rem, 6vw, 6rem);
  max-width: min(640px, 80%);

  /* Start hidden; JS fades in/out based on frame range */
  opacity:   0;
  transform: translateY(24px);
  transition:
    opacity   0.5s var(--sc-ease-out),
    transform 0.5s var(--sc-ease-out);
  pointer-events: none;
}

.scroll-cinema__text-block.is-visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.scroll-cinema__label {
  display:        block;
  font-family:    var(--sc-font);
  font-size:      var(--sc-label-size);
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--sc-label-color);
  margin-bottom:  0.75rem;
}

.scroll-cinema__headline {
  font-family:    var(--sc-font);
  font-size:      var(--sc-headline-size);
  font-weight:    var(--sc-headline-weight);
  line-height:    var(--sc-headline-lh);
  color:          var(--sc-headline-color);
  letter-spacing: -0.025em;
  margin-bottom:  1.5rem;
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.3);
}

.scroll-cinema__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4em;
  font-family:     var(--sc-font);
  font-size:       clamp(14px, 1.1vw, 16px);
  font-weight:     500;
  letter-spacing:  0.04em;
  color:           #fff;
  text-decoration: none;
  padding:         0.7em 1.6em;
  border:          1px solid var(--sc-cta-border);
  border-radius:   50px;
  background:      var(--sc-cta-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
  pointer-events: auto;
}

.scroll-cinema__cta:hover {
  background:  var(--sc-cta-hover-bg);
  border-color: rgba(255, 255, 255, 0.65);
  transform:   translateY(-1px);
}

/* ── 9. PROGRESS BAR ────────────────────────────────────────────── */
.scroll-cinema__progress {
  position:      absolute;
  bottom:        0;
  left:          0;
  width:         100%;
  height:        2px;
  background:    var(--sc-progress-track);
  z-index:       10;
  pointer-events: none;
}

.scroll-cinema__progress-bar {
  height:           100%;
  width:            0%;
  background:       var(--sc-progress-fill);
  box-shadow:       0 0 8px rgba(var(--sc-accent-rgb), 0.5);
  transition:       width 0.05s linear;
  transform-origin: left;
  will-change:      width;
}

/* ── 10. LOADER ─────────────────────────────────────────────────── */
.scroll-cinema__loader {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.25rem;
  background:      var(--sc-loader-bg);
  z-index:         20;
  transition:      opacity 0.5s ease, visibility 0.5s ease;
}

.scroll-cinema__loader.is-hidden {
  opacity:    0;
  visibility: hidden;
}

.scroll-cinema__loader-ring {
  width:        48px;
  height:       48px;
  border:       3px solid rgba(255, 255, 255, 0.1);
  border-top:   3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation:    sc-spin 0.9s linear infinite;
}

.scroll-cinema__loader-text {
  font-family:    var(--sc-font);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.06em;
  color:          rgba(255, 255, 255, 0.35);
}

/* ── 11. KEYFRAMES ──────────────────────────────────────────────── */
@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

@keyframes sc-bounce {
  0%, 100% { transform: translateY(0);    opacity: 0.45; }
  50%       { transform: translateY(8px); opacity: 0.8;  }
}

/* ── 12. RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --sc-scroll-height: 350vh;
  }
  .scroll-cinema__text-block {
    max-width: 90%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --sc-scroll-height: 300vh;
    --sc-headline-size: clamp(30px, 8vw, 44px);
  }

  .scroll-cinema__overlay {
    align-items:     flex-end;
    justify-content: center;
    padding:         1.5rem 1.25rem 2rem;
    text-align:      center;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      transparent 75%
    );
  }

  .scroll-cinema__text-block {
    position:  static;
    bottom:    auto;
    left:      auto;
    max-width: 100%;
  }

  .scroll-cinema__cta {
    font-size:  15px;
    padding:    0.75em 2em;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-cinema__canvas,
  .scroll-cinema__text-block,
  .scroll-cinema__cta,
  .scroll-cinema__loader {
    transition: none !important;
    animation:  none !important;
  }
  .scroll-cinema__loader-ring {
    animation: none !important;
    border-color: rgba(255, 255, 255, 0.6);
  }
}

/* ── 13. ELEMENTOR INTEGRATION OVERRIDES ────────────────────────── */
/* Force full-width on Elementor sections */
.elementor-section.scroll-cinema-wrapper,
.elementor-section.scroll-cinema-wrapper > .elementor-container {
  max-width:   100% !important;
  padding:     0 !important;
  margin:      0 !important;
}

.elementor-widget-html .scroll-cinema {
  /* Reset any Elementor widget padding */
  margin:  0;
  padding: 0;
}

/* Prevent Elementor's default container from clipping sticky */
.elementor-section.scroll-cinema-wrapper {
  overflow: visible !important;
}