/*
 * IESYS Labs — Aurora Immersive V2.2
 * REAL SELECTORS PATCH
 * Based on the actual Aurora 2 site.css/index.html selectors.
 * Loaded AFTER site.css and aurora-immersive.css.
 */

/* ===============================================================
   THEME VARIABLES — bridge Aurora 2 original vars to light/dark
   =============================================================== */

html[data-theme="light"] {
  --bg: #f7f9fc;
  --bg2: #eef3f8;
  --surface: rgba(255,255,255,.88);
  --line: rgba(13,23,40,.13);
  --text: #0b1422;
  --muted: #5b6677;
  --blue: #2f80ed;
  --blue2: #4f8df7;
  --gold: #a77a18;
}

html[data-theme="dark"] {
  --bg: #06111f;
  --bg2: #0a1728;
  --surface: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.12);
  --text: #f7f9fc;
  --muted: #a9b6c8;
  --blue: #2f80ed;
  --blue2: #68a7ff;
  --gold: #d6b25e;
}

/* ===============================================================
   LIGHT MODE — ACTUAL SITE SELECTORS
   =============================================================== */

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 80% 8%, rgba(47,128,237,.07), transparent 28rem),
    radial-gradient(circle at 15% 30%, rgba(167,122,24,.04), transparent 24rem),
    var(--bg) !important;
  color: var(--text) !important;
}

/* Header / navigation */
html[data-theme="light"] .nav-wrap nav {
  color: #152033;
}

html[data-theme="light"] nav.scrolled {
  border-color: rgba(13,23,40,.12) !important;
  background: rgba(247,249,252,.88) !important;
  box-shadow: 0 16px 44px rgba(28,48,82,.10) !important;
}

html[data-theme="light"] .brand {
  color: #0b1422 !important;
}

html[data-theme="light"] .navlinks {
  color: #4f5b6d !important;
}

html[data-theme="light"] .navlinks a:hover {
  color: #0b1422 !important;
}

html[data-theme="light"] .mobile {
  color: #0b1422 !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(13,23,40,.14) !important;
}

html[data-theme="light"] .secondary {
  color: #182334 !important;
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(13,23,40,.14) !important;
  box-shadow: 0 8px 24px rgba(26,48,82,.05);
}

/* Hero */
html[data-theme="light"] .eyebrow {
  color: #506074 !important;
}

html[data-theme="light"] .hero h1 {
  color: #0b1422 !important;
}

html[data-theme="light"] .hero h1 span {
  background:
    linear-gradient(92deg, #0b1422 0%, #2f80ed 47%, #415575 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-copy > p {
  color: #566376 !important;
}

html[data-theme="light"] .hero-signals span {
  color: #245fae !important;
  border-color: rgba(47,128,237,.20) !important;
  background: rgba(47,128,237,.055) !important;
}

html[data-theme="light"] .proof {
  color: #6d7888 !important;
}

html[data-theme="light"] .proof b {
  background: rgba(13,23,40,.16) !important;
}

/* Hero visual cards remain dark as intentional contrast islands */
html[data-theme="light"] .floatcard {
  color: #dbe8f7 !important;
  background: rgba(7,18,33,.82) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 72px rgba(24,44,72,.20) !important;
}

html[data-theme="light"] .floatcard b {
  color: #ffffff !important;
}

/* Capability strip */
html[data-theme="light"] .capability-strip {
  color: #5b6778 !important;
  border-color: rgba(13,23,40,.13) !important;
}

/* Headings */
html[data-theme="light"] .heading h2 {
  color: #0b1422 !important;
}

html[data-theme="light"] .heading p {
  color: #5a6677 !important;
}

/* Services */
html[data-theme="light"] .services .service,
html[data-theme="light"] .service {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,253,.96)) !important;
  border-color: rgba(13,23,40,.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 54px rgba(27,47,78,.07) !important;
}

html[data-theme="light"] .services .service:hover,
html[data-theme="light"] .service:hover {
  border-color: rgba(47,128,237,.28) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,1), rgba(241,247,255,.98)) !important;
  box-shadow: 0 24px 70px rgba(38,72,125,.11) !important;
}

html[data-theme="light"] .service h3 {
  color: #111b2b !important;
}

