/* ================================================
   ANIMATIONS.CSS
   Remove this entire file to disable all animations.
   Each section below is independent and can be
   individually commented out.
   ================================================ */

/* ---------- pixel card hover ---------- */
.pixel-card-overlay {
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  pointer-events:none;
}

.pixel-card-overlay .px {
  opacity:0;
  transition:opacity 0.2s ease;
}

.fact-card.is-hovered .pixel-card-overlay .px.is-visible {
  opacity:1;
}

/* ---------- click spark ---------- */
.click-spark-particle {
  position:fixed;
  border-radius:0;
  pointer-events:none;
  z-index:9999;
  will-change:transform, opacity;
  animation:spark-fly 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes spark-fly {
  0% {
    opacity:1;
    transform:translate(0, 0) scale(1);
  }
  100% {
    opacity:0;
    transform:translate(var(--sx), var(--sy)) scale(0);
  }
}

/* ---------- stroke text ---------- */
[data-stroke-text] {
  -webkit-text-stroke:2px var(--sage);
  color:transparent;
  animation:stroke-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

[data-stroke-text] .stroke-char {
  display:inline-block;
  animation:stroke-char-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay:var(--char-delay, 0s);
  -webkit-text-stroke:2px var(--sage);
  color:transparent;
}

@keyframes stroke-fill {
  0% {
    -webkit-text-stroke:2px var(--sage);
    color:transparent;
  }
  60% {
    -webkit-text-stroke:2px var(--sage);
    color:transparent;
  }
  100% {
    -webkit-text-stroke:0px var(--sage);
    color:var(--sage);
  }
}

@keyframes stroke-char-fill {
  0%, 50% {
    -webkit-text-stroke:2px var(--sage);
    color:transparent;
  }
  100% {
    -webkit-text-stroke:0px var(--sage);
    color:var(--sage);
  }
}

/* ---------- gallery slide transitions ---------- */
@keyframes revealFromRight {
  0%   { clip-path:polygon(100% 0%,100% 0%,100% 25%,100% 50%,100% 75%,100% 100%,100% 100%); }
  55%  { clip-path:polygon(100% 0%,58% 0%,44% 25%,58% 50%,44% 75%,58% 100%,100% 100%); }
  100% { clip-path:polygon(100% 0%,0% 0%,0% 25%,0% 50%,0% 75%,0% 100%,100% 100%); }
}

@keyframes revealFromLeft {
  0%   { clip-path:polygon(0% 0%,0% 0%,0% 25%,0% 50%,0% 75%,0% 100%,0% 100%); }
  55%  { clip-path:polygon(0% 0%,42% 0%,56% 25%,42% 50%,56% 75%,42% 100%,0% 100%); }
  100% { clip-path:polygon(0% 0%,100% 0%,100% 25%,100% 50%,100% 75%,100% 100%,0% 100%); }
}

.gallery-slide.anim-right { animation:revealFromRight 0.85s cubic-bezier(.6,0,.3,1) forwards; }
.gallery-slide.anim-left  { animation:revealFromLeft 0.85s cubic-bezier(.6,0,.3,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .gallery-slide.anim-right,
  .gallery-slide.anim-left {
    animation:none !important;
    clip-path:none !important;
  }
  [data-stroke-text],
  [data-stroke-text] .stroke-char {
    animation:none !important;
    -webkit-text-stroke:0px var(--sage);
    color:var(--sage);
  }
  .click-spark-particle {
    animation:none !important;
    display:none;
  }
}