/* =============================================================
   LUM'AURA — animations.css
   All motion wrapped in prefers-reduced-motion: no-preference
============================================================= */

/* =============================================================
   KEYFRAMES
============================================================= */

/* Marquee */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hero ambient glow pulse */
@keyframes glow-pulse {
  0%, 100% {
    opacity: 1;
    background: radial-gradient(ellipse 70% 55% at 50% 55%,
      rgba(201, 168, 76, 0.08) 0%,
      rgba(212, 175, 122, 0.04) 30%,
      transparent 70%);
  }
  50% {
    opacity: 0.8;
    background: radial-gradient(ellipse 85% 65% at 50% 52%,
      rgba(201, 168, 76, 0.11) 0%,
      rgba(212, 175, 122, 0.06) 38%,
      transparent 74%);
  }
}

/* Scroll dot bounce */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0);    opacity: 0.9; }
  50%       { transform: translateY(12px); opacity: 0.35; }
}

/* Hero headline word reveal */
@keyframes word-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Generic fade-up (used by .js-fade-in) */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile menu link entrance */
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating gold particles in hero */
@keyframes particle-float {
  0%   { opacity: 0;    transform: translateY(0)     scale(1);   }
  20%  { opacity: 0.55; }
  50%  { opacity: 0.3;  transform: translateY(-28px) scale(1.4); }
  80%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-52px) scale(0.8); }
}

/* CTA button pulse ring */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(201, 168, 76, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(201, 168, 76, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(201, 168, 76, 0);    }
}

/* Gold shimmer sweep across text / borders */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Feature tile icon float */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Stat number entrance scale */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* Divider line draw */
@keyframes draw-line {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Slide in from left */
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade up (reusable) */
@keyframes slide-from-below {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scale + fade in */
@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.93) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Pop — used for product cards and grid items */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.88) translateY(20px); }
  60%  { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Clip wipe — section headlines */
@keyframes clip-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0.2; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

/* ---- BULB KEYFRAMES ---- */

/* Incandescent flicker-on (runs once on page load) */
@keyframes bulb-flicker-on {
  0%   { opacity: 0; }
  8%   { opacity: 0.15; }
  18%  { opacity: 0.85; }
  28%  { opacity: 0.1; }
  40%  { opacity: 0.95; }
  52%  { opacity: 0.25; }
  64%  { opacity: 1; }
  76%  { opacity: 0.82; }
  88%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Continuous warm glow pulse — inner fill */
@keyframes bulb-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.07); }
}

/* Rays expand/contract with the glow */
@keyframes bulb-ray-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%       { opacity: 1;    transform: scale(1.10); }
}

/* Filament warm shift — dims and brightens */
@keyframes bulb-filament-pulse {
  0%, 100% { opacity: 0.7; }
  30%       { opacity: 1;   }
  60%       { opacity: 0.85; }
}

/* Ambient outer disk breathe */
@keyframes bulb-ambient-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.18); }
}

/* Brand beam sweep */
@keyframes brand-beam-sweep {
  0%   { left: -30%; opacity: 0; }
  5%   { opacity: 1; }
  45%  { left: 110%; opacity: 1; }
  50%  { left: 110%; opacity: 0; }
  100% { left: 110%; opacity: 0; }
}

/* Brand text glow pulse after beam passes */
@keyframes brand-glow-idle {
  0%, 100% { text-shadow: 0 0 18px rgba(201,168,76,0.35), 0 0 40px rgba(201,168,76,0.15); }
  50%       { text-shadow: 0 0 28px rgba(232,201,107,0.6), 0 0 60px rgba(201,168,76,0.25), 0 0 90px rgba(201,168,76,0.1); }
}

