/* ══════════════════════════════════════════════
   REVEAL ANIMATIONS (Triggered via JS)
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

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

.reveal-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delays */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }
.stagger-7 { transition-delay: 700ms; }
.stagger-8 { transition-delay: 800ms; }
.stagger-9 { transition-delay: 900ms; }
.stagger-10 { transition-delay: 1000ms; }
.stagger-11 { transition-delay: 1100ms; }
.stagger-12 { transition-delay: 1200ms; }

/* ══════════════════════════════════════════════
   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 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner, 
.flip-card.hover .flip-card-inner { /* For mobile tap */
  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
══════════════════════════════════════════════ */
@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.5;
  animation: orb-float 20s infinite ease-in-out;
  pointer-events: none;
}
.orb-1 {
  width: 40vw; height: 40vw;
  background: var(--clr-accent-violet);
  top: -10%; left: -10%;
}
.orb-2 {
  width: 30vw; height: 30vw;
  background: var(--clr-accent-cyan);
  bottom: -10%; right: 10%;
  animation-delay: -10s;
}

@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); }
}