/* ============================================================
   DIGITAL DIVA — PREMIUM ANIMATION LAYER v2
   AI agency motion design — supplements dd-premium.css
   NOTE: dot-grid on hero already handled by dd-premium.css
   ============================================================ */

/* ── 1. SCANNING LINE — AI data-processing feel on hero ── */
/* Uses ::after; overrides the static orb from dd-premium.css
   (atmospheric body::after orb from dd-purple-bg.css replaces it) */
.elementor-element-ccb554b::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  width: 100% !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,0.4) 25%,
    rgba(255,224,130,0.85) 50%,
    rgba(212,168,67,0.4) 75%,
    transparent 100%) !important;
  top: 0 !important;
  border-radius: 0 !important;
  animation: ddScanLine 6s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

@keyframes ddScanLine {
  0%   { top: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── 2. CARD TOP-BORDER SHIMMER on hover ── */
.elementor-icon-box-wrapper,
.elementor-post__card {
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(212,168,67,0.12) !important;
  border-radius: 16px !important;
  background: rgba(28,15,58,0.88) !important;
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.4s ease,
    border-color 0.4s ease !important;
}

/* Gold shimmer stripe travels across the top edge on hover */
.elementor-icon-box-wrapper::after,
.elementor-post__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  right: auto;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, #FFE082 40%, #D4A843 60%, transparent 100%);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: 3;
}

.elementor-icon-box-wrapper:hover,
.elementor-post__card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.42),
    0 0 0 1px rgba(212,168,67,0.32) !important;
  border-color: rgba(212,168,67,0.32) !important;
}

.elementor-icon-box-wrapper:hover::after,
.elementor-post__card:hover::after {
  left: 100%;
}

/* ── 3. ALTERNATING CARD DEPTHS ── */
.elementor-widget-icon-box:nth-child(odd)  .elementor-icon-box-wrapper {
  background: rgba(28,15,58,0.92) !important;
}
.elementor-widget-icon-box:nth-child(even) .elementor-icon-box-wrapper {
  background: rgba(22,10,48,0.92) !important;
}

/* ── 4. PULSE RING on primary CTA ── */
@keyframes ddPulseRing {
  0%   { box-shadow: 0 6px 28px rgba(212,168,67,0.28), 0 0 0 0   rgba(212,168,67,0.45); }
  70%  { box-shadow: 0 6px 28px rgba(212,168,67,0.28), 0 0 0 16px rgba(212,168,67,0); }
  100% { box-shadow: 0 6px 28px rgba(212,168,67,0.28), 0 0 0 0   rgba(212,168,67,0); }
}

/* First button in hero section pulses */
.elementor-element-5ad4a729 .elementor-button {
  animation: ddPulseRing 2.8s ease-out 3s infinite !important;
}

/* ── 5. GLASSMORPHISM nav on scroll (JS adds .dd-scrolled) ── */
.elementor-location-header.dd-scrolled,
header.dd-scrolled {
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  background: rgba(10,12,40,0.92) !important;
  border-bottom: 1px solid rgba(212,168,67,0.14) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.35) !important;
  transition: all 0.3s ease !important;
}

/* Base nav glass (always on) */
.elementor-location-header,
header.site-header {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(10,12,40,0.80) !important;
  border-bottom: 1px solid rgba(212,168,67,0.10) !important;
  transition: all 0.3s ease !important;
}

/* ── 6. HEADING REVEAL animation (class added by JS) ── */
@keyframes ddHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(22px) skewY(0.8deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
    filter: blur(0);
  }
}

.dd-visible.elementor-widget-heading .elementor-heading-title {
  animation: ddHeadingReveal 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── 7. COUNTER glow ── */
@keyframes ddCounterPulse {
  0%,100% { transform: scale(1);   opacity: 0.7; }
  50%     { transform: scale(1.18); opacity: 1; }
}

.elementor-widget-counter .elementor-counter {
  position: relative;
}

.elementor-widget-counter .elementor-counter::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,168,67,0.07) 0%, transparent 70%);
  animation: ddCounterPulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ── 8. SECTION SEPARATOR lines ── */
.elementor-section + .elementor-section {
  position: relative;
}

.elementor-section + .elementor-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,0.12) 20%,
    rgba(212,168,67,0.22) 50%,
    rgba(212,168,67,0.12) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── 9. ICON LIST items — slide in on hover ── */
.elementor-widget-icon-list .elementor-icon-list-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(212,168,67,0.07) !important;
  transition: padding-left 0.25s ease, border-color 0.25s ease !important;
}

.elementor-widget-icon-list .elementor-icon-list-item:hover {
  padding-left: 10px !important;
  border-color: rgba(212,168,67,0.20) !important;
}

/* ── 10. FOOTER enhancements ── */
.elementor-location-footer,
footer.elementor-location-footer {
  background: rgba(7,3,16,0.98) !important;
  border-top: 1px solid rgba(212,168,67,0.14) !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.4) !important;
}

/* ── 11. BLOCKQUOTE / testimonial gold border ── */
blockquote {
  border-left: 3px solid #D4A843 !important;
  padding-left: 22px !important;
  font-style: italic;
  opacity: 0.9;
}

/* ── Mobile: disable heavier effects ── */
@media (max-width: 768px) {
  .elementor-element-ccb554b::after {
    display: none !important;
  }
  .elementor-icon-box-wrapper:hover,
  .elementor-post__card:hover {
    transform: none !important;
  }
  .elementor-icon-box-wrapper::after,
  .elementor-post__card::after {
    display: none !important;
  }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}