/* =============================================================
   MOTION-SAFE BLOCK — all animation classes live here
============================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Light bulb ---- */

  /* Whole SVG: flicker on once, then steady */
  .hero__bulb {
    animation: bulb-flicker-on 1.8s ease-out 0.4s both;
  }

  /* Inner glow fill: breathes after flicker finishes */
  .bulb__inner-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: bulb-glow-pulse 3.5s ease-in-out 2.4s infinite;
  }

  /* Rays: pulse in sync with glow */
  .bulb__rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: bulb-ray-pulse 3.5s ease-in-out 2.4s infinite;
  }

  /* Filament: slow warm oscillation */
  .bulb__filament {
    animation: bulb-filament-pulse 3.5s ease-in-out 2.8s infinite;
  }

  /* Ambient disk: wider, slower breath */
  .bulb__ambient {
    transform-box: fill-box;
    transform-origin: center;
    animation: bulb-ambient-breathe 5s ease-in-out 2.4s infinite;
  }

  /* ---- Brand beam sweep ---- */
  .hero__brand-beam::before {
    animation: brand-beam-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite;
  }

  .hero__brand {
    animation: brand-glow-idle 3.5s ease-in-out 1.6s infinite;
  }

  /* ---- Hero glow ---- */
  .hero__glow {
    animation: glow-pulse 9s ease-in-out infinite;
  }

  /* ---- Scroll dot ---- */
  .hero__scroll-dot {
    animation: bounce-down 2.2s ease-in-out infinite;
  }

  /* ---- Hero headline word-by-word ---- */
  .hero__headline span.animate {
    animation: word-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* ---- Hero fade-in elements (eyebrow, sub, CTAs) ---- */
  .js-fade-in.is-visible {
    animation: fade-in-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--fi-delay, 0s);
  }

  /* ---- CTA pulse ring ---- */
  .btn--pulse {
    animation: pulse-ring 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  }
  .btn--pulse:hover { animation: none; }

  /* ---- Marquee ---- */
  .marquee-strip__content {
    animation: marquee-scroll 38s linear infinite;
  }

  /* ---- Scroll reveal: fade up ---- */
  .reveal-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
  }
  .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---- Scroll reveal: from left ---- */
  .reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
  }
  .reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* ---- Scroll reveal: from right ---- */
  .reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
  }
  .reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* ---- Scroll reveal: scale fade ---- */
  .reveal-scale {
    opacity: 0;
    transform: scale(0.93) translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
  }
  .reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* ---- Scroll reveal: pop (product cards, grid items) ---- */
  .reveal-pop {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: var(--delay, 0s);
  }
  .reveal-pop.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* ---- Section headline clip-wipe ---- */
  .reveal-headline {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    transition-delay: var(--delay, 0s);
  }
  .reveal-headline.is-visible {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }

  /* ---- Feature tile icon float on hover ---- */
  .feature-tile:hover .feature-tile__icon {
    animation: icon-float 2s ease-in-out infinite;
  }

  /* ---- Logo name gold shimmer (desktop, on header hover) ---- */
  .header.is-scrolled .header__logo-name {
    background: linear-gradient(
      90deg,
      var(--gold-primary) 0%,
      var(--gold-light)   40%,
      var(--gold-primary) 60%,
      var(--gold-champagne) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
  }

  /* ---- Stats bar dividers draw in ---- */
  .stats-bar__divider {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.4s;
  }
  .stats-bar__divider.is-visible {
    transform: scaleY(1);
  }

  /* ---- Product card slider image fade ---- */
  .product-card__track {
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* ---- Product card hover lift already in style.css,
          add a gold glow shimmer on the name on hover ---- */
  .product-card:hover .product-card__name {
    background: linear-gradient(
      90deg,
      var(--white-warm) 0%,
      var(--gold-champagne) 50%,
      var(--white-warm) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 2.5s linear infinite;
  }

  /* ---- Client logo reveal sequence ---- */
  .clients__logos .client-logo {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.3s ease;
  }
  .clients__logos.is-visible .client-logo { opacity: 1; transform: translateY(0); }
  .clients__logos.is-visible .client-logo:nth-child(1) { transition-delay: 0.06s; }
  .clients__logos.is-visible .client-logo:nth-child(2) { transition-delay: 0.12s; }
  .clients__logos.is-visible .client-logo:nth-child(3) { transition-delay: 0.18s; }
  .clients__logos.is-visible .client-logo:nth-child(4) { transition-delay: 0.24s; }
  .clients__logos.is-visible .client-logo:nth-child(5) { transition-delay: 0.30s; }
  .clients__logos.is-visible .client-logo:nth-child(6) { transition-delay: 0.36s; }

  /* ---- Contact info item hover line ---- */
  .contact-info-item {
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .contact-info-item:hover { transform: translateX(4px); }

  /* ---- Footer logo shimmer on hover ---- */
  .footer__logo {
    transition: color 0.3s ease;
    display: inline-block;
  }
  .footer__logo:hover {
    background: linear-gradient(
      90deg,
      var(--gold-primary) 0%,
      var(--gold-light)   50%,
      var(--gold-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
  }

  /* ---- Scroll progress bar gradient shift ---- */
  .scroll-progress {
    background: linear-gradient(
      90deg,
      var(--gold-primary),
      var(--gold-light),
      var(--gold-champagne),
      var(--gold-primary)
    );
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
  }

}

/* =============================================================
   REDUCED MOTION FALLBACK — everything immediately visible
============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-fade-in { opacity: 1; transform: none; }
  .hero__headline span { opacity: 1; transform: none; }
  .hero__glow,
  .hero__scroll-dot,
  .marquee-strip__content,
  .btn--pulse,
  .feature-tile__icon,
  .scroll-progress { animation: none; }

  .clients__logos .client-logo {
    opacity: 1;
    transform: none;
    transition: filter 0.3s ease;
  }

  .stats-bar__divider { transform: scaleY(1); }
  .reveal-pop { opacity: 1; transform: none; transition: none; }
  .reveal-headline { opacity: 1; clip-path: none; transition: none; }

  /* Bulb: skip flicker, show immediately */
  .hero__bulb { animation: none; opacity: 1; }
  .bulb__inner-glow,
  .bulb__rays,
  .bulb__filament,
  .bulb__ambient { animation: none; opacity: 1; }
}