/* ─────────────────────────────────────────────────────────────────────────────
   scroll-animations.css  —  Layered scroll animations for index.html
   ─────────────────────────────────────────────────────────────────────────────
   TO DISABLE ALL NEW ANIMATIONS: comment out the matching <link> tag in
   index.html (and the companion <script> tag for scroll-animations.js).
   Nothing else needs to change.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Honour reduced-motion preference ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .word-inner,
  .about-img-frame,
  .section-eyebrow-line,
  .about-skill {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ─── Word-by-word heading reveal ────────────────────────────────────────────
   JS (scroll-animations.js) wraps each word in:
     <span class="word-outer">
       <span class="word-inner" style="transition-delay: Nms">word</span>
     </span>
   and adds .split-words to the heading element.
   ─────────────────────────────────────────────────────────────────────────── */
.word-outer {
  display: inline-block;
  overflow: hidden;
  /* prevent descender clipping (g, y, p…) */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}

/* Override the generic reveal fade-up on word-split headings —
   the individual words animate instead of the whole element. */
.js-ready .split-words.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.js-ready .split-words.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

.js-ready .word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.45s ease;
}
.js-ready .split-words.is-visible .word-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Enhanced work-card entrance (scale + fade) ─────────────────────────────
   Replaces the plain translateY(28px) from the base .reveal rule.
   Existing .reveal-delay-N stagger classes are preserved.
   ─────────────────────────────────────────────────────────────────────────── */
.js-ready .work-card.reveal {
  transform: translateY(48px) scale(0.96);
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .work-card.reveal.visible {
  transform: translateY(0) scale(1);
}

/* ─── About photo clip-path wipe ─────────────────────────────────────────────
   The frame wipes in from top → bottom, offset slightly after the wrapper
   fades up so both motions feel layered.
   ─────────────────────────────────────────────────────────────────────────── */
.js-ready .about-img-wrap.reveal .about-img-frame {
  clip-path: inset(0 0 100% 0 round 24px);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.js-ready .about-img-wrap.reveal.visible .about-img-frame {
  clip-path: inset(0 0 0% 0 round 24px);
}

/* ─── Eyebrow line draw ───────────────────────────────────────────────────── */
.js-ready .section-eyebrow.reveal .section-eyebrow-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.js-ready .section-eyebrow.reveal.visible .section-eyebrow-line {
  transform: scaleX(1);
}

/* ─── Skills chips stagger ───────────────────────────────────────────────────
   JS injects --chip-delay on each chip. Chips are hidden until the
   .about-skills container receives .visible from the base reveal observer.
   ─────────────────────────────────────────────────────────────────────────── */
.js-ready .about-skills:not(.visible) .about-skill {
  opacity: 0;
  transform: scale(0.85) translateY(8px);
}

@keyframes sa-chipIn {
  from { opacity: 0; transform: translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: none; }
}

.js-ready .about-skills.visible .about-skill {
  animation: sa-chipIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--chip-delay, 0ms);
}