/* ============================================================
   DISCOUNTLED – ANIMATIONS CSS
   Scroll reveals, flicker, floating, word illuminate
   ============================================================ */

/* ---- REVEAL ON SCROLL ---- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
              transform 0.75s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0,0);
}

/* Staggered delay helpers */
[data-delay="0"]   { transition-delay: 0ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="450"] { transition-delay: 450ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="800"] { transition-delay: 800ms; }
[data-delay="1000"]{ transition-delay: 1000ms; }

/* ---- WORD ILLUMINATE (hero headline) ---- */
.word-illuminate {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  color: var(--text-primary);
}
.word-illuminate.lit {
  opacity: 1;
  transform: translateY(0);
}

/* ---- FLICKER HEADING ---- */
@keyframes led-flicker {
  0%,19.99%,22%,62.99%,64%,64.99%,70%,100% { opacity: 1; }
  20%,21.99%,63%,63.99%,65%,69.99%          { opacity: 0.6; }
}
.flicker-heading { animation: led-flicker 6s ease-in-out infinite; animation-delay: 2s; }

/* ---- FLOATING CARDS ---- */
@keyframes float-card {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-8px); }
}
.floating-card {
  animation: float-card 5s ease-in-out infinite;
}
.floating-card:nth-child(2) { animation-delay: 0.8s; }
.floating-card:nth-child(3) { animation-delay: 1.6s; }
.floating-card:nth-child(4) { animation-delay: 2.4s; }

/* ---- LIGHT SWEEP on section backgrounds ---- */
@keyframes light-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 300% center; }
}
.light-sweep-bg {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,107,0,0.04) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: light-sweep 6s linear infinite;
}

/* ---- NAV BACKGROUND TRANSITION ---- */
.site-header {
  background: rgba(14, 10, 6, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ---- Top-level nav links: white on blue hero ---- */
/* Scope to >li>a only — never cascade into .dropdown-menu */
.site-header:not(.scrolled) .nav-links > li > a,
.site-header:not(.scrolled) .nav-phone {
  color: rgba(255, 255, 255, 0.88);
}
.site-header:not(.scrolled) .nav-links > li > a:hover,
.site-header:not(.scrolled) .nav-links > li > a.active-link,
.site-header:not(.scrolled) .nav-links > li > a.nav-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
}
.site-header:not(.scrolled) .nav-links > li > a::after {
  background: rgba(255, 255, 255, 0.8);
}
.site-header:not(.scrolled) .nav-active {
  color: #ff9f4a !important;
  background: transparent !important;
}
/* scrolled: orange active tab */
.site-header.scrolled .nav-links > li > a.nav-active {
  color: var(--logo-orange) !important;
}
.site-header:not(.scrolled) .nav-arrow {
  color: rgba(255, 255, 255, 0.7);
}
.site-header:not(.scrolled) .hamburger span {
  background: #ffffff;
}
.site-header:not(.scrolled) .btn-cart-icon {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.30);
  color: #ffffff;
}

/* ---- Scrolled state ---- */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 107, 0, 0.08);
}
.site-header.scrolled .nav-links > li > a {
  color: var(--text-secondary, #3a4263);
}
.site-header.scrolled .nav-phone      { color: var(--text-secondary, #3a4263); }
.site-header.scrolled .btn-cart-icon  { background: var(--bg-light, #fff5ed); color: var(--text-secondary, #3d3020); border-color: var(--border-light, rgba(255,107,0,0.12)); }
.site-header.scrolled .hamburger span { background: var(--text-primary, #0a0f1e); }

/* ---- Dropdown always stays dark-on-white — reinforced here too ---- */
/* These rules have maximum specificity to guarantee no leakage */
.site-header .dropdown-menu li a,
.site-header.scrolled .dropdown-menu li a,
.site-header:not(.scrolled) .dropdown-menu li a {
  color: #1e2a4a !important;
  background: transparent !important;
}
.site-header .dropdown-menu li a:hover,
.site-header.scrolled .dropdown-menu li a:hover,
.site-header:not(.scrolled) .dropdown-menu li a:hover {
  color: var(--logo-orange) !important;
  background: #fff5ed !important;
}
.site-header .dropdown-menu li a i,
.site-header.scrolled .dropdown-menu li a i,
.site-header:not(.scrolled) .dropdown-menu li a i {
  color: var(--logo-orange) !important;
}

/* ---- CTA button: white bg on blue hero, brand-blue on scroll ---- */
.site-header:not(.scrolled) .nav-cta {
  background: #ffffff;
  color: var(--logo-orange);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.site-header:not(.scrolled) .nav-cta:hover {
  background: #fff5ed;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}

/* ---- BUTTON LIGHT SWEEP ---- */
.btn-primary .sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sweep 2.5s ease-in-out infinite;
}
@keyframes sweep {
  0%     { transform: translateX(-100%); }
  60%,100%{ transform: translateX(200%); }
}

/* ---- NEON BORDER PULSE ---- */
@keyframes neon-border {
  0%,100% { border-color: rgba(255,107,0,0.2); }
  50%     { border-color: rgba(255,107,0,0.6); box-shadow: 0 0 12px rgba(255,107,0,0.25); }
}

/* ---- STAT COUNTER GLOW ---- */
.stat-number.counting {
  animation: stat-glow 0.3s ease;
}
@keyframes stat-glow {
  0%   { text-shadow: none; }
  50%  { text-shadow: 0 0 20px rgba(255,107,0,0.8); }
  100% { text-shadow: none; }
}

/* ---- PAGE LOAD FADE ---- */
/* NOTE: opacity-only — a transform here leaves a lingering transform on
   <body>, which breaks position:fixed (fixed children anchor to <body>
   instead of the viewport). Keep this free of transform/filter. */
@keyframes page-load {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-load 0.5s ease forwards; }

/* ---- TILT CARD (JS-driven via CSS vars) ---- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tilt-card.tilting {
  transition: none;
}

/* ---- LED PARTICLE CANVAS ---- */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---- TYPING CURSOR ---- */
@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor { animation: cursor-blink 0.8s ease-in-out infinite; }

/* ---- ICON SPIN ON HOVER ---- */
.service-icon > i {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease;
}
.service-card:hover .service-icon > i {
  transform: scale(1.2) rotate(-8deg);
}

/* ---- GLOW EMERGENCE (section appears from glow) ---- */
@keyframes glow-emerge {
  0%   { opacity: 0; box-shadow: 0 0 0 rgba(255,107,0,0); }
  50%  { opacity: 0.6; box-shadow: 0 0 40px rgba(255,107,0,0.3); }
  100% { opacity: 1; box-shadow: 0 8px 32px rgba(255,107,0,0.12); }
}
.glow-emerge { animation: glow-emerge 0.8s ease forwards; }

/* ---- MAP TOOLTIP ---- */
.map-tooltip {
  position: absolute;
  background: var(--bg-dark2, #080f20);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid rgba(255,107,0,0.3);
  white-space: nowrap;
  z-index: 10;
}
.map-tooltip.visible { opacity: 1; }

/* ---- MOBILE NAV HAMBURGER ANIMATION ---- */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- CART ITEM ENTER ---- */
@keyframes cart-item-enter {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cart-item { animation: cart-item-enter 0.3s ease forwards; }

/* ---- BADGE BOUNCE ---- */
@keyframes badge-bounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.cart-badge.bounce { animation: badge-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1); }