/* ════════════════════════════════════════════════════════════════════
   Krytz Animation Library — CSS
   ════════════════════════════════════════════════════════════════════ */

/* ── Scroll Reveal ──────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] { transform: translateY(0); }
[data-reveal="up"]   { transform: translateY(40px); }
[data-reveal="down"] { transform: translateY(-28px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"]{ transform: translateX(40px); }
[data-reveal="scale"]{ transform: scale(0.92); }
[data-reveal="blur"] { filter: blur(10px); transform: translateY(20px); }

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="blur"].is-visible  { filter: blur(0); transform: translateY(0); }

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger] > .is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Magnetic Buttons ───────────────────────────────────────────────── */
[data-magnetic] {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ── Spotlight (cursor-follow gradient) ────────────────────────────── */
[data-spotlight] {
  position: relative;
  --mx: 50%;
  --my: 50%;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    rgba(27, 42, 74, 0.15),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
[data-spotlight]:hover::before {
  opacity: 1;
}
[data-spotlight] > * { position: relative; z-index: 1; }

/* ── Tilt cards ─────────────────────────────────────────────────────── */
[data-tilt] {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Typewriter ─────────────────────────────────────────────────────── */
[data-typewriter]::after {
  content: '▌';
  display: inline-block;
  margin-left: 2px;
  color: var(--g);
  animation: blinkCursor 0.8s steps(2) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

/* ── Scroll Progress Bar ────────────────────────────────────────────── */
[data-scroll-progress] {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--g) 0%, #C8A45A 100%);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(27, 42, 74, 0.5);
}

/* ── Marquee ────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marqueeScroll 40s linear infinite;
  white-space: nowrap;
}
.marquee-reverse .marquee-track {
  animation-direction: reverse;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ── Gradient Border Animation ─────────────────────────────────────── */
.gradient-border {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-3);
  overflow: hidden;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--g),
    #C8A45A,
    #b8a8ee,
    var(--g)
  );
  animation: rotateGradient 4s linear infinite;
  z-index: 0;
}
.gradient-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--surface);
  border-radius: inherit;
  z-index: 1;
}
.gradient-border > * { position: relative; z-index: 2; }
@keyframes rotateGradient {
  to { transform: rotate(360deg); }
}

/* ── Shimmer (skeleton-style highlight) ─────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(27, 42, 74, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmerSlide 2.5s ease-in-out infinite;
}
@keyframes shimmerSlide {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ── Floating elements ─────────────────────────────────────────────── */
.float-slow { animation: floatY 6s ease-in-out infinite; }
.float-med  { animation: floatY 4s ease-in-out infinite; }
.float-fast { animation: floatY 2.5s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Pulse glow ────────────────────────────────────────────────────── */
.pulse-glow {
  animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 42, 74, 0.4); }
  50%      { box-shadow: 0 0 0 16px rgba(27, 42, 74, 0); }
}

/* ── Slide-in from sides for grid items ────────────────────────────── */
.grid-stagger > * {
  opacity: 0;
  transform: translateY(30px);
}
.grid-stagger.is-visible > * {
  animation: gridItemIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.grid-stagger.is-visible > *:nth-child(1) { animation-delay: 0.0s; }
.grid-stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.grid-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.grid-stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; }
.grid-stagger.is-visible > *:nth-child(5) { animation-delay: 0.32s; }
.grid-stagger.is-visible > *:nth-child(6) { animation-delay: 0.40s; }
.grid-stagger.is-visible > *:nth-child(7) { animation-delay: 0.48s; }
.grid-stagger.is-visible > *:nth-child(8) { animation-delay: 0.56s; }
@keyframes gridItemIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
}