/*
 * IESYS Labs — Aurora Immersive V2
 * Light-first theme + dark mode + scroll-expanding contextual scenes.
 * Designed for Aurora 2 baseline 1823527.
 */

:root {
  color-scheme: light;
  --iesys-bg: #f6f8fb;
  --iesys-surface: #ffffff;
  --iesys-surface-soft: #f1f5fa;
  --iesys-text: #0d1728;
  --iesys-muted: #5e6878;
  --iesys-line: rgba(13, 23, 40, 0.12);
  --iesys-line-strong: rgba(13, 23, 40, 0.20);
  --iesys-accent: #1268ff;
  --iesys-accent-2: #5f7cff;
  --iesys-glow: rgba(18, 104, 255, 0.20);
  --iesys-shadow: 0 24px 80px rgba(28, 48, 82, 0.10);
  --iesys-header-bg: rgba(246, 248, 251, 0.82);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --iesys-bg: #070b12;
  --iesys-surface: #0d131d;
  --iesys-surface-soft: #111a27;
  --iesys-text: #f4f7fb;
  --iesys-muted: #aab5c6;
  --iesys-line: rgba(255, 255, 255, 0.10);
  --iesys-line-strong: rgba(255, 255, 255, 0.18);
  --iesys-accent: #3292ff;
  --iesys-accent-2: #7f72ff;
  --iesys-glow: rgba(50, 146, 255, 0.28);
  --iesys-shadow: 0 30px 100px rgba(0, 0, 0, 0.38);
  --iesys-header-bg: rgba(7, 11, 18, 0.84);
}

html,
body {
  background: var(--iesys-bg) !important;
  color: var(--iesys-text) !important;
}

body {
  transition: background-color 260ms ease, color 260ms ease;
}

/* Normalize the Aurora shell to a cleaner, lighter visual language. */
html[data-theme] body :where(main, section, article) {
  color: var(--iesys-text);
}

html[data-theme="light"] body :where(
  .section,
  .section-shell,
  .panel,
  .card,
  .product-card,
  .service-card,
  .method-card,
  .academy-card,
  .glass-card
) {
  border-color: var(--iesys-line) !important;
}

html[data-theme="light"] body :where(
  .card,
  .product-card,
  .service-card,
  .method-card,
  .academy-card,
  .glass-card
) {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 48px rgba(31, 52, 84, 0.06);
}

html[data-theme="dark"] body :where(
  .card,
  .product-card,
  .service-card,
  .method-card,
  .academy-card,
  .glass-card
) {
  background: rgba(13, 19, 29, 0.86) !important;
  border-color: var(--iesys-line) !important;
}

html[data-theme] body :where(
  p,
  .muted,
  .eyebrow + p,
  .section-copy,
  .product-copy,
  .service-copy
) {
  color: var(--iesys-muted);
}

html[data-theme] body :where(h1,h2,h3,h4,strong,.title,.heading) {
  color: var(--iesys-text);
}

html[data-theme] body :where(a,button) {
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

/* Header becomes a slim translucent surface in both themes. */
html[data-theme] body > header,
html[data-theme] .site-header,
html[data-theme] .header {
  background: var(--iesys-header-bg) !important;
  border-bottom-color: var(--iesys-line) !important;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

/* Theme toggle */
.iesys-theme-toggle {
  appearance: none;
  width: 44px;
  height: 28px;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;
  padding: 2px;
  margin-inline-start: 8px;
  border: 1px solid var(--iesys-line-strong);
  border-radius: 999px;
  background: var(--iesys-surface);
  color: var(--iesys-text);
  box-shadow: 0 8px 26px rgba(30, 52, 86, 0.08);
  cursor: pointer;
  position: relative;
  z-index: 20;
}

.iesys-theme-toggle::after {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 20px;
  border-radius: 50%;
  background: var(--iesys-accent);
  box-shadow: 0 0 20px var(--iesys-glow);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"] .iesys-theme-toggle::after {
  transform: translateX(16px);
}

.iesys-theme-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  position: relative;
  z-index: 2;
}

.iesys-theme-toggle .iesys-theme-sun {
  color: #ffffff;
}

html[data-theme="dark"] .iesys-theme-toggle .iesys-theme-sun {
  color: var(--iesys-muted);
}

.iesys-theme-toggle .iesys-theme-moon {
  color: var(--iesys-muted);
}

html[data-theme="dark"] .iesys-theme-toggle .iesys-theme-moon {
  color: #ffffff;
}

.iesys-theme-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--iesys-accent) 28%, transparent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Immersive scenes
   A scene is a contextual transition, not a floating card.
   The media occupies the full horizontal canvas and is revealed/expanded
   through clip-path as the visitor scrolls.
   ------------------------------------------------------------------ */

.iesys-immersive-scene {
  --scene-p: 0;
  --scene-edge: 15vw;
  --scene-top: 7vh;
  --scene-radius: 34px;
  position: relative;
  height: 128vh;
  margin: 0;
  background: var(--iesys-bg);
  overflow: clip;
  isolation: isolate;
}

.iesys-immersive-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: clip;
}

.iesys-immersive-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(
    calc((1 - var(--scene-p)) * var(--scene-top))
    calc((1 - var(--scene-p)) * var(--scene-edge))
    calc((1 - var(--scene-p)) * var(--scene-top))
    calc((1 - var(--scene-p)) * var(--scene-edge))
    round calc((1 - var(--scene-p)) * var(--scene-radius))
  );
  background: #06111f;
  will-change: clip-path;
}

