/* ═══════════════════════════════════════════════════════════════
   NUANCE COMMERCIAL — Cinematic Scroll Animations Addon CSS
   Add this AFTER your main style.css
   No existing styles are modified — purely additive
═══════════════════════════════════════════════════════════════ */

:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* ── Performance hint ───────────────────────────────────────── */
.nc-up, .nc-left, .nc-right, .nc-glide,
.nc-pop, .nc-tilt, .nc-tilt-l, .nc-cta,
.nc-stagger > *, .nc-headline .nc-line-inner {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* ════════════════════════════════════════════════════════════
   1. CINEMATIC FADE-UP
   Element rises from below with slow, confident deceleration.
   Used for: section headers, labels, paragraphs
════════════════════════════════════════════════════════════ */
.nc-up {
  opacity: 0;
  transform: translateY(65px);
  transition:
    opacity 1.05s var(--ease-out-expo),
    transform 1.05s var(--ease-out-expo);
}
.nc-up.nc-in {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   2. POWER SLIDE FROM LEFT
   Strong directional entry — like a stage reveal.
   Used for: images, left-column content
════════════════════════════════════════════════════════════ */
.nc-left {
  opacity: 0;
  transform: translateX(-80px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}
.nc-left.nc-in {
  opacity: 1;
  transform: translateX(0);
}

/* ════════════════════════════════════════════════════════════
   3. POWER SLIDE FROM RIGHT
   Mirror of nc-left. Used for: right-column content, forms
════════════════════════════════════════════════════════════ */
.nc-right {
  opacity: 0;
  transform: translateX(80px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}
.nc-right.nc-in {
  opacity: 1;
  transform: translateX(0);
}

/* ════════════════════════════════════════════════════════════
   4. GLIDE (Blur + Float)
   Premium motion: element drifts up while coming into focus.
   Used for: owner block, highlight cards
════════════════════════════════════════════════════════════ */
.nc-glide {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(10px);
  transition:
    opacity 1.1s var(--ease-out-expo),
    transform 1.1s var(--ease-out-expo),
    filter 1.1s var(--ease-out-expo);
}
.nc-glide.nc-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ════════════════════════════════════════════════════════════
   5. SPRING POP (Scale)
   Bouncy entrance. Used for: badges, icons, small elements
════════════════════════════════════════════════════════════ */
.nc-pop {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.65s var(--ease-spring),
    transform 0.65s var(--ease-spring);
}
.nc-pop.nc-in {
  opacity: 1;
  transform: scale(1);
}

/* ════════════════════════════════════════════════════════════
   6. 3D TILT-IN FROM RIGHT
   Cinematic 3D entry — like a camera dolly move.
   Used for: right-side images, key feature blocks
════════════════════════════════════════════════════════════ */
.nc-tilt {
  opacity: 0;
  transform: perspective(900px) rotateY(22deg) translateX(70px);
  transition:
    opacity 1s var(--ease-out-expo),
    transform 1s var(--ease-out-expo);
}
.nc-tilt.nc-in {
  opacity: 1;
  transform: perspective(900px) rotateY(0deg) translateX(0);
}

/* ════════════════════════════════════════════════════════════
   7. 3D TILT-IN FROM LEFT (mirror)
   Used for: left-side images, left content blocks
════════════════════════════════════════════════════════════ */
.nc-tilt-l {
  opacity: 0;
  transform: perspective(900px) rotateY(-22deg) translateX(-70px);
  transition:
    opacity 1s var(--ease-out-expo),
    transform 1s var(--ease-out-expo);
}
.nc-tilt-l.nc-in {
  opacity: 1;
  transform: perspective(900px) rotateY(0deg) translateX(0);
}

/* ════════════════════════════════════════════════════════════
   8. STAGGER GRID
   Add nc-stagger to a grid parent. Children fan in one by one.
   JS dynamically assigns transition-delay per child.
   Used for: services grid, trust items
════════════════════════════════════════════════════════════ */
.nc-stagger > * {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}
.nc-stagger.nc-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   9. HEADLINE LINE MASK REVEAL
   Each line slides up from behind a hidden overflow mask.
   Text appears to emerge from below — editorial/luxury feel.
   JS wraps each <br>-separated line in .nc-line > .nc-line-inner
   Used for: h2 section headings
════════════════════════════════════════════════════════════ */
.nc-headline .nc-line {
  display: block;
  overflow: hidden;
  line-height: 1.15;
}
.nc-headline .nc-line-inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 0.95s var(--ease-out-expo),
    opacity 0.1s linear;
}
.nc-headline.nc-in .nc-line-inner {
  transform: translateY(0);
  opacity: 1;
}
/* Stagger each line */
.nc-headline.nc-in .nc-line:nth-child(1) .nc-line-inner { transition-delay: 0.02s; }
.nc-headline.nc-in .nc-line:nth-child(2) .nc-line-inner { transition-delay: 0.12s; }
.nc-headline.nc-in .nc-line:nth-child(3) .nc-line-inner { transition-delay: 0.22s; }
.nc-headline.nc-in .nc-line:nth-child(4) .nc-line-inner { transition-delay: 0.32s; }

/* ════════════════════════════════════════════════════════════
   10. CURTAIN IMAGE REVEAL
   A colored overlay slides across image (left→right entry,
   right→left exit), revealing the image underneath.
   The image gently scales from 1.08 to 1 simultaneously.
   Used for: about-img-wrap, why-img
════════════════════════════════════════════════════════════ */
.nc-curtain {
  position: relative;
  overflow: hidden;
}
/* The curtain element — injected as a pseudo */
.nc-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brown);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-circ);
  z-index: 3;
  pointer-events: none;
}
.nc-curtain.nc-in::after {
  transform: scaleX(0);
  transform-origin: right center;
}
/* Image starts slightly zoomed, relaxes on reveal */
.nc-curtain img,
.nc-curtain .nc-curtain-inner {
  transform: scale(1.08);
  transition: transform 1.1s var(--ease-out-expo) 0.2s;
}
.nc-curtain.nc-in img,
.nc-curtain.nc-in .nc-curtain-inner {
  transform: scale(1);
}

