/* ============================================================
   shared/animation.css
   Scroll-triggered animations for Sandy's Portfolio
   Drop-in: add to every page <head> after shared.css
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0.  OVERFLOW GUARD
   Prevents initial translateX transforms (fade-left / fade-right)
   from creating a horizontal scrollbar or pushing the nav
   hamburger off-screen before animations fire.
───────────────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  /* Fixed-positioned elements (nav) are viewport-relative,
     so overflow-x: hidden on body does NOT clip them.      */
}

/* ─────────────────────────────────────────────────────────────
   1.  INITIAL HIDDEN STATES
   Elements start invisible / off-position.
   The JS adds .is-animated which transitions them into view.
───────────────────────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Slide up from below ── */
[data-animate="fade-up"] {
  transform: translateY(52px);
}
/* ── Slide down from above ── */
[data-animate="fade-down"] {
  transform: translateY(-52px);
}
/* ── Slide in from the LEFT  (moves →) ── */
[data-animate="fade-left"] {
  transform: translateX(-72px);
}
/* ── Slide in from the RIGHT (moves ←) ── */
[data-animate="fade-right"] {
  transform: translateX(72px);
}
/* ── Scale up from small ── */
[data-animate="zoom-in"] {
  transform: scale(0.8);
}
/* ── Scale down from large ── */
[data-animate="zoom-out"] {
  transform: scale(1.18);
}
/* ── Plain fade ── */
[data-animate="fade"] {
  /* opacity only */
}
/* ── Soft blur-in ── */
[data-animate="blur-in"] {
  filter: blur(12px);
  transform: translateY(24px);
}
/* ── Flip perspective entry ── */
[data-animate="flip-up"] {
  transform: perspective(600px) rotateX(18deg) translateY(36px);
  transform-origin: bottom center;
}

/* ─────────────────────────────────────────────────────────────
   2.  ANIMATED STATE  (JS adds .is-animated)
───────────────────────────────────────────────────────────── */
[data-animate].is-animated {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ─────────────────────────────────────────────────────────────
   3.  DELAY HELPERS  (data-delay="1" … "10" → 0.1s steps)
───────────────────────────────────────────────────────────── */
[data-delay="1"] {
  transition-delay: 0.08s;
}
[data-delay="2"] {
  transition-delay: 0.16s;
}
[data-delay="3"] {
  transition-delay: 0.24s;
}
[data-delay="4"] {
  transition-delay: 0.32s;
}
[data-delay="5"] {
  transition-delay: 0.4s;
}
[data-delay="6"] {
  transition-delay: 0.48s;
}
[data-delay="7"] {
  transition-delay: 0.56s;
}
[data-delay="8"] {
  transition-delay: 0.64s;
}
[data-delay="9"] {
  transition-delay: 0.72s;
}
[data-delay="10"] {
  transition-delay: 0.8s;
}

/* ─────────────────────────────────────────────────────────────
   4.  STAGGER CHILDREN
   Parent gets data-stagger="fade-up|zoom-in|fade-left…"
   Children inherit the animation + auto-spaced delays.
───────────────────────────────────────────────────────────── */
[data-stagger] > * {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger="fade-up"] > * {
  transform: translateY(44px);
}
[data-stagger="zoom-in"] > * {
  transform: scale(0.82);
}
[data-stagger="fade-left"] > * {
  transform: translateX(-56px);
}
[data-stagger="fade-right"] > * {
  transform: translateX(56px);
}
[data-stagger="fade"] > * {
  /* opacity only */
}
[data-stagger="flip-up"] > * {
  transform: perspective(500px) rotateX(16deg) translateY(28px);
  transform-origin: bottom center;
}

[data-stagger].is-animated > * {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ─────────────────────────────────────────────────────────────
   5.  SPLIT LEFT ↔ RIGHT
   Place data-split on a 2-column parent.
   First child slides from left, second from right.
───────────────────────────────────────────────────────────── */
[data-split] > *:first-child {
  opacity: 0;
  transform: translateX(-68px);
  will-change: transform, opacity;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-split] > *:last-child {
  opacity: 0;
  transform: translateX(68px);
  will-change: transform, opacity;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
[data-split].is-animated > *:first-child,
[data-split].is-animated > *:last-child {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   6.  FASTER / SLOWER MODIFIERS
───────────────────────────────────────────────────────────── */
[data-animate][data-speed="fast"] {
  transition-duration: 0.45s;
}
[data-animate][data-speed="slow"] {
  transition-duration: 1.1s;
}
[data-stagger][data-speed="fast"] > * {
  transition-duration: 0.4s;
}
[data-stagger][data-speed="slow"] > * {
  transition-duration: 0.95s;
}

/* ─────────────────────────────────────────────────────────────
   7.  SECTION REVEAL UNDERLINE
───────────────────────────────────────────────────────────── */
.reveal-line {
  position: relative;
  display: inline-block;
}
.reveal-line::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--orange, #ff6b2b);
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.reveal-line.is-animated::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   8.  COUNTER NUMBER ANIMATION
───────────────────────────────────────────────────────────── */
[data-count] {
  display: inline-block;
  transition: none;
}

/* ─────────────────────────────────────────────────────────────
   9.  FOOTER LOGO FIX
   Hides the 09 logo image inside the footer only.
   The top .nav .nav-logo img is unaffected.
───────────────────────────────────────────────────────────── */
.footer .footer-logo img {
  display: none;
}
.footer .footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.footer .footer-logo::after {
  content: "Sandy";
  font-family: "Sacramento", cursive;
  font-size: 26px;
  color: var(--orange, #ff6b2b);
  font-weight: 400;
  opacity: 0.85;
  transition: opacity 0.25s;
}
.footer .footer-logo:hover::after {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   10.  RESPECT USER PREFERENCE — disable all motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > *,
  [data-split] > *,
  [data-split] > *:last-child,
  .reveal-line::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .reveal-line::after {
    width: 100% !important;
  }
}