.iesys-immersive-media::before,
.iesys-immersive-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.iesys-immersive-media::before {
  background:
    linear-gradient(90deg,
      rgba(3, 10, 19, 0.68) 0%,
      rgba(3, 10, 19, 0.20) 42%,
      rgba(3, 10, 19, 0.04) 72%,
      rgba(3, 10, 19, 0.28) 100%);
}

.iesys-immersive-media::after {
  background:
    linear-gradient(180deg,
      rgba(3, 10, 19, 0.15) 0%,
      transparent 45%,
      rgba(3, 10, 19, 0.42) 100%);
}

.iesys-immersive-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform:
    scale(calc(1.10 - var(--scene-p) * 0.10))
    translate3d(0, calc((0.5 - var(--scene-p)) * 22px), 0);
  filter:
    saturate(calc(.88 + var(--scene-p) * .15))
    contrast(calc(.96 + var(--scene-p) * .05));
  will-change: transform, filter;
}

.iesys-immersive-content {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  position: relative;
  z-index: 4;
  color: #f8fbff;
  align-self: end;
  padding-bottom: clamp(52px, 9vh, 110px);
  transform: translateY(calc((1 - var(--scene-p)) * 34px));
  opacity: calc(.38 + var(--scene-p) * .62);
  will-change: transform, opacity;
}

.iesys-immersive-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #a9d6ff;
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.iesys-immersive-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: #56b7ff;
  box-shadow: 0 0 14px rgba(86, 183, 255, .8);
}

.iesys-immersive-title {
  max-width: 760px;
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(36px, 5.4vw, 82px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.iesys-immersive-copy {
  max-width: 590px;
  margin: 20px 0 0;
  color: rgba(242, 248, 255, .82) !important;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
}

/* Integrated light path: it belongs to each scene and grows with it. */
.iesys-scene-path {
  position: absolute;
  inset: auto 0 9vh 0;
  width: 100%;
  height: 100px;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.iesys-scene-path-base,
.iesys-scene-path-progress {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.iesys-scene-path-base {
  stroke: rgba(142, 210, 255, .15);
  stroke-width: 1;
}

.iesys-scene-path-progress {
  stroke: #56bdff;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(62, 173, 255, .86));
}

.iesys-scene-node {
  fill: #f8fdff;
  stroke: #58c0ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(65, 181, 255, .92));
}

/* The final 15% becomes a soft hand-off to the light surface. */
.iesys-immersive-transition {
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  z-index: 5;
  background: linear-gradient(to bottom, transparent, var(--iesys-bg));
  opacity: calc(max(0, (var(--scene-p) - .72) * 3.5));
  pointer-events: none;
}

/* Chapter variants: small image-position changes keep context intentional. */
.iesys-immersive-scene[data-scene="innovation"] img {
  object-position: 60% 50%;
}

.iesys-immersive-scene[data-scene="automation"] img {
  object-position: 64% 52%;
}

.iesys-immersive-scene[data-scene="infrastructure"] img {
  object-position: 48% 50%;
}

.iesys-immersive-scene[data-scene="commerce"] img {
  object-position: 63% 52%;
}

/* Dedicated dark contrast for Iesys Select, without making the whole site dark. */
html[data-theme="light"] :where(
  #iesys-select,
  #select,
  [data-section="iesys-select"],
  [data-section="select"]
) {
  --iesys-text: #f7fbff;
  --iesys-muted: #b5c1d2;
}

/* Reduce visual noise around the immersive storytelling. */
.iesys-immersive-scene + section,
section + .iesys-immersive-scene {
  border-top-color: transparent !important;
}

@media (max-width: 900px) {
  .iesys-immersive-scene {
    --scene-edge: 7vw;
    --scene-top: 5vh;
    --scene-radius: 24px;
    height: 118vh;
  }

  .iesys-immersive-content {
    width: min(100% - 32px, 720px);
    padding-bottom: 70px;
  }

  .iesys-immersive-title {
    font-size: clamp(34px, 9vw, 62px);
  }

  .iesys-scene-path {
    bottom: 4vh;
  }
}

@media (max-width: 620px) {
  .iesys-immersive-scene {
    --scene-edge: 4vw;
    --scene-top: 4vh;
    --scene-radius: 18px;
    height: 108vh;
  }

  .iesys-immersive-media::before {
    background:
      linear-gradient(180deg,
        rgba(3, 10, 19, .10),
        rgba(3, 10, 19, .24) 48%,
        rgba(3, 10, 19, .76));
  }

  .iesys-immersive-content {
    align-self: end;
    padding-bottom: 52px;
  }

  .iesys-immersive-copy {
    font-size: 15px;
  }

  .iesys-theme-toggle {
    width: 42px;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .iesys-immersive-scene {
    height: auto;
    min-height: 76vh;
  }

  .iesys-immersive-sticky {
    position: relative;
    min-height: 76vh;
    height: auto;
  }

  .iesys-immersive-media {
    clip-path: inset(0 round 0);
  }

  .iesys-immersive-media img,
  .iesys-immersive-content {
    transform: none !important;
  }

  .iesys-immersive-content {
    opacity: 1;
  }

  .iesys-scene-path-progress {
    stroke-dashoffset: 0 !important;
  }
}