/* ═══════════════════════════════════════════════════════════
   LAREINE — CINEMATIC POPUP OVERRIDES
   Loaded AFTER all inline <style> tags — same-specificity
   rules here win. !important kills any remaining conflicts.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────────────────── */

/* FLASH-BURST: tiny bright point → blinding flash → settle */
@keyframes lr-burst {
  0%   {
    opacity: 0;
    transform: scale(0.04) rotate(-6deg);
    filter: blur(24px) brightness(4);
    box-shadow: 0 0 0 0 rgba(212,175,55,0);
  }
  12%  {
    opacity: 1;
    transform: scale(1.22) rotate(3deg);
    filter: blur(0) brightness(2.8);
    box-shadow:
      0 0 120px 80px rgba(212,175,55,0.85),
      0 0 240px 120px rgba(138,43,226,0.6),
      inset 0 0 60px rgba(255,255,255,0.15);
  }
  30%  {
    transform: scale(0.94) rotate(-1deg);
    filter: brightness(1.15);
    box-shadow:
      0 0 50px 20px rgba(212,175,55,0.35),
      0 0 100px 40px rgba(138,43,226,0.2);
  }
  50%  { transform: scale(1.04) rotate(0.4deg); filter: brightness(1.04); }
  68%  { transform: scale(0.978); }
  82%  { transform: scale(1.012); }
  100% {
    transform: scale(1) rotate(0);
    filter: brightness(1);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.2);
  }
}

/* 3-D FLIP: card flips in on Y axis */
@keyframes lr-flip {
  0%   { opacity: 0; transform: perspective(900px) rotateY(-90deg) scale(0.7); filter: blur(8px); }
  45%  { opacity: 1; transform: perspective(900px) rotateY(12deg) scale(1.04); filter: blur(0); }
  68%  { transform: perspective(900px) rotateY(-4deg) scale(0.985); }
  85%  { transform: perspective(900px) rotateY(1.5deg) scale(1.005); }
  100% { transform: perspective(900px) rotateY(0deg) scale(1); }
}

/* ROCKET: for corner toasts and notification banners */
@keyframes lr-rocket {
  0%   { opacity: 0; transform: translateX(120%) translateY(-40px) rotate(12deg) scale(0.6); filter: blur(6px); }
  38%  { opacity: 1; transform: translateX(-18px) translateY(5px) rotate(-3deg) scale(1.1); filter: blur(0); }
  60%  { transform: translateX(8px) translateY(-2px) rotate(0.8deg) scale(0.97); }
  78%  { transform: translateX(-4px) translateY(1px) scale(1.01); }
  100% { transform: translateX(0) translateY(0) rotate(0) scale(1); }
}

/* SLAM-DOWN: from above for top-centered modals */
@keyframes lr-slam {
  0%   { opacity: 0; transform: translateY(-120px) scaleY(0.4) scaleX(1.3); filter: blur(12px); }
  40%  { opacity: 1; transform: translateY(18px) scaleY(1.06) scaleX(0.97); filter: blur(0); }
  62%  { transform: translateY(-8px) scaleY(0.97) scaleX(1.01); }
  80%  { transform: translateY(4px) scaleY(1.01); }
  100% { transform: translateY(0) scaleY(1) scaleX(1); }
}

/* CART WIPE: slides from the right edge */
@keyframes lr-cart-wipe {
  0%   { opacity: 0; transform: translateX(100%) skewX(-6deg); filter: blur(4px); }
  45%  { opacity: 1; transform: translateX(-18px) skewX(2deg); filter: blur(0); }
  68%  { transform: translateX(8px) skewX(-1deg); }
  85%  { transform: translateX(-3px); }
  100% { transform: translateX(0) skewX(0); }
}

/* AURORA: animated gradient backdrop */
@keyframes lr-aurora {
  0%   { background-position: 0% 60%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 0% 60%; }
}

/* RING PULSE: for icon rings */
@keyframes lr-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(212,175,55,0.7),
      0 0 0 8px rgba(212,175,55,0);
  }
  50% {
    box-shadow:
      0 0 0 8px  rgba(212,175,55,0.35),
      0 0 0 18px rgba(212,175,55,0);
  }
}

/* AMBIENT GLOW on active cards */
@keyframes lr-ambient {
  0%, 100% {
    box-shadow:
      0 30px 80px rgba(0,0,0,0.6),
      0 0 40px rgba(212,175,55,0.2),
      0 0 0 1px rgba(212,175,55,0.2);
  }
  50% {
    box-shadow:
      0 40px 100px rgba(0,0,0,0.65),
      0 0 80px rgba(212,175,55,0.55),
      0 0 140px rgba(138,43,226,0.3),
      0 0 0 1px rgba(212,175,55,0.4);
  }
}

