/* Apple-style scroll & hover effects */

/* Smooth scroll baseline (overridden by Lenis JS) */
html.lenis { height: auto; }
html.lenis, html.lenis body { overflow: hidden auto; }
html.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Reveal: progressive entrance with scale + translate + fade.
   More sophisticated than the basic .reveal in base.css. */
.fx-reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.fx-reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fx-reveal[data-fx-delay="1"] { transition-delay: 120ms; }
.fx-reveal[data-fx-delay="2"] { transition-delay: 240ms; }
.fx-reveal[data-fx-delay="3"] { transition-delay: 360ms; }
.fx-reveal[data-fx-delay="4"] { transition-delay: 480ms; }

/* Subtle x-slide variant */
.fx-reveal.fx-from-left  { transform: translateX(-50px) scale(0.97); }
.fx-reveal.fx-from-right { transform: translateX(50px) scale(0.97); }
.fx-reveal.fx-from-left.in,
.fx-reveal.fx-from-right.in { transform: translate(0) scale(1); }

/* 3D tilt card — applied via JS based on mouse position.
   Card lifts and rotates slightly toward the cursor. */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.fx-tilt-inner {
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.fx-tilt:hover .fx-tilt-inner { transform: translateZ(20px); }

/* Lift-glow on hover — for pricing cards */
.fx-lift {
  transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s cubic-bezier(.16,1,.3,1);
  will-change: transform, box-shadow;
}
.fx-lift:hover {
  transform: translateY(-8px);
  box-shadow:
    0 4px 12px rgba(15,23,42,0.06),
    0 30px 64px -16px rgba(20,184,166,0.28),
    0 16px 32px -12px rgba(15,23,42,0.18);
}

/* Hero parallax — applied via JS based on cursor position.
   Different layers move at different rates. */
.fx-parallax {
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* Sticky-pin variation: section title that pins as visuals scroll past */
.fx-pin {
  position: sticky;
  top: 6rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Section transition: background "shutter" effect between sections */
section[data-fx-section] {
  position: relative;
  overflow: hidden;
}
section[data-fx-section]::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent 8%);
  pointer-events: none;
  z-index: 1;
}

/* Underlines that draw in on link hover (Apple-style nav) */
.fx-underline {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s cubic-bezier(.16,1,.3,1);
}
.fx-underline:hover { background-size: 100% 1px; }

/* Cursor-following highlight on big section headings */
.fx-headline-mask {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #0f172a 0%, #14b8a6 50%, #0f172a 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: background-position 0.8s ease;
}
.fx-headline-mask:hover { background-position: 100% 100%; }