/* ════════════════════════════════════════════════════════════
   11. ACCENT BAR DRAW
   Bar grows from 0 to 40px — draws itself in view.
   Add nc-bar to .accent-bar instead of the regular class.
════════════════════════════════════════════════════════════ */
.nc-bar {
  width: 0 !important;
  transition: width 0.85s var(--ease-out-expo) 0.3s;
}
.nc-bar.nc-in {
  width: 40px !important;
}
.nc-bar.center {
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   12. CTA RISE (special for CTA band)
   Blurred, scaled-down entry with slow dramatic unfurl.
════════════════════════════════════════════════════════════ */
.nc-cta {
  opacity: 0;
  transform: translateY(55px) scale(0.96);
  filter: blur(8px);
  transition:
    opacity 1.2s var(--ease-out-expo),
    transform 1.2s var(--ease-out-expo),
    filter 1.2s var(--ease-out-expo);
}
.nc-cta.nc-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ════════════════════════════════════════════════════════════
   TRANSITION DELAY UTILITIES
   Use on individual elements to offset their entry
════════════════════════════════════════════════════════════ */
.nc-d1 { transition-delay: 0.08s !important; }
.nc-d2 { transition-delay: 0.16s !important; }
.nc-d3 { transition-delay: 0.24s !important; }
.nc-d4 { transition-delay: 0.32s !important; }
.nc-d5 { transition-delay: 0.40s !important; }
.nc-d6 { transition-delay: 0.48s !important; }
.nc-d7 { transition-delay: 0.56s !important; }
.nc-d8 { transition-delay: 0.64s !important; }

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION ACCESSIBILITY
   Respects system preference — no animations for users
   who prefer reduced motion.
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .nc-up, .nc-left, .nc-right, .nc-glide,
  .nc-pop, .nc-tilt, .nc-tilt-l, .nc-cta,
  .nc-stagger > *, .nc-headline .nc-line-inner,
  .nc-curtain::after, .nc-curtain img, .nc-bar {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    width: 40px !important;
    clip-path: none !important;
  }
  .nc-curtain::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — disable heavy 3D effects on small screens
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nc-tilt, .nc-tilt-l {
    transform: translateY(40px) !important;
    transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo) !important;
    filter: none !important;
  }
  .nc-tilt.nc-in, .nc-tilt-l.nc-in {
    transform: translateY(0) !important;
  }
  .nc-glide, .nc-cta {
    filter: none !important;
    transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo) !important;
  }
}