/* ============================================================
   AUGESTO — ANIMATION INITIAL STATES
   Sets "before" state for GSAP targets.
   ============================================================ */

[data-gsap="fade-up"],
[data-gsap="fade-in-delay"],
[data-gsap="stagger-up"] {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

[data-gsap="scale-in"] {
  opacity: 0;
  transform: scale(0.95);
  will-change: opacity, transform;
}

[data-gsap="stagger-scale"] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

[data-gsap="split-words"] .word { display: inline-block; overflow: hidden; }
[data-gsap="split-words"] .word .char {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

[data-gsap="marquee"] { display: flex; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  [data-gsap] { opacity: 1 !important; transform: none !important; }
  [data-gsap="split-words"] .word .char { transform: none !important; }
}

/* ── Work card hover ──────────────────────────────────── */
.work__item {
  transition: transform var(--dur-base) var(--ease-out);
}
.work__item:hover { transform: translateY(-4px); }

.work__item-media { overflow: hidden; }
.work__item-img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.work__item:hover .work__item-img { transform: scale(1.03); }

/* ── Service accordion ────────────────────────────────── */
.service__item {
  border-top: 1px solid var(--clr-border-dark);
  transition: border-color var(--dur-base) var(--ease-out);
}

.service__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out),
              padding    var(--dur-base) var(--ease-out);
}
.service__item.is-open .service__body {
  max-height: 320px;
  padding-bottom: var(--sp-8);
}
.service__toggle-icon {
  display: inline-block;
  font-size: var(--fs-md);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-spring);
}
.service__item.is-open .service__toggle-icon { transform: rotate(45deg); }

/* ── Page transition ──────────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--clr-accent);
  z-index: var(--z-modal);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}