/* ═══════════════════════════════════════════════════════════════════
   ATRIUM GOLDEN VISA — Premium Animation CSS v2.0
   Scroll reveals, parallax, tilt, progress bar, magnetic CTAs
   ═══════════════════════════════════════════════════════════════════ */

/* ─── OVERFLOW FIX (React CSS sets clip) ────────────────────────── */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ─── HERO CTA / STATS BAR SPACING FIX ─────────────────────────── */
section:first-of-type .flex.flex-wrap.gap-4 {
  padding-bottom: 5rem;
}
section:first-of-type {
  padding-bottom: 2rem;
}

/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────── */
.atrium-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #33BDE8, #9BEAA6, #33BDE8);
  background-size: 200% 100%;
  animation: progressGradient 3s ease infinite;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.1s linear;
}
@keyframes progressGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── SCROLL REVEAL ────────────────────────────────────────────── */
.atrium-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  /* Override the old CSS animation-based reveals */
  animation: none !important;
}
.atrium-reveal.atrium-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children in grids */
.atrium-reveal-child {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--child-delay, 0s);
  /* Override old stagger */
  animation: none !important;
}
.atrium-reveal-child.atrium-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 3D TILT CARDS ────────────────────────────────────────────── */
.magic-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.magic-card > * {
  transform: translateZ(20px);
}
.magic-card:hover {
  box-shadow:
    0 20px 60px rgba(51, 189, 232, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ─── NAVBAR SCROLL EFFECT ─────────────────────────────────────── */
header {
  transition: padding 0.3s ease,
              background-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease !important;
}
.atrium-nav-scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(7, 17, 31, 0.95) !important;
}
[data-atrium-theme="light"] .atrium-nav-scrolled {
  background-color: rgba(247, 251, 253, 0.95) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}

/* ─── IMAGE PARALLAX CONTAINERS ────────────────────────────────── */
.atrium-img-parallax {
  overflow: hidden;
}
.atrium-img-parallax img {
  transition: transform 0.1s linear !important;
  will-change: transform;
}

/* ─── MAGNETIC CTA BUTTONS ─────────────────────────────────────── */
.atrium-magnetic-btn {
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.atrium-magnetic-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, #33BDE8, #9BEAA6, #33BDE8);
  background-size: 200% 100%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  animation: progressGradient 2s ease infinite;
}
.atrium-magnetic-btn:hover::before {
  opacity: 0.6;
}
.atrium-magnetic-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.atrium-magnetic-btn:active::after {
  width: 300px;
  height: 300px;
}

/* ─── FLOATING GRADIENT ORBS ───────────────────────────────────── */
.atrium-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
  will-change: transform;
}
.atrium-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(51, 189, 232, 0.12), transparent 70%);
  top: -10%;
  left: -10%;
  animation: orbFloat1 8s ease-in-out infinite;
}
.atrium-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(155, 234, 166, 0.08), transparent 70%);
  bottom: -15%;
  right: -5%;
  animation: orbFloat2 10s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -30px) scale(0.9); }
}

/* ─── TEXT SHIMMER (trust badge) ────────────────────────────────── */
.atrium-text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(155, 234, 166, 1) 45%,
    rgba(51, 189, 232, 1) 55%,
    rgba(255, 255, 255, 0.9) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s ease-in-out infinite;
}
@keyframes textShimmer {
  0%, 100% { background-position: -100% 0; }
  50% { background-position: 200% 0; }
}
[data-atrium-theme="light"] .atrium-text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.9) 0%,
    rgba(29, 122, 63, 1) 45%,
    rgba(26, 127, 160, 1) 55%,
    rgba(15, 23, 42, 0.9) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s ease-in-out infinite;
}

/* ─── STEP NUMBER ANIMATION ────────────────────────────────────── */
.atrium-step-number {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.5s ease;
}
.atrium-step-animate {
  animation: stepPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes stepPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.atrium-step-number:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 0 30px rgba(51, 189, 232, 0.4);
}

/* ─── ENHANCED ACCORDION ──────────────────────────────────────── */
details {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
details summary {
  cursor: pointer;
  transition: color 0.2s ease, padding 0.2s ease;
}
details summary:hover {
  color: #33BDE8 !important;
  padding-left: 0.25rem;
}
details[open] {
  background-color: rgba(51, 189, 232, 0.03);
}
details[open] > *:not(summary) {
  animation: accordionOpen 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes accordionOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

/* ─── LINK UNDERLINE ANIMATION ─────────────────────────────────── */
a:not([style*="background-color"]):not(.magic-card):not([class*="rounded-full"]):not(header a):not(footer a) {
  position: relative;
  text-decoration: none;
}
a:not([style*="background-color"]):not(.magic-card):not([class*="rounded-full"]):not(header a):not(footer a)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #33BDE8;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
a:not([style*="background-color"]):not(.magic-card):not([class*="rounded-full"]):not(header a):not(footer a):hover::after {
  width: 100%;
}

/* ─── STAT COUNTER GLOW ON COMPLETE ────────────────────────────── */
.font-serif.text-3xl.font-bold {
  transition: text-shadow 0.5s ease, transform 0.3s ease;
}
.font-serif.text-3xl.font-bold:hover {
  text-shadow: 0 0 30px rgba(51, 189, 232, 0.5);
  transform: scale(1.08);
}

/* ─── SMOOTH IMAGE REVEAL ──────────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
img[loading="lazy"].atrium-visible,
img[loading="lazy"][src] {
  opacity: 1;
}

/* ─── SELECTION ────────────────────────────────────────────────── */
::selection {
  background: rgba(51, 189, 232, 0.25);
  color: #ffffff;
}

/* ─── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atrium-scroll-progress { display: none; }
  .atrium-orb { display: none; }
  .atrium-text-shimmer {
    -webkit-text-fill-color: inherit;
    background: none;
    animation: none;
  }
  .atrium-reveal,
  .atrium-reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .atrium-step-animate { animation: none; }
}