/* ============ ANIMATIONS.CSS ============ */

@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.95); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nav-drop {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Hero video unblur */
.hero-bg {
  filter: blur(18px);
  transform: scale(1.05);
  opacity: 0.55;
  transition: filter 1400ms var(--ease-smooth),
              transform 1400ms var(--ease-smooth),
              opacity 1400ms var(--ease-smooth);
}
.hero-bg.is-loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* Slide-up */
.slide-up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 650ms var(--ease-smooth), transform 650ms var(--ease-smooth);
  will-change: opacity, transform;
}
.slide-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Reveal — default now includes blur that clears on is-visible */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(10px);
  transition: opacity 800ms var(--ease-smooth), transform 800ms var(--ease-smooth), filter 800ms var(--ease-smooth);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.reveal--left { transform: translate3d(-28px, 10px, 0); }
.reveal--right { transform: translate3d(28px, 10px, 0); }
.reveal--scale { transform: scale(0.94); }
.reveal--blur { filter: blur(14px); }
.reveal--none { opacity: 0; transform: none; filter: none; }

/* Stagger delays */
.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 480ms; }
.stagger-7 { transition-delay: 560ms; }
.stagger-8 { transition-delay: 640ms; }

/* Typewriter */
.typewriter { display: inline-block; }
.typewriter .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.typewriter .char.is-on { opacity: 1; transform: translateY(0); }
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--brand-accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink 900ms step-end infinite;
}
.typewriter-cursor.done { display: none; }

/* Marquee */
.marquee {
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 64px;
  padding-right: 64px;
  animation: marquee 50s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

/* Hover lift */
.hover-lift { transition: transform 500ms var(--ease-smooth), border-color 500ms var(--ease-smooth); }
.hover-lift:hover { transform: translateY(-5px); }

/* Page fade-in */
main.page-in { animation: fade-in 600ms var(--ease-smooth) both; }

/* Count up */
.count { font-variant-numeric: tabular-nums; }

/* Image subtle zoom on hover */
.zoomable { overflow: hidden; }
.zoomable img, .zoomable .ken {
  transition: transform 900ms var(--ease-smooth), filter 600ms var(--ease-smooth);
}
.zoomable:hover img, .zoomable:hover .ken {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .reveal, .slide-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  .typewriter .char { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
}