/* SHIMMER SHEEN */
@keyframes lr-sheen {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}

/* STAGGER FADE-UP */
@keyframes lr-up {
  0%   { opacity: 0; transform: translateY(28px) scale(0.95); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* EXIT SNAP */
@keyframes lr-exit-snap {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  30%  { transform: scale(1.06); }
  100% { opacity: 0; transform: scale(0.78) translateY(30px); filter: blur(8px); }
}

@keyframes lr-exit-toast {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(110%) scale(0.8) rotate(5deg); }
}

/* SPARK */
@keyframes lr-spark {
  0%   { opacity: 0; transform: translate(0,0) scale(0) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx,50px),var(--ty,-50px)) scale(1.4) rotate(var(--tr,240deg)); }
}

/* FLOAT (continuous levitation after enter) */
@keyframes lr-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ─────────────────────────────────────────────────────────
   KILL CONFLICTING TRANSITIONS on popup elements
───────────────────────────────────────────────────────── */
html body .popup-card,
html body .divModale,
html body .testimonials-modal-content,
html body .video-modal-content,
html body .modal-content,
html body .auth-card,
html body .notification-toast,
html body .lareine-intro-toast,
html body .video-popup,
html body .client-story-content,
html body .disclaimer-modal,
html body .search-modal {
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────
   ANIMATED BACKDROP on popup overlays
───────────────────────────────────────────────────────── */
html body .popup-overlay.active,
html body .modalonaFiga.modal-open,
html body .testimonials-modal[style*="flex"],
html body .video-modal.active,
html body .quick-view-modal.active,
html body .auth-modal.active,
html body .quote-modal.active,
html body .modal.active {
  background: linear-gradient(
    135deg,
    rgba(10,4,28,0.94) 0%,
    rgba(88,28,135,0.75) 30%,
    rgba(212,175,55,0.12) 50%,
    rgba(30,0,60,0.88) 70%,
    rgba(10,4,28,0.96) 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: lr-aurora 8s ease infinite !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — POPUP AD CARD  (flash-burst entrance)
───────────────────────────────────────────────────────── */
html body .popup-overlay.active .popup-card {
  transform: none !important;
  animation:
    lr-burst   0.82s cubic-bezier(0.22, 1, 0.36, 1) both,
    lr-ambient 3.8s ease-in-out 1s infinite !important;
}

/* Sheen overlay */
html body .popup-card {
  position: relative !important;
  overflow: hidden !important;
}
html body .popup-overlay.active .popup-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.12) 50%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 50 !important;
  animation: lr-sheen 2.2s ease-in-out 0.9s infinite !important;
}

/* Icon ring pulse */
html body .popup-overlay.active .popup-icon-ring {
  animation: lr-ring-pulse 1.8s ease-out 0.6s infinite !important;
}

/* Stagger card interior */
html body .popup-overlay.active .popup-icon-ring  { animation: lr-ring-pulse 1.8s ease-out 0.65s infinite, lr-up 0.5s ease 0.18s both !important; }
html body .popup-overlay.active .popup-card h3    { animation: lr-up 0.5s cubic-bezier(0.22,1,0.36,1) 0.27s both !important; }
html body .popup-overlay.active .popup-card p     { animation: lr-up 0.5s cubic-bezier(0.22,1,0.36,1) 0.36s both !important; }
html body .popup-overlay.active .popup-perks      { animation: lr-up 0.5s cubic-bezier(0.22,1,0.36,1) 0.45s both !important; }
html body .popup-overlay.active .popup-cta-btn    { animation: lr-up 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.54s both !important; }
html body .popup-overlay.active .popup-dismiss    { animation: lr-up 0.45s ease 0.65s both !important; }

/* CTA button hover energy */
html body .popup-cta-btn {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
}
html body .popup-cta-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: 10px !important; height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.6) !important;
  transform: translate(-50%,-50%) scale(0) !important;
  opacity: 0 !important;
  transition: transform 0.6s ease, opacity 0.6s ease !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
