/* =========================
   Motion Library — extra reveal variants, hover, parallax, marquee
   ========================= */

/* ---------- Reveal variants (set via [data-reveal=...]) ---------- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s ease;
}

[data-reveal="fade"] { /* default */ }
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(48px); }
[data-reveal="right"] { transform: translateX(-48px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="blur"]  { filter: blur(12px); }
[data-reveal="rotate"] { transform: rotate(-3deg) translateY(24px); transform-origin: left bottom; }
[data-reveal="clip-r"] { clip-path: inset(0 100% 0 0); }
[data-reveal="clip-l"] { clip-path: inset(0 0 0 100%); }
[data-reveal="clip-b"] { clip-path: inset(0 0 100% 0); }
[data-reveal="clip-t"] { clip-path: inset(100% 0 0 0); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger children with [data-reveal-stagger] */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.45s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.53s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.61s; }
[data-reveal-stagger].is-visible > *:nth-child(9) { transition-delay: 0.69s; }

/* Word-stagger split */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-word.is-visible > span {
  transform: translateY(0);
}

/* ---------- Floating motion (always-on) ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatXY {
  0% { transform: translate(0, 0); }
  33% { transform: translate(8px, -6px); }
  66% { transform: translate(-6px, -10px); }
  100% { transform: translate(0, 0); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  70% { box-shadow: 0 0 0 18px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes accentSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.float { animation: floatY 6s ease-in-out infinite; }
.float-xy { animation: floatXY 9s ease-in-out infinite; }
.breathe { animation: breathe 4s ease-in-out infinite; }
.pulse-ring { animation: pulseRing 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.blink { animation: blink 1.1s steps(2, end) infinite; }

/* ---------- Magnetic hover for cards ---------- */
.lift {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s ease,
              border-color 0.4s ease;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -28px rgba(20, 18, 14, 0.28);
}

/* Card spotlight follow (mouse-aware via JS sets --mx,--my %) */
.spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(31, 30, 29, 0.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Tilt wrapper — JS sets --rx --ry deg */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

/* ---------- Parallax helpers ---------- */
.parallax {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
  transition: transform 80ms linear;
}

/* ---------- Counter (CSS-only flicker on enter) ---------- */
.count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------- Marquee row ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 56px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee > * {
  flex: 0 0 auto;
  animation: drift 40s linear infinite;
  display: flex;
  gap: 56px;
}

/* ---------- Section transition: hairline sweep ---------- */
.section-rule-sweep {
  position: relative;
  height: 1px;
  background: var(--paper-line);
  overflow: hidden;
}
.section-rule-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: accentSweep 3.2s ease-in-out infinite;
}

/* ---------- Image reveal mask (clip from bottom) ---------- */
.img-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s cubic-bezier(0.7, 0, 0.2, 1);
}
.img-reveal.is-visible { clip-path: inset(0 0 0 0); }

/* ---------- Cursor-follow accent dot ---------- */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  transform: translate3d(var(--x, -50px), var(--y, -50px), 0) translate(-50%, -50%);
  mix-blend-mode: multiply;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 80ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cursor-dot.is-active { opacity: 0.7; }
.cursor-dot.is-hover { transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%) scale(4); opacity: 0.2; }

/* ---------- Number counter style ---------- */
@keyframes numFlicker {
  0% { opacity: 0; transform: translateY(8px); }
  60% { opacity: 0.6; }
  100% { opacity: 1; transform: translateY(0); }
}
.num-flicker.is-visible {
  animation: numFlicker 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}