/* =========================================================
   Concierge Dental Design — Cinematic Motion Layer
   - Hero first-fold: video mask top-to-bottom + word-by-word + cascade
   - Section reveals on scroll (cdd-fade-blur + data-reveal-stagger)
   - Nav drop-in
   - Parallax / zoom / tilt utilities
   - Lenis smooth scroll
   ========================================================= */

:root {
  /* Section reveal ease — ease-out-expo, the original cinematic curve. */
  --cdd-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  /* Hero load ease — softer, used for word/cascade fade. */
  --cdd-ease-load:   cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Hero mask ease — in-out so the reveal glides evenly without a front-loaded "jump". */
  --cdd-ease-hero-mask: cubic-bezier(0.65, 0, 0.35, 1);

  --cdd-dur-reveal:    1.65s;  /* section reveals (cdd-fade-blur) */
  --cdd-dur-reveal-sm: 1.3s;   /* stagger children */
  --cdd-dur-load:      900ms;  /* hero word/cascade */

  --cdd-stagger-grid:  0.22s;
}

/* -------------------------------------------------
   Hero first-fold staged reveal
   ------------------------------------------------- */

/* Hero video panel: revealed top-to-bottom via clip-path mask.
   Uses its own ease/duration — kept slow + delayed. */
.cdd-hero-staged .c-hero__bg,
.cdd-hero-staged .c-hero__overlay {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition-property: clip-path, -webkit-clip-path;
  transition-duration: 2.2s;
  transition-timing-function: var(--cdd-ease-hero-mask);
  will-change: clip-path;
}
.cdd-hero-staged.is-loaded .c-hero__bg,
.cdd-hero-staged.is-loaded .c-hero__overlay {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Hero headline split into per-word fade-blur (no mask / no clip). */
.cdd-hero-staged .c-hero__heading .cdd-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  filter: blur(0.5rem);
  transition-property: opacity, transform, filter;
  transition-duration: var(--cdd-dur-load);
  transition-timing-function: var(--cdd-ease-load);
  will-change: opacity, transform, filter;
}
.cdd-hero-staged.is-loaded .c-hero__heading .cdd-word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Hero eyebrow / lead / buttons cascade (per-element transition-delay inline). */
.cdd-hero-staged .cdd-stagger-fade {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  filter: blur(0.5rem);
  transition-property: opacity, transform, filter;
  transition-duration: var(--cdd-dur-load);
  transition-timing-function: var(--cdd-ease-load);
  will-change: opacity, transform, filter;
}
.cdd-hero-staged.is-loaded .cdd-stagger-fade {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* -------------------------------------------------
   [data-reveal] is a TRIGGER ONLY. The container itself doesn't move
   or fade — only its inner content (cdd-fade-blur, data-reveal-stagger
   children) animates once the parent enters the viewport.
   ------------------------------------------------- */

/* Stagger — grid/list children entering in sequence */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 6rem, 0);
  transition-property: opacity, transform;
  transition-duration: var(--cdd-dur-reveal-sm);
  transition-timing-function: var(--cdd-ease-reveal);
  will-change: opacity, transform;
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay: 0s; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay: calc(var(--cdd-stagger-grid) * 1); }
[data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: calc(var(--cdd-stagger-grid) * 2); }
[data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: calc(var(--cdd-stagger-grid) * 3); }
[data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: calc(var(--cdd-stagger-grid) * 4); }
[data-reveal-stagger].is-visible > *:nth-child(6)  { transition-delay: calc(var(--cdd-stagger-grid) * 5); }
[data-reveal-stagger].is-visible > *:nth-child(7)  { transition-delay: calc(var(--cdd-stagger-grid) * 6); }
[data-reveal-stagger].is-visible > *:nth-child(8)  { transition-delay: calc(var(--cdd-stagger-grid) * 7); }
[data-reveal-stagger].is-visible > *:nth-child(9)  { transition-delay: calc(var(--cdd-stagger-grid) * 8); }
[data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: calc(var(--cdd-stagger-grid) * 9); }

/* Fade-up + blur — for headings/text/buttons inside [data-reveal] sections.
   Activates when the parent gets .is-visible. Per-element transition-delay
   can be set inline (style="transition-delay: 0.2s") for cascades. */
.cdd-fade-blur {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  filter: blur(0.6rem);
  transition-property: opacity, transform, filter;
  transition-duration: var(--cdd-dur-reveal);
  transition-timing-function: var(--cdd-ease-reveal);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible .cdd-fade-blur,
[data-reveal-stagger].is-visible .cdd-fade-blur {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* -------------------------------------------------
   Navigation drop-in
   ------------------------------------------------- */
.cdd-nav-drop {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transition-property: opacity, transform;
  transition-duration: 1100ms;
  transition-timing-function: var(--cdd-ease-load);
  will-change: opacity, transform;
}
.cdd-nav-drop.is-loaded {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* -------------------------------------------------
   Parallax / zoom utilities
   data-parallax="0.15" → JS writes --parallax-y on scroll
   data-zoom="0.4"     → JS writes --cdd-zoom progressively
   ------------------------------------------------- */
[data-parallax],
[data-zoom] {
  --parallax-y: 0px;
  --cdd-zoom: 1;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--cdd-zoom));
  will-change: transform;
}

/* -------------------------------------------------
   3D tilt on hover
   ------------------------------------------------- */
[data-tilt] {
  --cdd-tilt-x: 0deg;
  --cdd-tilt-y: 0deg;
  transform-style: preserve-3d;
  transform: perspective(1200px)
             rotateX(var(--cdd-tilt-x))
             rotateY(var(--cdd-tilt-y));
  transition: transform 600ms var(--cdd-ease-reveal);
  will-change: transform;
}
[data-tilt].is-tilting {
  transition: transform 120ms linear;
}

/* -------------------------------------------------
   Lenis smooth scroll — recommended overrides
   ------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* -------------------------------------------------
   Reduced motion — kill it all
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] > *,
  .cdd-fade-blur,
  .cdd-hero-staged .c-hero__bg,
  .cdd-hero-staged .c-hero__overlay,
  .cdd-hero-staged .c-hero__heading .cdd-word,
  .cdd-hero-staged .cdd-stagger-fade,
  .cdd-nav-drop,
  [data-parallax],
  [data-zoom],
  [data-tilt] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cdd-hero-staged .c-hero__bg,
  .cdd-hero-staged .c-hero__overlay {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}