/* ============================================================
   FPM — ANIMATIONS LAYER
   Cursor, particles, glitch, tilt, magnetic, parallax
   ============================================================ */

/* ─── SCROLL PROGRESS BAR ─── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #a8d8ff, var(--accent));
  background-size: 200% 100%;
  z-index: 9998;
  transition: width 0.1s linear;
  animation: shimmer-bar 2s linear infinite;
}
@keyframes shimmer-bar {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  mix-blend-mode: screen;
}
.cursor-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(79, 159, 232, 0.6);
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: all 0.12s ease;
}
.cursor.hover { width: 18px; height: 18px; }
.cursor-ring.hover { width: 56px; height: 56px; border-color: rgba(79,159,232,0.3); }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ─── HERO PARTICLES CANVAS ─── */
#hero-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* ─── HERO TITLE GLITCH ─── */
.hero__title--glitch {
  position: relative;
}
.hero__title--glitch::before,
.hero__title--glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-family: var(--ff-display);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  pointer-events: none;
  opacity: 0;
}
.hero__title--glitch::before {
  color: #4F9FE8;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-top 4s infinite 1s;
}
.hero__title--glitch::after {
  color: #ff4444;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-bot 4s infinite 1.5s;
}
@keyframes glitch-top {
  0%, 90%, 100% { opacity: 0; transform: none; }
  91% { opacity: 0.7; transform: translateX(-3px); }
  93% { opacity: 0.7; transform: translateX(3px); }
  95% { opacity: 0; }
}
@keyframes glitch-bot {
  0%, 88%, 100% { opacity: 0; transform: none; }
  89% { opacity: 0.6; transform: translateX(4px); }
  92% { opacity: 0.6; transform: translateX(-2px); }
  94% { opacity: 0; }
}

/* ─── TEXT SCRAMBLE ─── */
.scramble-char { display: inline; }

/* ─── SECTION REVEAL — DRAMATIC ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* ─── 3D CARD TILT ─── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.05s linear, box-shadow 0.3s;
}
.tilt-card:hover {
  box-shadow: var(--glow) !important;
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ─── MAGNETIC BUTTONS ─── */
.btn--magnetic {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

/* ─── NUMBER COUNTER FLASH ─── */
@keyframes counter-flash {
  0% { color: var(--white); text-shadow: 0 0 30px rgba(79,159,232,1); }
  100% { color: var(--accent); text-shadow: none; }
}
.counter-done {
  animation: counter-flash 0.5s ease forwards;
}

/* ─── FLOATING ELEMENTS ─── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.float-anim { animation: float-y 4s ease-in-out infinite; }
.float-anim-x { animation: float-x 5s ease-in-out infinite; }

/* ─── HERO ACCENT LINE ANIMATION ─── */
.hero__title em {
  position: relative;
}
.hero__title em::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
@keyframes underline-reveal {
  to { transform: scaleX(1); }
}

/* ─── STAT CARD GLOW PULSE ─── */
@keyframes card-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 40px rgba(79,159,232,0.2); }
}
.stat-card { animation: card-glow 4s ease-in-out infinite; }
.stat-card:nth-child(2) { animation-delay: 1s; }
.stat-card:nth-child(3) { animation-delay: 2s; }
.stat-card:nth-child(4) { animation-delay: 3s; }

/* ─── NOISE ANIMATED ─── */
body::after {
  animation: noise-move 0.5s steps(1) infinite;
}
@keyframes noise-move {
  0%   { background-position: 0 0; }
  20%  { background-position: -5% -10%; }
  40%  { background-position: -15% 5%; }
  60%  { background-position: 7% -25%; }
  80%  { background-position: -5% 15%; }
  100% { background-position: 15% 10%; }
}

/* ─── HERO ENTRANCE ─── */
.hero__eyebrow { animation: slide-down 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero__title   { animation: slide-up  0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.hero__sub     { animation: slide-up  0.8s cubic-bezier(0.16,1,0.3,1) 0.65s both; }
.hero__actions { animation: slide-up  0.7s cubic-bezier(0.16,1,0.3,1) 0.85s both; }
.hero__badges  { animation: slide-up  0.7s cubic-bezier(0.16,1,0.3,1) 1.0s  both; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

/* ─── BUTTON RIPPLE ─── */
.btn { overflow: hidden; position: relative; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ripple-out 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: scale(4); opacity: 0; }
}

/* ─── BORDER TRACE ─── */
.border-trace {
  position: relative;
}
.border-trace::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
  animation: trace-move 2s linear infinite paused;
}
.border-trace:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes trace-move {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── SECTION BG PARALLAX ─── */
.section--parallax-bg { overflow: hidden; }
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ─── COUNT UP BLAST ─── */
@keyframes num-blast {
  0% { transform: scale(1.5); opacity: 0; }
  60% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.stat-card__number.blasting {
  animation: num-blast 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── ABOUT LINE ACCENT ─── */
.about__text::before {
  content: '';
  display: block;
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, var(--accent), transparent);
  position: absolute;
  left: -20px; top: 0;
  transition: height 1.2s cubic-bezier(0.16,1,0.3,1);
  border-radius: 3px;
}
.about__text { position: relative; }
.about__text.revealed::before { height: 100%; }