/* ============================================================
   ANIMATIONS.CSS  —  Jake Barton Portfolio Style Kit
   All keyframes + animation utility classes
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */

/* Gradient text flow */
@keyframes gradient-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Floating / bobbing */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

/* Glow pulse on box-shadow */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--accent-glow),
                0 0 40px var(--accent-glow),
                inset 0 0 20px rgba(255, 255, 255, 0.04);
  }
  50% {
    box-shadow: 0 0 40px var(--accent-glow),
                0 0 80px var(--accent-glow),
                inset 0 0 40px rgba(255, 255, 255, 0.06);
  }
}

/* Shimmer / scan line across a surface */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Simple fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade in + slide up */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in + slide from left */
@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in + slide from right */
@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Stagger item reveal (override transform in nth-child rules) */
@keyframes stagger-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rotating text swap */
@keyframes text-swap-in {
  from {
    opacity: 0;
    transform: rotateX(-90deg) translateY(10px);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
}

@keyframes text-swap-out {
  from {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
  to {
    opacity: 0;
    transform: rotateX(90deg) translateY(-10px);
  }
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Border beam — animated border highlight */
@keyframes border-beam {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scan line wipe */
@keyframes scan {
  0%   { top: -5%; }
  100% { top: 105%; }
}

/* Typing cursor blink */
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Directional slide-in variants ───────────────────────── */

/* Slide up (stronger than base reveal) */
@keyframes slide-up-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide from left */
@keyframes slide-left-in {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide from right */
@keyframes slide-right-in {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Clip-path wipe reveal (left → right) for images */
@keyframes clip-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Hero word entrance */
@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Counter finish pulse */
@keyframes counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); color: var(--accent-light); }
  100% { transform: scale(1); }
}

/* ── Scroll Reveal variants ──────────────────────────────── */

/* Slide UP variant */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide FROM LEFT */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide FROM RIGHT */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children from left */
.stagger-children-left > * {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children-left.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.stagger-children-left.is-visible > *:nth-child(2) { transition-delay: 90ms;  opacity: 1; transform: none; }
.stagger-children-left.is-visible > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
.stagger-children-left.is-visible > *:nth-child(4) { transition-delay: 270ms; opacity: 1; transform: none; }
.stagger-children-left.is-visible > *:nth-child(5) { transition-delay: 360ms; opacity: 1; transform: none; }
.stagger-children-left.is-visible > *:nth-child(6) { transition-delay: 450ms; opacity: 1; transform: none; }

/* ── Hero word-reveal spans ─────────────────────────────── */
.hero-name {
  overflow: visible; /* words need overflow room */
}

.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* transition-delay set inline by JS */
}

.word-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Work card image clip-wipe ──────────────────────────── */
.work-card-img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Triggered when parent .work-card enters viewport */
.stagger-children.is-visible .work-card .work-card-img,
.reveal.is-visible .work-card .work-card-img,
.work-card.clip-ready .work-card-img {
  clip-path: inset(0 0% 0 0);
}

/* ── Work card hover enhancement ───────────────────────── */
.work-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.work-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ── Magnetic button base ───────────────────────────────── */
.magnetic {
  position: relative;
  display: inline-block;
  /* transform handled by JS */
}

/* ── Section header accent line ─────────────────────────── */
.section-header .eyebrow {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.section-header.is-visible .eyebrow,
.section-header.reveal.is-visible .eyebrow {
  clip-path: inset(0 0% 0 0);
}

/* ── About grid directional columns ─────────────────────── */
/* Applied via .reveal-left / .reveal-right on children */

/* ── Animation Utility Classes ────────────────────────────── */

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 217, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.animate-fade-in {
  animation: fade-in 0.6s ease forwards;
}

.animate-fade-up {
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-in {
  animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delay utilities */
.delay-100  { animation-delay: 100ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }
.delay-700  { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Scroll-reveal (JS in effects.js toggles .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* honours inline transition-delay */
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (JS adds .is-visible to parent) */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(9) { transition-delay: 640ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(n+10) { transition-delay: 720ms; opacity: 1; transform: none; }

/* ── Page Transition Overlay ──────────────────────────────── */

/* The curtain — starts covering the page, slides away upward on enter */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

/* Slide off the top (page has loaded — curtain lifts) */
.page-transition.is-out {
  transform: translateY(-100%);
}

/* Slide in from the bottom (navigating away — curtain drops) */
.page-transition.is-entering {
  transform: translateY(100%);
  transition: none; /* snap to bottom instantly before sliding in */
}

/* Fully covering the screen (navigating away) */
.page-transition.is-covering {
  pointer-events: all;
  transform: translateY(0);
}

/* ── Legacy loading screen (disabled) ──────────────────────── */
.loading-screen {
  display: none !important;
}

/* ── Hover Lift ───────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Text animations ──────────────────────────────────────── */
.rotating-text-wrapper {
  display: inline-block;
  perspective: 600px;
  overflow: hidden;
}

.rotating-text-word,
span.rotating-text {
  display: inline-block;
  animation: text-swap-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/*
 * Inline rotating word.
 * JS measures all words after fonts load, then sets a fixed pixel
 * width on the <em> equal to the widest word. Width never changes
 * again — only the text content and clip-path/opacity animate.
 */
.rt-wrap {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  overflow: visible;
}

.rt-sizer {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-style: italic;
  line-height: inherit;
}

.rt-word {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-style: italic;
  color: var(--accent-light);
  white-space: nowrap;
  overflow: visible;
}

@keyframes word-enter {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0%);   }
}

@keyframes word-exit {
  from { opacity: 1; transform: translateY(0%);    }
  to   { opacity: 0; transform: translateY(-100%); }
}

.rt-word {
  animation: word-enter 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rt-word.exiting {
  animation: word-exit 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Simpler inline variant: fixed-width <em> in normal flow ── */
em.rt-inline {
  display: inline-block;
  overflow: hidden;
  vertical-align: text-bottom;  /* align bottom of box to text baseline */
  height: 1.25em;                /* tall enough for one line of text */
  line-height: 1.25em;
  font-style: italic;
  color: var(--accent-light);
  white-space: nowrap;
  /* width set by JS after font measurement */
}

em.rt-inline .rt-text {
  display: inline-block;
  line-height: 1.25em;
  animation: word-enter 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

em.rt-inline .rt-text.exiting {
  animation: word-exit 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

span.rotating-text.exiting,
.rotating-text-word.exiting {
  animation: text-swap-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Caret / typing cursor */
.typing-caret::after {
  content: '|';
  color: var(--cyan);
  animation: caret-blink 1s step-end infinite;
}

/* ── Glass card hover enhancement ───────────────────────── */
.glass-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Stagger pop (scale + fade, for skill pills etc.) ─────── */
.stagger-pop > * {
  opacity: 0;
  transform: scale(0.88) translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-pop.is-visible > *:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(2)  { transition-delay: 40ms;  opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(3)  { transition-delay: 80ms;  opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(4)  { transition-delay: 120ms; opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(5)  { transition-delay: 160ms; opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(6)  { transition-delay: 200ms; opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(7)  { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(8)  { transition-delay: 280ms; opacity: 1; transform: none; }
.stagger-pop.is-visible > *:nth-child(n+9) { transition-delay: 320ms; opacity: 1; transform: none; }

/* ── Hero eyebrow slide-down ────────────────────────────── */
.hero-eyebrow {
  display: inline-block;
  opacity: 0;
  transform: translateY(-12px);
  animation: eyebrow-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes eyebrow-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section number accent (optional enhancement) ───────── */
.section-header {
  position: relative;
}

/* Animated underline on section h2 */
.section-header h2 {
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.section-header.is-visible h2::after {
  width: 100%;
}

/* ── Nav link hover underline draw ─────────────────────── */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ============================================================
   FRAMER-STYLE ENHANCEMENTS — added for visual overhaul
   ============================================================ */

/* ── Char split reveal ───────────────────────────────────── */
@keyframes char-in {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes char-out {
  from {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translateY(-100%) rotate(-5deg);
  }
}

/* Clip reveal — line by line, lines overflow hidden */
.line-reveal-wrap {
  overflow: hidden;
  display: block;
}
.line-reveal {
  display: block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Horizontal marquee (project strip) ─────────────────── */
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-x-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Grain/noise overlay ─────────────────────────────────── */
@keyframes grain-shift {
  0%   { transform: translate(0, 0) scale(1.05); }
  10%  { transform: translate(-2%, -3%) scale(1.05); }
  20%  { transform: translate(3%, 2%) scale(1.05); }
  30%  { transform: translate(-1%, 4%) scale(1.05); }
  40%  { transform: translate(4%, -1%) scale(1.05); }
  50%  { transform: translate(-3%, 3%) scale(1.05); }
  60%  { transform: translate(2%, -4%) scale(1.05); }
  70%  { transform: translate(-4%, 1%) scale(1.05); }
  80%  { transform: translate(1%, -2%) scale(1.05); }
  90%  { transform: translate(-2%, 4%) scale(1.05); }
  100% { transform: translate(0, 0) scale(1.05); }
}

/* ── Parallax utility classes (JS sets --scroll-y custom prop) */
[data-para="slow"]  { transform: translateY(calc(var(--scroll-y, 0) * -0.08px)); will-change: transform; }
[data-para="med"]   { transform: translateY(calc(var(--scroll-y, 0) * -0.15px)); will-change: transform; }
[data-para="fast"]  { transform: translateY(calc(var(--scroll-y, 0) * -0.25px)); will-change: transform; }

/* ── Stretched link overlay (card clickable area) ───────── */
.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Ticker / infinite scroll ───────────────────────────── */
.ticker-track {
  display: flex;
  width: max-content;
  animation: scroll-x 30s linear infinite;
  will-change: transform;
}
.ticker-track:hover {
  animation-play-state: paused;
}
.ticker-track--reverse {
  animation: scroll-x-reverse 30s linear infinite;
}

/* ── Number counter accent ───────────────────────────────── */
@keyframes num-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.num-popped { animation: num-pop 0.4s cubic-bezier(0.16,1,0.3,1); }

/* ── Video card shimmer loader ───────────────────────────── */
@keyframes video-shimmer {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* ── Oversized text reveal (hero) ───────────────────────── */
.xl-reveal {
  overflow: hidden;
  display: block;
}
.xl-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.xl-reveal.in > span {
  opacity: 1;
  transform: translateY(0);
}

/* ── Framer-style card hover tilt ───────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* ── Slide-in from bottom (big distance) ────────────────── */
.reveal-far {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-far.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Bold section divider text ───────────────────────────── */
@keyframes scroll-text {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}