/* =============================================
   Mayfly — Animation System
   Scroll reveals · Marquee · Keyframes
   ============================================= */

/* ── Easing ────────────────────────────────── */
:root {
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scroll Progress Bar ───────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
  transition: transform 80ms linear;
}

/* ── Reveal: base state ────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-28px);
}

[data-reveal="right"] {
  transform: translateX(28px);
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="scale-fade"] {
  transform: scale(0.96);
  opacity: 0;
}

/* ── Reveal: visible state ─────────────────── */
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Stagger delays ────────────────────────── */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.26s; }
[data-delay="4"] { transition-delay: 0.38s; }
[data-delay="5"] { transition-delay: 0.52s; }
[data-delay="6"] { transition-delay: 0.68s; }

/* ── Keyframes ─────────────────────────────── */

/* Marquee continuous scroll */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Background glow drift */
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33%       { transform: translate(40px, -30px) scale(1.08); opacity: 0.8; }
  66%       { transform: translate(-20px, 20px) scale(0.96); opacity: 0.5; }
}

/* Slow glow pulse */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}

/* Scan line in hero */
@keyframes scan-line {
  0%        { top: 0%; opacity: 0; }
  3%        { opacity: 0.5; }
  97%       { opacity: 0.5; }
  100%      { top: 100%; opacity: 0; }
}

/* Scroll indicator bounce */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Fade in up (for page-load elements) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer effect on featured card border */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Nav show/hide on scroll direction */
@keyframes nav-show {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Counter pop when it finishes */
@keyframes counter-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Marquee Component ─────────────────────── */
.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ── Page-load stagger (no IntersectionObserver needed) ── */
.load-1 { animation: fade-up 0.6s var(--ease-out-expo) 0.1s both; }
.load-2 { animation: fade-up 0.6s var(--ease-out-expo) 0.22s both; }
.load-3 { animation: fade-up 0.6s var(--ease-out-expo) 0.36s both; }
.load-4 { animation: fade-up 0.6s var(--ease-out-expo) 0.52s both; }
.load-5 { animation: fade-up 0.6s var(--ease-out-expo) 0.7s both; }

/* ── Gradient text ─────────────────────────── */
.text-gradient {
  background: linear-gradient(130deg, #06b6d4 0%, #3b82f6 45%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(130deg, #f59e0b 0%, #fcd34d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hover card lift ───────────────────────── */
.card-lift {
  transition:
    transform 0.3s var(--ease-out-quart),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.08);
}

/* ── Featured card gradient border ─────────── */
.card-featured-border {
  background:
    linear-gradient(var(--surface, #0d1421), var(--surface, #0d1421)) padding-box,
    linear-gradient(160deg, #06b6d4, #3b82f6, #8b5cf6) border-box;
  border: 1px solid transparent !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track { animation: none; }
  .scroll-progress { display: none; }
}