/* ══════════════════════════════════════════════════════════════
   SC ANIMATION SYSTEM — scroll-triggered, one-time per page load
   Driven by [data-anim] HTML attributes + animations.js
══════════════════════════════════════════════════════════════ */

/* ── Base hidden states ─────────────────────────────────────── */
[data-anim] { opacity: 0; }

/* reveal uses clip-path; element stays at opacity:1 but is clipped */
[data-anim="reveal"] {
  opacity: 1;
  clip-path: inset(0 101% 0 0);
}

/* per-type transform starting positions are defined in keyframe `from`
   states (not here) so that IntersectionObserver uses the correct
   layout-based bounding rect instead of the transformed one */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes scFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scScaleIn {
  from { opacity: 0; transform: scale(0.93) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes scSlideLeft {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scSlideRight {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scReveal {
  to { clip-path: inset(0 0% 0 0); }
}

@keyframes scCursorBlink {
  50% { opacity: 0; }
}

/* ── Animated states (.sc-anim class added by JS) ───────────── */
[data-anim="fade-up"].sc-anim    { animation: scFadeUp    0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-anim="fade-in"].sc-anim    { animation: scFadeIn    0.9s  ease forwards; }
[data-anim="scale-in"].sc-anim   { animation: scScaleIn   0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-anim="slide-left"].sc-anim { animation: scSlideLeft 0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-anim="slide-right"].sc-anim{ animation: scSlideRight 0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-anim="reveal"].sc-anim     { animation: scReveal    0.86s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Typewriter cursor ──────────────────────────────────────── */
.sc-tw-cursor {
  display: inline-block;
  width: 1.5px;
  background: currentColor;
  height: 0.82em;
  vertical-align: -0.06em;
  margin-left: 2px;
  animation: scCursorBlink 0.62s steps(1) infinite;
}