html[data-theme="light"] .service p {
  color: #5e697a !important;
}

html[data-theme="light"] .services .num,
html[data-theme="light"] .num {
  color: #946d18 !important;
}

html[data-theme="light"] .arrow {
  color: #30506f !important;
  border-color: rgba(13,23,40,.14) !important;
}

/* Products — actual .product-showcase structure */
html[data-theme="light"] .product-showcase {
  color: #111b2b !important;
  border-color: rgba(13,23,40,.12) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(var(--accent-rgb),.09), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(246,249,253,.97)) !important;
  box-shadow: 0 22px 68px rgba(27,47,78,.08) !important;
}

html[data-theme="light"] .product-showcase:before {
  background:
    linear-gradient(110deg, rgba(255,255,255,.65), transparent 28%, transparent 75%, rgba(var(--accent-rgb),.025)) !important;
}

html[data-theme="light"] .product-showcase h3 {
  color: #0d1728 !important;
}

html[data-theme="light"] .product-showcase p {
  color: #5b6778 !important;
}

html[data-theme="light"] .product-showcase .status {
  color: #596679 !important;
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(13,23,40,.12) !important;
}

html[data-theme="light"] .product-showcase .symbol {
  background: rgba(255,255,255,.78) !important;
}

html[data-theme="light"] .product-points li {
  color: #334156 !important;
  background: rgba(var(--accent-rgb),.055) !important;
  border-color: rgba(var(--accent-rgb),.18) !important;
}

/* Keep MarketFlow console as a premium dark proof block */
html[data-theme="light"] .product-showcase.marketflow {
  background:
    radial-gradient(circle at 79% 18%, rgba(147,113,255,.08), transparent 21rem),
    radial-gradient(circle at 11% 85%, rgba(167,122,24,.05), transparent 23rem),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,247,252,.98)) !important;
}

html[data-theme="light"] .flow-console {
  border-color: rgba(167,122,24,.30) !important;
}

/* Browser / screenshots */
html[data-theme="light"] .browser-shot,
html[data-theme="light"] .thumb-shot {
  border-color: rgba(13,23,40,.12) !important;
  box-shadow: 0 22px 58px rgba(28,48,82,.10) !important;
}

/* Method / process */
html[data-theme="light"] .process {
  border-color: rgba(13,23,40,.13) !important;
}

html[data-theme="light"] .step {
  border-color: rgba(13,23,40,.12) !important;
}

html[data-theme="light"] .step h4 {
  color: #172133 !important;
}

/* Academy */
html[data-theme="light"] .academy-grid {
  border-color: rgba(13,23,40,.13) !important;
}

html[data-theme="light"] .academy-feature {
  color: #111b2b !important;
  border-color: rgba(13,23,40,.12) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,250,253,.92)) !important;
}

html[data-theme="light"] .academy-feature:hover {
  background:
    linear-gradient(145deg, rgba(247,244,255,.98), rgba(242,247,255,.98)) !important;
}

html[data-theme="light"] .academy-feature h3 {
  color: #101a2a !important;
}

html[data-theme="light"] .academy-feature p {
  color: #5c6879 !important;
}

html[data-theme="light"] .academy-index {
  color: #946d18 !important;
}

/* Iesys Select is an intentional dark island even in light mode */
html[data-theme="light"] .select-shell {
  --text: #f7f9fc;
  --muted: #b6c0ce;
  --line: rgba(255,255,255,.12);
  color: #f7f9fc !important;
  box-shadow: 0 32px 90px rgba(22,36,58,.16);
}

html[data-theme="light"] .select-shell h2,
html[data-theme="light"] .select-shell h3,
html[data-theme="light"] .select-shell strong {
  color: #f7f9fc !important;
}

html[data-theme="light"] .select-intro p {
  color: #b9c3d0 !important;
}

