/* ══════════════════════════════════════════════
   REVEAL ANIMATIONS (Triggered via JS)
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
  /* NO will-change here — it creates excessive compositor layers */
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
}
.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delays — 60ms steps (aligned with .motion-stagger) */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 60ms; }
.stagger-3 { transition-delay: 120ms; }
.stagger-4 { transition-delay: 180ms; }
.stagger-5 { transition-delay: 240ms; }
.stagger-6 { transition-delay: 300ms; }
.stagger-7 { transition-delay: 360ms; }
.stagger-8 { transition-delay: 420ms; }
.stagger-9 { transition-delay: 480ms; }
.stagger-10 { transition-delay: 540ms; }
.stagger-11 { transition-delay: 600ms; }
.stagger-12 { transition-delay: 660ms; }

/* Alias for legacy templates */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════
   3D TILT & FLIP EFFECTS
══════════════════════════════════════════════ */
/* Added to cards via JS mousemove */
.tilt-element {
  transition: transform 0.1s ease;
  transform-style: preserve-3d;
}
.tilt-inner {
  transform: translateZ(50px); /* Pops content out when tilted */
}

/* CSS Flip Card */
.flip-card {
  perspective: 1000px;
  background: transparent;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--motion-slow, 480ms) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card.hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--r-xl);
}
.flip-card-back {
  transform: rotateY(180deg);
  background: var(--clr-accent-primary);
  color: var(--clr-white);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   DECORATIVE ORBS — Performance Protocol
   RULE: NO filter:blur() on animated elements.
   blur() forces GPU recomposite on every frame.
   Use static radial-gradient backgrounds instead.
══════════════════════════════════════════════ */
.orb {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.35;
  /* Static — no animation, no filter, no blur */
  pointer-events: none;
}
.orb-1 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, var(--clr-accent-violet) 0%, transparent 70%);
  top: -10%; left: -10%;
}
.orb-2 {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, var(--clr-accent-cyan) 0%, transparent 70%);
  bottom: -10%; right: 10%;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor-blink { animation: cursor-blink 1s step-end infinite; }

/* ══════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════ */
.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--sp-16);
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  min-width: max-content;
}

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

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%) opacity(0.6);
  transition: filter var(--t-base);
}
.marquee-item:hover { filter: grayscale(0%) opacity(1); }
.marquee-item img { height: 40px; width: auto; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - (var(--sp-16) / 2))); }
}

/* ══════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-accent);
  z-index: var(--z-tooltip);
  transition: width 0.1s; /* JS driven fallback */
}

/* Native CSS Scroll Timeline if supported (Chrome 115+) */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    width: 100%;
    transform-origin: 0 50%;
    animation: scroll-progress-anim linear;
    animation-timeline: scroll(root block);
    transition: none;
  }
}
@keyframes scroll-progress-anim {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Reduced motion — complements motion-system.css global gate */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-zoom,
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-width {
    animation: none;
    width: var(--reveal-width-target, 100%) !important;
  }

  .marquee-track {
    animation: none;
  }

  .flip-card-inner {
    transition: none;
  }

  .tilt-element {
    transform: none !important;
  }

  .cursor-blink {
    animation: none;
    opacity: 1;
  }
}

/* Skills page — progress bar fill */
@keyframes reveal-width {
  from { width: 0; }
}
.reveal-width {
  animation: reveal-width var(--motion-slow, 480ms) var(--ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.skill-pill {
  transition:
    border-color var(--motion-fast, 150ms) var(--ease-standard),
    color var(--motion-fast, 150ms) var(--ease-standard),
    transform var(--motion-base, 280ms) var(--ease-emphasis),
    box-shadow var(--motion-base, 280ms) var(--ease-standard);
}
@media (hover: hover) {
  .skill-pill:hover {
    border-color: var(--clr-accent-primary) !important;
    color: var(--clr-accent-primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skill-pill:hover {
    transform: none;
  }
}

@keyframes kinetic-accent {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.home-hero__title-accent {
  background: var(--gradient-kinetic, linear-gradient(90deg, #60A5FA, #22D3EE, #3B82F6, #60A5FA));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: kinetic-accent 8s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-cta, 0 12px 28px -8px rgba(37, 99, 235, 0.45));
  }
}

@keyframes vs-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.vs-card-grid .premium-card:not(.is-visible),
.za-catalog-card:not(.is-visible) {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: vs-skeleton 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__title-accent {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--clr-accent-cyan, #22D3EE);
  }
  .vs-card-grid .premium-card:not(.is-visible),
  .za-catalog-card:not(.is-visible) {
    animation: none;
    background-image: none;
  }
  .btn-primary:hover {
    transform: none;
  }
}