/* ═══════════════════════════════════════════════════════════════
   ANIMATION-SPECIFIC CSS
   Keyframes, transitions, and GSAP-controlled classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Split text: each word/char starts invisible ───────────── */
.split-text .word,
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotateX(40deg);
  transform-origin: bottom center;
}

/* ── Reveal helpers (GSAP adds these) ──────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(80px);
}

.reveal-down {
  opacity: 0;
  transform: translateY(-80px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-100px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(100px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
}

.reveal-rotate {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
}

.reveal-blur {
  opacity: 0;
  filter: blur(20px);
}

/* ── Text mask wipe ────────────────────────────────────────── */
.text-mask-wipe {
  clip-path: inset(0 100% 0 0);
}

.text-mask-wipe.revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── Kinetic stretch ───────────────────────────────────────── */
.kinetic-stretch {
  transform: scaleX(0.3);
  transform-origin: left center;
  opacity: 0;
}

/* ── Perspective fly-in ────────────────────────────────────── */
.perspective-fly {
  perspective: 800px;
}

.perspective-fly-inner {
  transform: translateZ(-300px) rotateX(20deg);
  opacity: 0;
}

/* ── Glitch snap ───────────────────────────────────────────── */
@keyframes glitch-flicker {
  0% { transform: translate(0); opacity: 1; }
  20% { transform: translate(-3px, 2px) skewX(2deg); opacity: 0.8; }
  40% { transform: translate(3px, -1px) skewX(-1deg); opacity: 0.9; }
  60% { transform: translate(-2px, 1px); opacity: 0.85; }
  80% { transform: translate(1px, -2px) skewX(1deg); opacity: 0.95; }
  100% { transform: translate(0); opacity: 1; }
}

.glitch-active {
  animation: glitch-flicker 0.3s ease-in-out;
}

/* ── Outline → Fill Typography ─────────────────────────────── */
.outline-text {
  -webkit-text-stroke: 2px var(--accent);
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 0.6s ease;
}

.outline-text.filled {
  -webkit-text-fill-color: var(--accent);
}

/* ── Color morph gradient bg ───────────────────────────────── */
.color-morph-bg {
  background-size: 400% 400%;
  background-image: linear-gradient(
    135deg,
    var(--bg-main) 0%,
    var(--bg-secondary) 25%,
    #F5F0DD 50%,
    var(--bg-secondary) 75%,
    var(--bg-main) 100%
  );
}

/* ── Section color transition (bg wipe) ────────────────────── */
.section-bg-wipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
}

/* ── Elastic bounce easing visual ──────────────────────────── */
.elastic-in {
  transform: scale(0);
}

/* ── Stagger children ──────────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}

/* ── Magnetic hover effect ─────────────────────────────────── */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Card tilt on hover ────────────────────────────────────── */
.tilt-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

/* ── Horizontal scroll track ───────────────────────────────── */
.horizontal-track {
  display: flex;
  width: max-content;
  gap: 24px;
}

/* ── Sticky card stack ─────────────────────────────────────── */
.sticky-card {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
}

/* ── Parallax layers ───────────────────────────────────────── */
.parallax-layer {
  will-change: transform;
}

/* ── Light sweep animation ─────────────────────────────────── */
@keyframes light-sweep-move {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Floating elements ─────────────────────────────────────── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(1deg); }
  50% { transform: translateY(-6px) rotate(-0.5deg); }
  75% { transform: translateY(-14px) rotate(0.5deg); }
}

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

/* ── Shimmer / Skeleton ────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* ── Typewriter cursor ─────────────────────────────────────── */
.typewriter-cursor::after {
  content: '|';
  animation: blink-cursor 0.8s infinite;
  color: var(--accent);
  font-weight: 300;
}

@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ── Section perspective tilt ──────────────────────────────── */
.section-tilt {
  transform-style: preserve-3d;
  perspective: 2000px;
}

.section-tilt-inner {
  transition: transform 0.6s ease;
}

/* ── Gradient border glow ──────────────────────────────────── */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--confirm-green), var(--purple));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}

.glow-border:hover::before {
  opacity: 0.6;
}

/* ── Phone grow-into-frame ─────────────────────────────────── */
.phone-grow-in {
  opacity: 0;
  transform: scale(0.6) translateY(60px);
}

/* ── Data viz animation ────────────────────────────────────── */
.bar-grow {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ── Wave text reveal ──────────────────────────────────────── */
.wave-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
}

/* ── Scramble effect placeholder ───────────────────────────── */
.scramble-text {
  font-family: monospace;
  letter-spacing: 2px;
}

/* ── SVG path draw ─────────────────────────────────────────── */
.svg-draw path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.svg-draw.drawn path {
  stroke-dashoffset: 0;
}

/* ── Reveal from blur ──────────────────────────────────────── */
.blur-reveal {
  filter: blur(30px);
  opacity: 0;
  transition: filter 0.8s ease, opacity 0.8s ease;
}

.blur-reveal.revealed {
  filter: blur(0);
  opacity: 1;
}

/* ── Split image reveal ────────────────────────────────────── */
.split-reveal-left {
  clip-path: inset(0 50% 0 0);
  transform: translateX(-20px);
  opacity: 0;
}

.split-reveal-right {
  clip-path: inset(0 0 0 50%);
  transform: translateX(20px);
  opacity: 0;
}

/* ── Noise grain intensity ─────────────────────────────────── */
.noise-heavy {
  opacity: 0.08 !important;
}

.noise-light {
  opacity: 0.02 !important;
}

/* ── Section collapse ──────────────────────────────────────── */
.section-collapse {
  transform-origin: top;
}

/* ── Scroll direction indicator ────────────────────────────── */
.scroll-dir-up .reveal-direction {
  transform: translateY(40px);
}

.scroll-dir-down .reveal-direction {
  transform: translateY(-40px);
}

/* ── Custom cursors per section ─────────────────────────────── */
.section-hero { cursor: default; }
.section-timeline { cursor: default; }
.section-ideas { cursor: default; }

/* ── Performance: will-change hints ────────────────────────── */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-filter {
  will-change: filter;
}

/* ── GPU layers for animated elements ──────────────────────── */
.gpu-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
}