html body .popup-cta-btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 16px 40px rgba(212,175,55,0.6), 0 0 60px rgba(212,175,55,0.3) !important;
}
html body .popup-cta-btn:hover::before {
  transform: translate(-50%,-50%) scale(24) !important;
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — NOTIFICATION TOAST
───────────────────────────────────────────────────────── */
html body .notification-toast.show {
  animation: lr-rocket 0.7s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
html body .notification-toast.lr-out {
  animation: lr-exit-toast 0.38s ease-in both !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — SEARCH MODAL
───────────────────────────────────────────────────────── */
html body .search-modal-overlay.active .search-modal {
  animation: lr-slam 0.65s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — SERVICE / PROJECT MODAL
───────────────────────────────────────────────────────── */
html body .modal.active .modal-content {
  animation: lr-burst 0.75s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — TRAVEL MODAL
───────────────────────────────────────────────────────── */
html body .travel-modal.active .modal-wrapper {
  animation: lr-flip 0.75s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — DISCLAIMER
───────────────────────────────────────────────────────── */
html body .disclaimer-overlay.active .disclaimer-modal {
  animation: lr-slam 0.62s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   CONSTRUCTION — CLIENT STORY MODAL
───────────────────────────────────────────────────────── */
html body .client-story-modal.active .client-story-content {
  animation: lr-flip 0.72s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   LAREINE MAIN — MODALONAFICA
───────────────────────────────────────────────────────── */
html body .modalonaFiga.modal-open .divModale {
  transform: none !important;
  animation:
    lr-burst   0.85s cubic-bezier(0.22,1,0.36,1) both,
    lr-ambient 4s   ease-in-out 1s infinite !important;
}
html body .modalonaFiga.modal-open .divModale > *:nth-child(1) { animation: lr-up 0.5s ease 0.22s both !important; }
html body .modalonaFiga.modal-open .divModale > *:nth-child(2) { animation: lr-up 0.5s ease 0.34s both !important; }
html body .modalonaFiga.modal-open .divModale > *:nth-child(3) { animation: lr-up 0.5s ease 0.46s both !important; }
html body .modalonaFiga.modal-open .divModale > *:nth-child(4) { animation: lr-up 0.5s ease 0.58s both !important; }

/* ─────────────────────────────────────────────────────────
   LAREINE MAIN — TESTIMONIALS MODAL
───────────────────────────────────────────────────────── */
html body .testimonials-modal .testimonials-modal-content {
  animation: lr-flip 0.7s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   LAREINE MAIN — EMOJI POPUP
───────────────────────────────────────────────────────── */
html body .emoji-popup.show {
  animation: lr-burst 0.55s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
html body .emoji-popup span {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  display: inline-block !important;
}
html body .emoji-popup span:hover {
  transform: scale(1.6) rotate(-10deg) !important;
}

/* ─────────────────────────────────────────────────────────
   LAREINE MAIN — NOTIFICATION
───────────────────────────────────────────────────────── */
html body .notification,
html body .shop-notification {
  animation: lr-rocket 0.62s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — VIDEO MODAL
───────────────────────────────────────────────────────── */
html body .video-modal.active .video-modal-content {
  animation: lr-burst 0.72s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — QUICK VIEW
───────────────────────────────────────────────────────── */
html body .quick-view-modal.active .modal-content {
  animation: lr-flip 0.72s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — AUTH MODAL
───────────────────────────────────────────────────────── */
html body .auth-modal.active .auth-card {
  animation:
    lr-burst   0.75s cubic-bezier(0.22,1,0.36,1) both,
    lr-ambient 3.5s ease-in-out 0.9s infinite !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — CART DRAWER
───────────────────────────────────────────────────────── */
html body .cart-modal.active {
  animation: lr-cart-wipe 0.6s cubic-bezier(0.34,1.4,0.64,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — QUOTE MODAL
───────────────────────────────────────────────────────── */
html body .quote-modal.active > div {
  animation: lr-slam 0.68s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — CORNER VIDEO POPUP
───────────────────────────────────────────────────────── */
html body .video-popup.active {
  transition: none !important;
  animation: lr-rocket 0.68s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   SHOP — INTRO TOAST
───────────────────────────────────────────────────────── */
html body .lareine-intro-toast.show {
  animation: lr-rocket 0.72s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* ─────────────────────────────────────────────────────────
   UNIVERSAL — CLOSE BUTTON SPIN + MAGNETIC
───────────────────────────────────────────────────────── */
html body .popup-close-x,
html body .modal-close,
html body .close-video-modal,
html body .testimonials-modal-close,
html body .close-vid,
html body .modal-close-x {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              background 0.22s ease,
              color 0.22s ease,
              box-shadow 0.22s ease !important;
  will-change: transform !important;
}
html body .popup-close-x:hover,
html body .modal-close:hover,
html body .close-video-modal:hover,
html body .testimonials-modal-close:hover,
html body .close-vid:hover,
html body .modal-close-x:hover {
  transform: rotate(90deg) scale(1.3) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.6) !important;
}

/* ─────────────────────────────────────────────────────────
   SPARKLE PARTICLES (canvas injected by JS)
───────────────────────────────────────────────────────── */
.lr-canvas-wrap {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
}