/* ==========================================================================
   Animations & Effects
   ========================================================================== */

/* 1. Scroll-linked typography scaling */
.scroll-scale {
  display: inline-block;
  transform-origin: left center;
  will-change: transform;
}

/* 2. SVG clip-path/mask image reveal */
.reveal-image-container {
  overflow: hidden;
  position: relative;
}

/* Fallback-first: always visible */
.reveal-image {
  clip-path: none;
  transform: none;
  opacity: 1;
  transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Keep visible in all environments to avoid rendering regressions */
.js-reveal .reveal-image,
.js-reveal .reveal-image.is-revealed {
  clip-path: none;
  transform: none;
}

/* 3. Magnetic CTA hover (Base styles, JS handles the transform) */
.magnetic-cta {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.magnetic-cta-inner {
  display: inline-block;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. Section transition with subtle noise-gradient blend */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.section-blend {
  position: relative;
}

.section-blend::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
  z-index: 10;
}

.section-dark {
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.section-dark::after {
  background: linear-gradient(to bottom, transparent, var(--color-inverse-bg));
}

/* Page Transition Fade */
body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

body.fade-out {
  opacity: 0;
}

/* Fade in up animation disabled for reliability in LAN preview */
.fade-up,
.js-anim .fade-up,
.js-anim .fade-up.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }