/* ============================================================
   BULLTRAFFIC — Animations
   Clean, purposeful. No flashy effects.
   ============================================================ */

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.anim-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.anim-fade-up.is-visible { opacity: 1; transform: none; }

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.anim-fade-in.is-visible { opacity: 1; }

.anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.anim-slide-left.is-visible { opacity: 1; transform: none; }

.anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.anim-slide-right.is-visible { opacity: 1; transform: none; }

.anim-clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.16,1,0.3,1);
}
.anim-clip-reveal.is-visible { clip-path: inset(0 0% 0 0); }

.anim-scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.anim-scale-up.is-visible { opacity: 1; transform: none; }

/* Stagger delays */
.stagger-1 { transition-delay: 60ms; }
.stagger-2 { transition-delay: 120ms; }
.stagger-3 { transition-delay: 180ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 300ms; }
.stagger-6 { transition-delay: 360ms; }

/* ================================================================
   GLITCH — kept minimal, rarely triggered
   ================================================================ */
.glitch { position: relative; display: inline-block; }
.glitch[data-glitch]::before,
.glitch[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
.glitch[data-glitch]::before { color: var(--yellow); clip-path: inset(20% 0 60% 0); }
.glitch[data-glitch]::after  { color: rgba(255,255,255,0.5); clip-path: inset(60% 0 20% 0); }
.glitch.is-glitching[data-glitch]::before { animation: g-before 0.25s steps(2) forwards; }
.glitch.is-glitching[data-glitch]::after  { animation: g-after  0.25s steps(2) forwards; }
@keyframes g-before {
  0%  { opacity:0.7; transform:translate(-2px,1px); }
  50% { transform:translate(2px,-1px); }
  100%{ opacity:0; transform:translate(0); }
}
@keyframes g-after {
  0%  { opacity:0.5; transform:translate(2px,-1px); }
  50% { transform:translate(-1px,1px); }
  100%{ opacity:0; transform:translate(0); }
}

/* ================================================================
   SVG LINE DRAW (timeline)
   ================================================================ */
.svg-line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16,1,0.3,1);
}
.svg-line-draw.is-visible { stroke-dashoffset: 0; }

/* ================================================================
   FLOAT
   ================================================================ */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.anim-float { animation: float 5s ease-in-out infinite; }

/* ================================================================
   HERO LABEL ENTRANCE
   ================================================================ */
@keyframes label-enter {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:none; }
}
.anim-label-enter { animation: label-enter 0.5s 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;
  }
  .anim-fade-up,.anim-fade-in,.anim-slide-left,.anim-slide-right,
  .anim-clip-reveal,.anim-scale-up {
    opacity: 1; transform: none; clip-path: none;
  }
  .page-loader { display: none; }
}

/* ================================================================
   MOBILE — reduce complexity
   ================================================================ */
@media (max-width: 768px) {
  .grid-bg { opacity: 0.4; }
}

/* ================================================================
   MAGIC TEXT — from Hyperplexed (background-pan + rotating stars)
   ================================================================ */
@keyframes background-pan {
  from { background-position: 0% center; }
  to   { background-position: -200% center; }
}
@keyframes star-scale {
  from, to { transform: scale(0); }
  50%      { transform: scale(1); }
}
@keyframes star-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