html[data-theme="light"] .select-categories {
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="light"] .select-categories a {
  color: #e8edf5 !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Final CTA remains a deliberate dark cinematic island */
html[data-theme="light"] .cta {
  color: #f7f9fc !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 84px rgba(22,36,58,.14);
}

html[data-theme="light"] .cta h2 {
  color: #ffffff !important;
}

html[data-theme="light"] .cta-text {
  color: #c3ccd8 !important;
}

/* Footer */
html[data-theme="light"] footer {
  color: #697586 !important;
}

html[data-theme="light"] .footer-grid {
  border-color: rgba(13,23,40,.12) !important;
}

html[data-theme="light"] .fcol h4 {
  color: #111b2b !important;
}

html[data-theme="light"] .fcol a {
  color: #657184 !important;
}

html[data-theme="light"] .fcol a:hover {
  color: #1d5fae !important;
}

/* ===============================================================
   IMMERSIVE TRANSITIONS — CENTERED PHRASES + VISIBLE DETAILS
   =============================================================== */

.iesys-immersive-content {
  width: min(1040px, calc(100% - 56px)) !important;
  margin: auto !important;
  padding: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform:
    translateY(calc((1 - var(--scene-p)) * 18px))
    scale(calc(.985 + var(--scene-p) * .015)) !important;
}

.iesys-immersive-kicker {
  justify-content: center !important;
  margin: 0 auto 18px !important;
  color: #b9ddff !important;
  text-align: center !important;
  text-shadow: 0 2px 22px rgba(0,0,0,.44);
}

.iesys-immersive-kicker::before,
.iesys-immersive-kicker::after {
  content: "" !important;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #70c9ff);
  box-shadow: 0 0 14px rgba(86,183,255,.72);
}

.iesys-immersive-kicker::after {
  background: linear-gradient(90deg, #70c9ff, transparent);
}

.iesys-immersive-title {
  max-width: 920px !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow:
    0 2px 18px rgba(0,0,0,.46),
    0 20px 64px rgba(0,0,0,.28);
}

.iesys-immersive-copy {
  max-width: 690px !important;
  margin: 22px auto 0 !important;
  color: rgba(245,249,255,.92) !important;
  text-align: center !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.48);
}

/* Preserve photo detail: localized readability, not full dark wash */
.iesys-immersive-media::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(2,9,18,.50) 0%,
      rgba(2,9,18,.30) 34%,
      rgba(2,9,18,.09) 64%,
      rgba(2,9,18,.06) 100%
    ) !important;
}

.iesys-immersive-media::after {
  background:
    linear-gradient(
      180deg,
      rgba(3,10,19,.07) 0%,
      transparent 22%,
      transparent 75%,
      rgba(3,10,19,.22) 100%
    ) !important;
}

.iesys-immersive-media img {
  filter:
    saturate(calc(.98 + var(--scene-p) * .13))
    contrast(calc(1.02 + var(--scene-p) * .045))
    brightness(calc(.98 + var(--scene-p) * .025)) !important;
}

.iesys-scene-path {
  bottom: clamp(20px, 6.5vh, 68px) !important;
  opacity: calc(.45 + var(--scene-p) * .55);
}

.iesys-scene-path-progress {
  stroke-width: 2.35 !important;
  filter:
    drop-shadow(0 0 5px rgba(62,173,255,.90))
    drop-shadow(0 0 14px rgba(62,173,255,.42)) !important;
}

.iesys-immersive-content::after {
  content: "";
  width: clamp(72px, 8vw, 118px);
  height: 1px;
  margin-top: 28px;
  background:
    linear-gradient(90deg, transparent, rgba(127,207,255,.9), transparent);
  box-shadow: 0 0 14px rgba(86,183,255,.42);
}

/* ===============================================================
   MOBILE
   =============================================================== */

@media (max-width: 900px) {
  .iesys-immersive-content {
    width: min(780px, calc(100% - 36px)) !important;
  }
}

@media (max-width: 620px) {
  .iesys-immersive-content {
    width: calc(100% - 30px) !important;
  }

  .iesys-immersive-title {
    font-size: clamp(32px, 10vw, 54px) !important;
    line-height: 1.02 !important;
  }

  .iesys-immersive-copy {
    max-width: 94% !important;
    margin-top: 16px !important;
    font-size: 14.5px !important;
  }

  .iesys-immersive-kicker {
    font-size: 10px !important;
  }

  .iesys-immersive-kicker::before,
  .iesys-immersive-kicker::after {
    width: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iesys-immersive-content {
    transform: none !important;
    opacity: 1 !important;
  }
}