/* Cinematic Layer — module-specific styles. Populated by Tasks 4, 5, 6, 9, 12, 15. */

/* =====================================================
   Ambient Orbs — drift in hero background
   ===================================================== */
.ambient-orb {
  display: none;
}

/* 4 orbs with different colors / starting positions / durations */
.ambient-orb--1 {
  width: 320px; height: 320px;
  left: -80px; top: 10%;
  background: radial-gradient(circle, rgba(192,57,43,0.5) 0%, transparent 60%);
  animation: orbDrift1 42s ease-in-out infinite;
}
.ambient-orb--2 {
  width: 260px; height: 260px;
  right: -60px; top: 40%;
  background: radial-gradient(circle, rgba(232,192,80,0.4) 0%, transparent 60%);
  animation: orbDrift2 48s ease-in-out infinite;
}
.ambient-orb--3 {
  width: 380px; height: 380px;
  left: 30%; top: 60%;
  background: radial-gradient(circle, rgba(168,120,216,0.35) 0%, transparent 60%);
  animation: orbDrift3 54s ease-in-out infinite;
}
.ambient-orb--4 {
  width: 220px; height: 220px;
  right: 20%; top: -40px;
  background: radial-gradient(circle, rgba(122,164,219,0.4) 0%, transparent 60%);
  animation: orbDrift4 38s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(180px, 120px); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-220px, 80px); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(140px, -180px); }
}
@keyframes orbDrift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-120px, 200px); }
}

/* Mobile: hide 2 smaller orbs */
@media (max-width: 1023px) {
  .ambient-orb--3, .ambient-orb--4 { display: none; }
}

/* Reduced motion / cinematic disabled: hide all orbs */
body.cinematic-disabled .ambient-orb { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ambient-orb { animation: none !important; display: none; }
}

/* =====================================================
   Mascot Idle Breath (applied to inner img so cursor position transform stays intact)
   ===================================================== */
@keyframes mascotBreath {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.04); }
}
#cursor-mascot.breathing img {
  animation: mascotBreath 2s ease-in-out infinite;
}
body.cinematic-disabled #cursor-mascot.breathing img,
#cursor-mascot.breathing[data-reduce-motion] img {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #cursor-mascot.breathing img { animation: none !important; }
}

/* =====================================================
   Button shine (cursor-following radial gradient overlay)
   ===================================================== */
.download-cta,
.glass-btn-primary,
.glass-community-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.download-cta::before,
.glass-btn-primary::before,
.glass-community-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120px circle at var(--btn-shine-x, 50%) var(--btn-shine-y, 50%),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.download-cta:hover::before,
.glass-btn-primary:hover::before,
.glass-community-btn:hover::before {
  opacity: 1;
}
/* Ensure button text/icons stay above the shine overlay */
.download-cta > *,
.glass-btn-primary > *,
.glass-community-btn > * {
  position: relative;
  z-index: 1;
}

/* Disable on reduced motion */
body.cinematic-disabled .download-cta::before,
body.cinematic-disabled .glass-btn-primary::before,
body.cinematic-disabled .glass-community-btn::before {
  display: none;
}

/* =====================================================
   Mega number shimmer pulse (temporary intensification)
   Added by mega-impact.js during the entry bounce window.
   ===================================================== */
.mega-number.gold-shimmer.shimmer-pulse-active {
  /* Override the existing 6s foilShimmer from custom.css with a faster,
     brighter variant for 0.6s. Uses a slightly more saturated gold range
     to make the "landing flash" moment pop. */
  animation:
    foilShimmer 1.2s ease-in-out infinite,
    megaPulseGlow 0.6s ease-out;
}

@keyframes megaPulseGlow {
  0%   { filter: drop-shadow(0 0 0px rgba(232, 192, 80, 0)); }
  50%  { filter: drop-shadow(0 0 24px rgba(232, 192, 80, 0.55)); }
  100% { filter: drop-shadow(0 0 0px rgba(232, 192, 80, 0)); }
}

/* Reduced-motion / disabled: no pulse */
body.cinematic-disabled .shimmer-pulse-active {
  animation: none !important;
  filter: none !important;
}

/* =====================================================
   Solution card entry border glow (driven by --border-glow CSS var
   set by dissolve.js during rise phase)
   ===================================================== */
.solution-card {
  --border-glow: rgba(192, 57, 43, 0); /* default: invisible */
  box-shadow:
    0 0 0 1px var(--border-glow) inset,
    0 0 20px var(--border-glow);
  transition: box-shadow 0.3s ease;
  will-change: filter, transform, opacity; /* performance hint during dissolve blur */
}
/* Reduced-motion / disabled: no glow, no transition */
body.cinematic-disabled .solution-card {
  box-shadow: none !important;
  will-change: auto;
}