/* =============================================================
   DIVERSICOM — "MISSION CONTROL" ENHANCE LAYER
   Cutting-edge motion + light. Loads AFTER style.css.
   Every animation here is neutralized by the global
   prefers-reduced-motion rule in style.css; marquee + clones
   get extra explicit handling at the bottom.
   ============================================================= */

@property --ring-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- 1. SCROLL PROGRESS RAIL ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  transform:scaleX(var(--scroll,0)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue), var(--cyan) 55%, var(--green));
  box-shadow:0 0 14px rgba(0,212,255,.6);
  pointer-events:none; will-change:transform;
}

/* ---------- 2. AURORA — living hero light ---------- */
.aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora b {
  position:absolute; display:block; border-radius:50%;
  filter:blur(72px); opacity:.30; mix-blend-mode:screen; will-change:transform;
}
.aurora .a1 { width:46vw; height:46vw; max-width:640px; max-height:640px; left:-8vw; top:-14vh;
  background:radial-gradient(circle at 30% 30%, #2b5cff, transparent 70%); animation:auroraA 26s ease-in-out infinite; }
.aurora .a2 { width:38vw; height:38vw; max-width:520px; max-height:520px; right:-6vw; top:-8vh;
  background:radial-gradient(circle at 70% 30%, #00d4ff, transparent 70%); animation:auroraB 32s ease-in-out infinite; }
.aurora .a3 { width:42vw; height:42vw; max-width:600px; max-height:600px; left:32%; bottom:-24vh; opacity:.20;
  background:radial-gradient(circle at 50% 50%, #6d3bff, transparent 70%); animation:auroraC 40s ease-in-out infinite; }
@keyframes auroraA { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(8vw,6vh,0) scale(1.18); } }
@keyframes auroraB { 0%,100%{ transform:translate3d(0,0,0) scale(1.05); } 50%{ transform:translate3d(-6vw,8vh,0) scale(.88); } }
@keyframes auroraC { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-8vw,-6vh,0) scale(1.12); } }

/* keep hero content above the aurora */
.hero-row { position:relative; z-index:3; }
/* inner-page hero (section-dark) aurora support */
main > section.section-dark.has-aurora { position:relative; overflow:hidden; }
section.section-dark.has-aurora > .container { position:relative; z-index:3; }

/* ---------- 3. SPOTLIGHT CARDS — cursor-tracking border glow ---------- */
.spotlight { position:relative; isolation:isolate; }
.spotlight::after {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,-200px) var(--my,-200px),
            rgba(0,212,255,.95), rgba(43,92,255,.55) 38%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:5;
}
.spotlight:hover::after { opacity:1; }

/* ---------- 4. CONIC GLOW RING (always-on, hero monitor card) ---------- */
.glow-ring::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ring-angle),
            rgba(43,92,255,.85), rgba(0,212,255,.95), rgba(109,59,255,.75), rgba(43,92,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinring 6s linear infinite; pointer-events:none; z-index:4;
}
@keyframes spinring { to { --ring-angle:360deg; } }

/* ---------- 5. SCAN LINE — sweeps the live monitor ---------- */
.scan > *:first-child { position:relative; z-index:1; }
.scan::before {
  content:''; position:absolute; left:0; right:0; top:0; height:45%;
  background:linear-gradient(180deg, rgba(0,212,255,.14), transparent);
  animation:scan 4.2s ease-in-out infinite; pointer-events:none; z-index:0; border-radius:inherit;
}
@keyframes scan { 0%{ transform:translateY(-110%); } 100%{ transform:translateY(330%); } }

/* ---------- 6. LIVE TICKER FLASH ---------- */
[data-ticker] { transition:text-shadow .3s, color .3s; }
[data-ticker].flash { animation:tickflash .65s ease; }
@keyframes tickflash {
  0%   { color:#fff; text-shadow:0 0 16px rgba(0,230,138,.9); }
  100% { text-shadow:0 0 0 rgba(0,230,138,0); }
}

/* ---------- 7. BUTTON SHEEN ---------- */
.btn-primary { position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::after {
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.40), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after { animation:sheen .85s ease; }
@keyframes sheen { to { left:150%; } }

/* ---------- 8. PARTNER MARQUEE ---------- */
.partner-bar.marquee {
  overflow:hidden; padding:10px 0; opacity:1;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display:flex; align-items:center; gap:64px; width:max-content; animation:marquee 40s linear infinite; }
.partner-bar.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track img { height:38px; width:auto; max-width:none; flex:0 0 auto; filter:grayscale(1); opacity:.5; transition:filter .25s, opacity .25s; }
.marquee-track img:hover { filter:grayscale(0); opacity:1; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- CASE-STUDY STAT TILES ---------- */
.cs-stat { transition:transform var(--transition), border-color var(--transition), background var(--transition); }
.cs-stat:hover { transform:translateY(-3px); border-color:rgba(0,212,255,.4) !important; background:rgba(255,255,255,.07) !important; }

/* ---------- BENTO CAPABILITIES GRID ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; grid-auto-rows:minmax(150px,auto); }
.bento-tile { position:relative; border-radius:var(--radius-lg); border:1px solid var(--gray-200); background:#fff; padding:28px; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.bento-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.bento-feature { grid-column:span 2; grid-row:span 2; background:linear-gradient(150deg,#0f1330,#1a2050 60%,#0f1330); color:#fff; border-color:rgba(255,255,255,.1); }
.bento-feature::before { content:''; position:absolute; width:300px; height:300px; right:-70px; top:-70px; background:radial-gradient(circle,rgba(109,59,255,.4),transparent 70%); filter:blur(24px); z-index:-1; }
.bento-wide { grid-column:span 2; }
.bento-dark { background:var(--navy); color:#fff; border-color:rgba(255,255,255,.1); }
.bento-center { align-items:center; justify-content:center; text-align:center; }
.bento-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan); margin-bottom:14px; }
.bento-eyebrow.dark { color:var(--blue); }
.bento-feature h3 { color:#fff; font-size:1.5rem; margin-bottom:12px; }
.bento-feature p { color:var(--gray-300); font-size:.92rem; line-height:1.6; }
.bento-h3-dark { color:var(--navy); font-size:1.25rem; margin-bottom:16px; }
.bento-spacer { flex:1; min-height:18px; }
.bento-prog { height:8px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:10px; }
.bento-prog span { display:block; height:100%; width:58%; border-radius:4px; background:linear-gradient(90deg,#8b5cf6,#00d4ff); animation:bentoProg 3.6s ease-in-out infinite alternate; }
@keyframes bentoProg { from { width:46%; } to { width:72%; } }
.bento-meta { font-size:.75rem; color:var(--gray-400); }
.bento-live { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:#fff; margin-bottom:18px; }
.bento-live .dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(0,230,138,.7); animation:pulse 2s infinite; }
.bento-stat-row { display:flex; gap:36px; flex-wrap:wrap; }
.bento-num { font-family:'Inter Tight'; font-size:2rem; font-weight:800; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.bento-num.green { color:var(--green); }
.bento-num.xl { font-size:2.8rem; color:var(--blue); }
.bento-lbl { font-size:.72rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.bento-center .bento-lbl { color:var(--text-muted); margin-top:10px; max-width:180px; }
.bento-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.bento-chips span { background:rgba(43,92,255,.08); color:var(--blue); padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600; }
@media (max-width:900px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .bento-feature { grid-column:span 2; grid-row:auto; }
  .bento-wide { grid-column:span 2; }
}
@media (max-width:560px) {
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .bento-feature, .bento-wide { grid-column:span 1; }
  .bento-tile { padding:24px; min-height:118px; }
}
@media (prefers-reduced-motion: reduce) { .bento-prog span { animation:none; width:60%; } }

/* ---------- ASSESSMENT QUIZ ICONS ---------- */
.assess-ic { width:30px; height:30px; margin:0 auto 6px; color:var(--blue); display:flex; align-items:center; justify-content:center; }
.assess-ic svg { width:100%; height:100%; }
.assess-ic.green { color:var(--color-success); }
.assess-ic.amber { color:var(--color-warning); }
.assess-ic.red   { color:var(--color-danger); }
.assess-ic.inline { width:22px; height:22px; margin:0; flex-shrink:0; }

/* ---------- 9. SECTION-LABEL GRADIENT TICK ---------- */
.section-label { display:inline-flex; align-items:center; gap:9px; }
.section-label::before {
  content:''; width:20px; height:2px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
}

/* ---------- REDUCED-MOTION FALLBACKS ---------- */
@media (prefers-reduced-motion: reduce) {
  .partner-bar.marquee { -webkit-mask:none; mask:none; }
  .marquee-track { animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:40px 56px; }
  .marquee-track img[aria-hidden="true"] { display:none; }   /* hide seamless-loop clones */
  .aurora, .scan::before, .glow-ring::before { animation:none; }
  .scroll-progress { display:none; }
}