.magic {
  display: inline-block;
  position: relative;
}
.magic-text {
  animation: background-pan 4s linear infinite;
  background: linear-gradient(to right,
    #F5C518,
    #fff9d6,
    #ffe066,
    #ffffff,
    #F5C518
  );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.magic-star {
  --size: clamp(18px, 1.5vw, 28px);
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  animation: star-scale 700ms ease forwards;
  pointer-events: none;
}
.magic-star svg {
  animation: star-rotate 1200ms linear infinite;
  display: block;
  opacity: 0.85;
}
.magic-star svg path {
  fill: #F5C518;
  filter: drop-shadow(0 0 6px rgba(245,197,24,0.6));
}

/* ================================================================
   SPARKLE BUTTON — from jh3y (particles floating around button)
   ================================================================ */
@property --active {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.sparkle-button {
  position: relative;
  display: inline-flex;
}
.sparkle-button .particle-pen {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  pointer-events: none;
  overflow: visible;
}
.sparkle-button .particle {
  --duration: 6;
  --delay: 0;
  --alpha: 0.5;
  --size: 1;
  --x: 50;
  --y: 50;
  --origin-x: 0%;
  --origin-y: 0%;
  animation: particle-float calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite;
  fill: #F5C518;
  opacity: var(--alpha);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
@keyframes particle-float {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  5%   { transform: scale(calc(var(--size) * 0.8)); opacity: var(--alpha); }
  50%  { opacity: calc(var(--alpha) * 0.7); }
  100% {
    transform:
      translate(
        calc((var(--x) - 50) * 0.5px),
        calc((var(--y) - 50) * 0.5px)
      )
      scale(0);
    opacity: 0;
  }
}
.sparkle-button button:is(:hover, :focus-visible) ~ .particle-pen .particle {
  animation-play-state: running;
}
.sparkle-button button .spark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.sparkle-button button .spark::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    #F5C518 10%,
    transparent 20%
  );
  animation: spin 3s linear infinite;
  animation-play-state: paused;
}
.sparkle-button button:is(:hover, :focus-visible) .spark::before {
  animation-play-state: running;
}
.sparkle-button button .backdrop {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--bg);
  transition: background var(--t-fast);
}
.sparkle-button button:is(:hover, :focus-visible) .backdrop {
  background: var(--bg-solid);
}
.sparkle-button button .text {
  position: relative;
  z-index: 1;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   OFFSET SHADOW CARDS — from havardob (stacked paper effect)
   ================================================================ */
.card-offset {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245,197,24,0.2);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.card-offset::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(245,197,24,0.1);
  transform: translate(6px, 6px);
  z-index: -1;
  background: rgba(245,197,24,0.04);
}
.card-offset::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(245,197,24,0.06);
  transform: translate(12px, 12px);
  z-index: -2;
  background: rgba(245,197,24,0.02);
}
.card-offset:hover {
  transform: translate(-4px, -4px);
  box-shadow:
    8px 8px 0 rgba(245,197,24,0.15),
    14px 14px 0 rgba(245,197,24,0.07);
}

/* ================================================================
   GLOWING BORDER CARD — rotating conic gradient border
   ================================================================ */
.card-glow-border {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(20px,3vw,32px);
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(20px);
}
.card-glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 20%,
    #F5C518 40%,
    rgba(245,197,24,0.4) 50%,
    transparent 70%
  );
  animation: border-spin 4s linear infinite;
  animation-play-state: paused;
  z-index: -1;
}
.card-glow-border:hover::before {
  animation-play-state: running;
}
.card-glow-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--r-xl) - 2px);
  background: rgba(10,10,10,0.95);
  z-index: -1;
}
@keyframes border-spin {
  to { --angle: 360deg; }
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ================================================================
   GRADIENT LINE DIVIDERS
   ================================================================ */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,197,24,0.4) 30%,
    rgba(245,197,24,0.6) 50%,
    rgba(245,197,24,0.4) 70%,
    transparent 100%
  );
  position: relative;
  margin-block: 64px;
}
.divider-gradient::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: #F5C518;
  border-radius: 50%;
  box-shadow: 0 0 12px #F5C518;
}

/* ================================================================
   STAT NUMBER — count-up pulse
   ================================================================ */
@keyframes count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.stat-value.is-counting { animation: count-pop 0.3s ease; }

/* ================================================================
   SECTION TRANSITION — smooth clip reveal line
   ================================================================ */
.reveal-line {
  overflow: hidden;
  display: block;
}
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-visible .reveal-line > span { transform: translateY(0); }

/* ================================================================
   NEON TAG — small glowing label
   ================================================================ */
.neon-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(245,197,24,0.06);
  border: 1px solid rgba(245,197,24,0.25);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5C518;
  box-shadow: 0 0 20px rgba(245,197,24,0.1), inset 0 0 20px rgba(245,197,24,0.05);
}
.neon-tag-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #F5C518;
  box-shadow: 0 0 8px #F5C518;
  animation: pulse-dot 2s ease-in-out infinite;
}