/* ============================================================================
   ULF, ANIMATION LIBRARY
   ----------------------------------------------------------------------------
   Animations are designed to be performant (transform / opacity only) and
   honor `prefers-reduced-motion`. Reveal animations are triggered by the
   IntersectionObserver in animations.js by adding the `.in` class.
   ============================================================================ */

/* ----- Keyframes ----- */
@keyframes fadeIn         { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp         { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown       { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes fadeLeft       { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes fadeRight      { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn        { from { opacity: 0; transform: scale(0.94); }       to { opacity: 1; transform: none; } }
@keyframes blurIn         { from { opacity: 0; filter: blur(12px); }            to { opacity: 1; filter: none; } }
@keyframes shimmer        { 0% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }
@keyframes spinSlow       { to { transform: rotate(360deg); } }
@keyframes spinReverse    { to { transform: rotate(-360deg); } }
@keyframes pulseGlow      { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes marquee        { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes typewriterReveal { from { width: 0; } to { width: 100%; } }
@keyframes blink          { 50% { border-color: transparent; } }
@keyframes float          { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes scanlines      { 0% { background-position: 0 0; } 100% { background-position: 0 8px; } }
@keyframes drawLine       { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* ----- Utility animation classes (fire on load) ----- */
.fade-in          { animation: fadeIn 0.9s var(--t-base) both; }
.fade-up          { animation: fadeUp 1s cubic-bezier(.2,.9,.2,1) both; }
.fade-down        { animation: fadeDown 1s cubic-bezier(.2,.9,.2,1) both; }
.fade-left        { animation: fadeLeft 1s cubic-bezier(.2,.9,.2,1) both; }
.fade-right       { animation: fadeRight 1s cubic-bezier(.2,.9,.2,1) both; }
.scale-in         { animation: scaleIn 1s cubic-bezier(.2,.9,.2,1) both; }
.blur-in          { animation: blurIn 1.6s cubic-bezier(.2,.9,.2,1) both; }

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }
.delay-6 { animation-delay: 0.90s; }
.delay-7 { animation-delay: 1.05s; }
.delay-8 { animation-delay: 1.20s; }

/* ----- Reveal-on-scroll (paired with IntersectionObserver) ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(.2,.9,.2,1),
    transform 0.9s cubic-bezier(.2,.9,.2,1),
    filter 1.2s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="blur"]  { filter: blur(10px); transform: none; }

[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children that have data-stagger */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(.2,.9,.2,1),
    transform 0.8s cubic-bezier(.2,.9,.2,1);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* ----- Typewriter (motto) ----- */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-inline-end: 2px solid var(--accent);
  width: 0;
  animation:
    typewriterReveal 2.6s steps(34, end) 0.6s forwards,
    blink 0.85s step-end infinite;
  max-width: 100%;
}

/* ----- Floating emblem ----- */
.float-slow { animation: float 6s ease-in-out infinite; }

/* ----- Pulsing dot ----- */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  margin-inline-end: 0.5rem;
  position: relative;
  animation: pulseGlow 2.4s ease-in-out infinite;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--success);
  border-radius: 50%;
  animation: pulseGlow 2.4s ease-in-out infinite;
  opacity: 0.4;
}

/* ----- Page transition fade ----- */
.fade-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.9s ease;
  z-index: 99;
}
.fade-overlay.gone {
  opacity: 0;
  pointer-events: none;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .typewriter { width: 100%; border: none; animation: none; }
  .hero-emblem img { animation: none; }
  .marquee-track { animation: none; }
}

/* ----- Cursor accent (button hover) ----- */
.btn .arrow::before { content: '→'; }
[dir="rtl"] .btn .arrow::before { content: '←'; }