/* ============================================
   NoveSmile — Apple-Style Scroll CSS
   Companion styles for js/apple-scroll.js
   ============================================ */

/* ─── BASE: Smooth Scroll Override ─────────── */
html.apple-scroll-ready {
  /* Override native smooth scroll — JS handles it now */
  scroll-behavior: auto !important;
}

/* GPU-accelerated transforms for all animated elements */
[data-apple-reveal],
[data-apple-parallax],
[data-apple-sticky-slide],
[data-apple-video-scrub] {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── REVEAL: Initial States (CSS fallback if JS fails) ─── */
.apple-revealed {
  will-change: auto !important;
}

/* ─── STICKY SECTIONS ──────────────────────── */
[data-apple-sticky] {
  position: relative;
  width: 100%;
}

[data-apple-sticky-container] {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-apple-sticky-slide] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* First slide visible by default */
[data-apple-sticky-slide]:first-child {
  opacity: 1;
}

[data-apple-sticky-slide] ~ [data-apple-sticky-slide] {
  opacity: 0;
  visibility: hidden;
}

/* ─── VIDEO SCRUB ──────────────────────────── */
[data-apple-video-scrub-wrapper] {
  position: relative;
  /* Height set in HTML or JS — this is the scroll range */
}

[data-apple-video-scrub] {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  pointer-events: none;
}

/* ─── HERO SCROLL ENHANCEMENTS ─────────────── */
.apple-scroll-ready .hero {
  /* Extend hero to allow scroll effects to work past it */
  will-change: auto;
}

.apple-scroll-ready .hero__content {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.apple-scroll-ready .hero__media {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: none; /* JS controls this, no CSS transition */
}

/* ─── TEXT SHIMMER ──────────────────────────── */
[data-apple-shimmer] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

/* ─── SCROLL-DRIVEN GRADIENT BACKGROUNDS ──── */
.apple-scroll-gradient {
  background: linear-gradient(
    180deg,
    var(--gradient-start, transparent) 0%,
    var(--gradient-end, transparent) 100%
  );
  background-attachment: fixed;
}

/* ─── SCROLL-LINKED CSS CUSTOM PROPERTIES ─── */
/* Use these in your CSS for scroll-linked animations:
   var(--scroll-y)        — current scroll position in px
   var(--scroll-progress) — 0 to 1 page progress
   var(--scroll-direction) — 1 (down) or -1 (up)
*/

/* ─── HERO: Scroll-Linked Bottom Fade ──────── */
.apple-scroll-ready .hero__fade-bottom {
  /* Intensify the bottom fade as user scrolls */
  opacity: calc(0.6 + var(--scroll-progress, 0) * 3);
  transition: none;
}

/* ─── PARALLAX DEPTH LAYERS ────────────────── */
.apple-depth-1 { --parallax-speed: 0.05; }
.apple-depth-2 { --parallax-speed: 0.1; }
.apple-depth-3 { --parallax-speed: 0.2; }
.apple-depth-4 { --parallax-speed: 0.35; }
.apple-depth-5 { --parallax-speed: 0.5; }

/* ─── RESPONSIVE ───────────────────────────── */

/* Tablet: reduce distances, simpler effects */
@media (max-width: 1024px) {
  [data-apple-reveal] {
    --reveal-distance: 30px;
  }

  [data-apple-video-scrub] {
    height: 70vh;
  }
}

/* Mobile: disable virtual scroll, simplify reveals */
@media (max-width: 768px) {
  html.apple-scroll-ready {
    /* Let native scroll handle mobile */
    scroll-behavior: smooth !important;
  }

  [data-apple-parallax] {
    /* Reduce parallax intensity on mobile */
    transform: none !important;
  }

  [data-apple-sticky] {
    /* Reduce scroll space on mobile */
    height: auto !important;
  }

  [data-apple-sticky-container] {
    position: relative !important;
    height: auto !important;
  }

  [data-apple-sticky-slide] {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  [data-apple-video-scrub] {
    position: relative;
    height: 50vh;
  }
}

/* ─── REDUCED MOTION ───────────────────────── */
html.reduced-motion [data-apple-reveal],
html.reduced-motion [data-apple-parallax],
html.reduced-motion [data-apple-sticky-slide],
html.reduced-motion [data-apple-video-scrub],
html.reduced-motion .hero__content,
html.reduced-motion .hero__media {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-apple-reveal],
  [data-apple-parallax],
  [data-apple-sticky-slide] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ─── SAFARI-SPECIFIC FIXES ────────────────── */
html.is-safari [data-apple-video-scrub] {
  /* Safari needs explicit compositing layer for video scrub */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

html.is-safari [data-apple-sticky-container] {
  /* Safari sticky can be buggy — force GPU layer */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* ─── iOS-SPECIFIC ─────────────────────────── */
html.is-ios [data-apple-video-scrub] {
  /* iOS doesn't support scroll-driven video well */
  /* Fallback: show video poster/first frame statically */
  object-fit: cover;
}

html.is-ios [data-apple-video-scrub-wrapper] {
  /* Reduce height on iOS since video scrub is limited */
  min-height: 80vh;
}

/* ─── PRINT ────────────────────────────────── */
@media print {
  [data-apple-reveal],
  [data-apple-parallax],
  [data-apple-sticky-slide] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    visibility: visible !important;
    position: relative !important;
  }
}