/* =============================================
   ANIMATIONS: Reveal, Cursor, Grain, Keyframes
   ============================================= */

/* ========= REVEAL ANIMATIONS (JS-scoped for Progressive Enhancement) ========= */
/* When JS is disabled, elements remain visible. When JS adds .has-js, they fade in. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);
}
.has-js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.has-js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.95s var(--ease-out-expo), transform 0.95s var(--ease-out-expo);
}
.has-js .reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.has-js .reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.has-js .reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.has-js .reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.has-js .reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.has-js .reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

/* ========= SPLIT TEXT (per-character / per-line reveal) ========= */
.split-line {
  display: block;
  overflow: hidden;
}
.split-line .char,
.split-line .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out-expo);
}
.split-line.is-shown .char,
.split-line.is-shown .word {
  transform: translateY(0);
}

/* Hero h1 specific: animate each line of broken text */
.hero h1 .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}
.hero h1 .line-inner {
  display: inline-block;
  transform: translateY(120%) rotateX(-30deg);
  transform-origin: top center;
  opacity: 0;
  transition:
    transform 1.2s var(--ease-out-expo),
    opacity 0.8s ease;
}
.hero h1.is-shown .line-inner {
  transform: translateY(0) rotateX(0);
  opacity: 1;
}
.hero h1.is-shown .line-mask:nth-child(1) .line-inner { transition-delay: 0.05s; }
.hero h1.is-shown .line-mask:nth-child(2) .line-inner { transition-delay: 0.2s; }
.hero h1.is-shown .line-mask:nth-child(3) .line-inner { transition-delay: 0.35s; }

/* ========= CUSTOM CURSOR ========= */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--bg);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid var(--bg);
  transition:
    width 0.4s var(--ease-out-expo),
    height 0.4s var(--ease-out-expo),
    border-color 0.3s ease,
    background 0.3s ease,
    opacity 0.3s ease;
}
.cursor-ring.is-hover {
  width: 64px;
  height: 64px;
  border-color: transparent;
  background: rgba(196, 90, 62, 0.15);
}
.cursor-ring.is-text {
  width: 14px;
  height: 14px;
  background: var(--bg);
}

body.is-touch .cursor-dot,
body.is-touch .cursor-ring {
  display: none;
}

/* ========= FILM GRAIN ========= */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grain-shift 0.8s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5%, 3%); }
  50% { transform: translate(2%, -4%); }
  75% { transform: translate(-3%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ========= KEYFRAMES ========= */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes scroll-line {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ========= SECTION TRANSITION (Image-mask reveal) ========= */
.section-mask {
  position: relative;
}
.section-mask::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: var(--bg);
  transform: scaleY(1);
  transform-origin: top;
  z-index: 5;
  transition: transform 1.4s var(--ease-out-expo);
  pointer-events: none;
}
.section-mask.is-revealed::before {
  transform: scaleY(0);
}

/* ========= MAGNETIC BUTTON ========= */
.magnetic {
  display: inline-block;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo);
}
.magnetic > * {
  display: inline-block;
  will-change: transform;
  transition: transform 0.3s var(--ease-out-expo);
}

/* ========= REDUCED MOTION ========= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; }
  .hero h1 .line-inner { opacity: 1; transform: none; }
  .grain { display: none; }
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}