/*
  Custom scroll/hover animation system for this site.
  Replaces Webflow's compiled IX2 interaction engine (webflow.js) with plain
  CSS + a small hand-written script: js/reveal.js.

  How it works:
  - Elements with [data-animate] start hidden (opacity: 0, offset position).
  - js/reveal.js watches them with an IntersectionObserver and, when each one
    scrolls into view, animates it to its resting state via the Web Animations
    API using the exact duration/easing/offset values recovered from the
    original Webflow interaction data, so the visual result is unchanged.
  - data-animate values: "up" | "left" | "right" (direction the element
    travels in from). data-delay is an optional extra delay in ms.
*/

[data-animate] {
  opacity: 0;
}

/* Prevents a flash of hidden content if JS is slow to attach (rare, but
   the reveal happens instantly instead of via IntersectionObserver). */
.no-js [data-animate] {
  opacity: 1;
}

/* ---- Scroll parallax ---- */
/* js/reveal.js applies a translateY directly to these elements as the page
   scrolls (was Webflow's continuous SCROLL_PROGRESS interactions: "Hero
   Animation" on .hero, "Photo Animation 2" on .photo-line-animation,
   "Parallax Image 2" on .cover-image). */
.hero:not(.for-inner),
.photo-line-animation,
.cover-image {
  will-change: transform;
}

/* ---- CTA button arrow hover (was Webflow interactions a-293 / a-294) ---- */
.button-with-animation {
  overflow: hidden;
}

.button-with-animation .text-button {
  display: block;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.button-with-animation .arrow-button {
  transform: translateY(200%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.button-with-animation:hover .text-button {
  transform: translateY(-250%);
}

.button-with-animation:hover .arrow-button {
  transform: translateY(0%);
}

/* ---- Social icon hover (was Webflow interactions a-215 / a-216) ---- */
.social-icon .social-circle {
  transform: scale3d(0, 0, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-icon:hover .social-circle {
  transform: scale3d(1, 1, 1);
}

/* ---- Skills / stat bars (was Webflow interaction a-297) ---- */
/* Each bar's resting width comes from its own CSS rule (.skills-overlay,
   .skills-overlay.lead, .skills-overlay.photoshop) same as always - the
   "grow" effect animates a transform (scaleX), not the width itself, so
   it's compositor-only and doesn't trigger layout. See js/reveal.js. */
.skills-overlay {
  transform-origin: 0 0;
}