/* =====================================================================
   SCPS FX — shared ambient animation layer (on-brand teal / navy)
   Calm, slow, institutional. Linked from every screen's <helmet>.
   ===================================================================== */

/* ---- keyframes ---- */
@keyframes scpsDrift1 {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1.05); }
  50%  { transform: translate3d(6%, 5%, 0)  scale(1.22); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1.05); }
}
@keyframes scpsDrift2 {
  0%   { transform: translate3d(5%, 6%, 0)  scale(1.15); }
  50%  { transform: translate3d(-5%, -6%, 0) scale(1.0); }
  100% { transform: translate3d(5%, 6%, 0)  scale(1.15); }
}
@keyframes scpsFloatY   { 0%,100% { transform: translateY(0); }       50% { transform: translateY(-24px); } }
@keyframes scpsFloatY2  { 0%,100% { transform: translateY(0); }       50% { transform: translateY(20px); } }
@keyframes scpsPulse    { 0%,100% { opacity: .45; }                   50% { opacity: .85; } }
@keyframes scpsShimmer  { 0% { background-position: -150% 0; }         100% { background-position: 250% 0; } }
@keyframes scpsRiseIn   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scpsScaleIn  { from { opacity: 0; transform: scale(.955); }      to { opacity: 1; transform: none; } }
@keyframes scpsSheen    { 0% { transform: translateX(-120%) skewX(-18deg); } 60%,100% { transform: translateX(320%) skewX(-18deg); } }

/* ---- ambient aurora backdrop (one <div> per surface) ---- */
.scps-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.scps-aurora .orb { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform, opacity; }
.scps-aurora .orb.a { width: 46%; padding-bottom: 46%; inset-inline-start: -8%; top: -12%;  animation: scpsDrift1 26s ease-in-out infinite; }
.scps-aurora .orb.b { width: 40%; padding-bottom: 40%; inset-inline-end: -6%; bottom: -14%; animation: scpsDrift2 32s ease-in-out infinite; }
.scps-aurora .orb.c { width: 30%; padding-bottom: 30%; inset-inline-start: 40%; top: 30%;    animation: scpsFloatY 22s ease-in-out infinite, scpsPulse 14s ease-in-out infinite; }

/* dark surfaces — luminous teal glow on navy */
.scps-aurora.on-dark  .orb.a { background: radial-gradient(circle at 50% 50%, rgba(64,201,182,0.55), rgba(64,201,182,0) 70%); }
.scps-aurora.on-dark  .orb.b { background: radial-gradient(circle at 50% 50%, rgba(42,157,143,0.50), rgba(42,157,143,0) 70%); }
.scps-aurora.on-dark  .orb.c { background: radial-gradient(circle at 50% 50%, rgba(120,224,206,0.40), rgba(120,224,206,0) 70%); }

/* light surfaces — soft teal wash */
.scps-aurora.on-light .orb.a { background: radial-gradient(circle at 50% 50%, rgba(42,157,143,0.30), rgba(42,157,143,0) 70%); }
.scps-aurora.on-light .orb.b { background: radial-gradient(circle at 50% 50%, rgba(24,79,72,0.24),  rgba(24,79,72,0) 70%); }
.scps-aurora.on-light .orb.c { background: radial-gradient(circle at 50% 50%, rgba(208,172,95,0.18), rgba(208,172,95,0) 70%); }

/* fixed page-wide wash for scrolling dashboards */
.scps-aurora.fixed { position: fixed; }

/* ---- entrance helpers ---- */
.scps-rise  { animation: scpsRiseIn .5s cubic-bezier(.2,0,0,1) both; }
.scps-scale { animation: scpsScaleIn .45s cubic-bezier(.2,0,0,1) both; }
.scps-stagger > * { animation: scpsRiseIn .5s cubic-bezier(.2,0,0,1) both; }
.scps-stagger > *:nth-child(1){animation-delay:.04s}
.scps-stagger > *:nth-child(2){animation-delay:.10s}
.scps-stagger > *:nth-child(3){animation-delay:.16s}
.scps-stagger > *:nth-child(4){animation-delay:.22s}
.scps-stagger > *:nth-child(5){animation-delay:.28s}
.scps-stagger > *:nth-child(6){animation-delay:.34s}
.scps-stagger > *:nth-child(7){animation-delay:.40s}
.scps-stagger > *:nth-child(8){animation-delay:.46s}

/* ---- card lift + sheen (opt-in via .scps-lift) ---- */
.scps-lift { transition: transform .25s cubic-bezier(.2,0,0,1), box-shadow .25s cubic-bezier(.2,0,0,1); }
.scps-lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16,42,67,0.16); }

/* sheen strip for hero/KPI cards: give parent position:relative + overflow:hidden and add <span class="scps-sheen"></span> */
.scps-sheen { position: absolute; top: 0; bottom: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: scpsSheen 6.5s ease-in-out infinite; animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .scps-aurora .orb, .scps-rise, .scps-scale, .scps-stagger > *, .scps-sheen { animation: none !important; }
}

/* ==== SCPS BRAND OVERRIDE — approved colors #299d90 / #1c3b51 ==== */
:root {
  --teal-50:#e9f7f5; --teal-100:#d2efeb; --teal-200:#a6e0d8; --teal-300:#79d0c4; --teal-400:#4cb6a8;
  --teal-500:#299d90; --teal-600:#20867b; --teal-700:#186a61; --teal-800:#125049; --teal-900:#0c3833;
  --navy-50:#eef3f7; --navy-100:#dae4ec; --navy-200:#b5c9d8; --navy-300:#8faec3; --navy-400:#5d87a3;
  --navy-500:#3a6484; --navy-600:#2a4f69; --navy-700:#1c3b51; --navy-800:#152d3e; --navy-900:#0e1f2b;
}