/* animations.css — Full animation styles for Databerg.
   Loaded after styles.css. Only adds motion; does not override layout. */

/* ─── Scroll Progress Bar ─── */
/* Set inline in animations.js */

/* ─── Hero Word Reveal ─── */
.hero h1 .anim-word {
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 0.15em;
}

.hero h1 .anim-word-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* ─── Smooth Section Transitions ─── */
.section h2,
.page-hero-inner h1,
.cta-inner h2 {
  will-change: transform, opacity;
}

/* ─── Card Tilt ─── */
.cap-card,
.stage-card,
.principle-card {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ─── Parallax Hero ─── */
.hero-bg {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ─── Stagger Grid Children ─── */
.cap-grid > *,
.stagger-grid > * {
  will-change: transform, opacity;
}

/* ─── Shift Rows ─── */
.shift-row {
  will-change: transform, opacity;
}

/* ─── Link Arrow Smooth ─── */
.link-arrow span {
  will-change: transform;
  display: inline-block;
}

/* ─── CTA Inner ─── */
.cta-inner {
  will-change: transform, opacity;
}

/* ─── Footer ─── */
.site-footer {
  will-change: transform, opacity;
}

/* ─── FAQ Items ─── */
.faq-item,
details {
  will-change: transform, opacity;
}

/* ─── Page Hero Inner ─── */
.page-hero-inner > * {
  will-change: transform, opacity;
}

/* ─── Section Fades ─── */
.section,
.section-dark,
.section-alt {
  will-change: opacity;
}

/* ─── Button Ripple Effect ─── */
.btn-light,
.btn-outline,
.link-arrow {
  position: relative;
  overflow: hidden;
}

/* ─── Magnetic Button ─── */
.link-arrow,
.btn-light,
.btn-outline {
  will-change: transform;
}

/* ─── Image Reveal ─── */
.hero-bg,
.page-hero img {
  will-change: transform, opacity;
}

/* ─── Noise Overlay ─── */
/* Set inline in animations.js */

/* ─── Page Transition Overlay ─── */
/* Set inline in animations.js */

/* ─── Nav Link Transitions ─── */
.site-nav a {
  transition: color 0.4s ease;
}

/* ─── Service Card Numbers ─── */
.cap-card span[style*="position: absolute"] {
  pointer-events: none;
}

/* ─── Staggered List Items ─── */
ul li,
ol li {
  will-change: transform, opacity;
}

/* ─── Contact Form Fields ─── */
.field {
  will-change: transform, opacity;
}

/* ─── Context Band ─── */
.context-band p {
  will-change: transform, opacity;
}

/* ─── Header Scroll Animation ─── */
.site-header {
  will-change: transform;
}