/* ============================================================
   KDB INTERIORS — animations.css
   All keyframes, transitions, and scroll-reveal classes
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes floatParticle {
  0%   { transform: translateY(110vh) translateX(0)    scale(0);   opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(-10vh)  translateX(55px) scale(3.5); opacity: 0; }
}

@keyframes monogramFloat {
  0%,  100% { transform: translateY(0)    rotateX(0deg); }
  50%        { transform: translateY(-18px) rotateX(2deg); }
}

@keyframes scrollPulse {
  0%,  100% { transform: scaleY(1);   opacity: 0.45; }
  50%        { transform: scaleY(1.3); opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes boxFloat1 {
  0%,  100% { transform: translate(0,    0); }
  50%        { transform: translate(-8px, -12px); }
}

@keyframes boxFloat2 {
  0%,  100% { transform: translate(0,   0); }
  50%        { transform: translate(8px, 10px); }
}

/* ── Applied Animations ─────────────────────────────────────── */

.hero-monogram {
  animation: monogramFloat 9s ease-in-out infinite;
}

.about-box-1 {
  animation: boxFloat1 7s ease-in-out infinite;
}

.about-box-2 {
  animation: boxFloat2 9.5s ease-in-out infinite;
}

.scroll-line {
  animation: scrollPulse 2.2s ease-in-out infinite;
}

/* ── Hero entrance stagger ───────────────────────────────────── */

.hero-eyebrow {
  opacity: 0;
  animation: fadeUp 1s ease 0.25s forwards;
}

.hero-name {
  opacity: 0;
  animation: fadeUp 1.2s ease 0.5s forwards;
}

.hero-title {
  opacity: 0;
  animation: fadeUp 1s ease 0.85s forwards;
}

.hero-divider {
  opacity: 0;
  animation: fadeIn 1s ease 1.15s forwards;
}

.hero-specialties {
  opacity: 0;
  animation: fadeUp 1s ease 1.35s forwards;
}

.hero-scroll {
  opacity: 0;
  animation: fadeIn 1s ease 1.9s forwards;
}

/* ── Scroll Reveal ───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

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

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

/* ── 3D Tilt (applied via JS, transition defined here) ────────── */

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* ── Hover pulse on accent elements ─────────────────────────── */

.nav-logo,
.contact-item-val,
.footer-logo {
  transition: color 0.35s ease;
}

/* ── Page transitions (optional fade-in on load) ────────────── */

@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFade 0.6s ease forwards;
}

/* ── Mobile: reduce motion for accessibility ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}