/* Seven optical studies, drawn in SVG and separated into depth planes. */
.sle-illustration {
  position: relative;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  contain: layout style;
}
.section-illustration { display: block; width: 100%; height: 100%; overflow: visible; }
.art-layer {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: translate(var(--art-x, 0px), var(--art-y, 0px)) rotate(var(--art-roll, 0deg));
}
.is-art-visible .art-layer { will-change: transform; }
.art-float { animation: art-levitate 12s ease-in-out infinite; }
.art-flow { animation: art-transmit 3s linear infinite; }
.art-stars circle { animation: art-twinkle 4.8s ease-in-out infinite; }
.art-stars circle:nth-child(3n) { animation-delay: -1.7s; animation-duration: 6.2s; }
.art-stars circle:nth-child(4n) { animation-delay: -3.1s; animation-duration: 7.4s; }
.art-stars circle:nth-child(5n) { animation-delay: -.8s; animation-duration: 5.5s; }
.art-node { transform-box: fill-box; transform-origin: center; animation: art-node-pulse 3.6s ease-in-out infinite; }
.art-node:nth-of-type(2n) { animation-delay: -1.8s; }
.art-crystal { transform-box: fill-box; transform-origin: center; animation: art-crystal-breathe 6s ease-in-out infinite; }
.art-prism:nth-of-type(2n) .art-crystal { animation-delay: -2.5s; }
.illustration-identity .art-float { animation-delay: -4s; }
.illustration-signal .art-float { animation-duration: 9s; animation-delay: -2s; }
.illustration-horizon .art-float { animation-duration: 15s; animation-delay: -6s; }

.sle-illustration:not(.is-art-visible) *,
:is(.tab-hidden, .motion-paused) .sle-illustration * { animation-play-state: paused !important; }

/* The origin study frames the live particle sculpture without entering the copy. */
.illustration-origin { position: absolute; inset: 0; z-index: 0; opacity: .76; }
.illustration-origin .art-depth-core { animation: art-origin-breathe 9s ease-in-out infinite; }
.hero-art canvas { z-index: 1; }
.hero-art .orbital-line { opacity: .35; }

/* A full illustration in the quiet editorial column beside the vision. */
.illustration-identity { width: calc(100% + 36px); max-width: 320px; aspect-ratio: 1; margin: 25px -18px 0; }
.illustration-identity .art-ribbon { animation: art-ribbon-drift 7s ease-in-out infinite; }
.illustration-identity .art-identity-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: art-identity-orbit 12s linear infinite;
}

/* Memory strata occupy the lower plane beneath the interactive identity field. */
.illustration-memory { position: absolute; inset: 34px 0 34px; z-index: 0; }
.illustration-memory .art-plate { transform-box: fill-box; transform-origin: center; animation: art-memory-breathe 6.4s ease-in-out infinite; }
.illustration-memory .art-plate:nth-of-type(2) { animation-delay: -1.6s; }
.illustration-memory .art-plate:nth-of-type(3) { animation-delay: -3.2s; }
.illustration-memory .art-plate:nth-of-type(4) { animation-delay: -4.8s; }
.life-visual canvas { z-index: 1; }
.life-visual-top, .life-visual-bottom, .life-center-label { z-index: 3; }

/* The experiment retains its responsive brand mark at the center of the chamber. */
.illustration-laboratory { position: absolute; inset: -38px -20px; z-index: 0; }
.illustration-laboratory .art-chamber { animation: art-chamber-breathe 11s ease-in-out infinite; }
.illustration-laboratory .art-scan { transform-box: view-box; transform-origin: center; animation: art-lab-scan 5.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.logo-reactor .research-orbit { opacity: .45; }
.logo-reactor .reactor-grid { opacity: .5; }
.logo-reactor .reactor-atmosphere { z-index: 0; }

/* A sculptural K in the existing identity specimen. */
.illustration-karina { position: absolute; inset: 14px -24px 26px; z-index: 1; }
.illustration-karina .art-monogram { animation: art-monogram-breathe 8s ease-in-out infinite; }
.illustration-karina .art-k-sheen { animation: art-k-sheen 4.8s linear infinite; }
.specimen-frame .specimen-k { display: none; }
.specimen-frame .specimen-contour { opacity: .25; }
.specimen-frame .specimen-top, .specimen-frame .specimen-bottom { z-index: 3; }

/* The launch beacon gives the editorial side of the interest form a visual anchor. */
.illustration-signal { width: 100%; max-width: 490px; aspect-ratio: 600 / 360; margin: 14px 0 -13px; }
.illustration-signal .art-beacon { animation: art-beacon-pulse 4.2s ease-in-out infinite; }
.illustration-signal .art-signal-ring { transform-box: fill-box; transform-origin: center; animation: art-signal-ring 5s ease-in-out infinite; }
.illustration-signal .art-signal-ring:nth-of-type(2) { animation-delay: -1.1s; }
.illustration-signal .art-signal-ring:nth-of-type(3) { animation-delay: -2.3s; }
.illustration-signal .art-signal-ring:nth-of-type(4) { animation-delay: -3.4s; }
.coming-promises { margin-top: 8px; }
.coming-copy .signal-signature { margin-top: 26px; }

/* The final portal stays above the headline, preserving the reading area. */
.illustration-horizon { width: min(780px, 100%); aspect-ratio: 900 / 420; margin: -85px auto 20px; }
.illustration-horizon .art-portal {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: art-portal-drift 10s ease-in-out infinite;
}
.illustration-horizon .art-portal-ring {
  /* Preserve the SVG's fixed perspective: light changes, the halo never spins. */
  stroke-width: .8;
  opacity: .24;
  animation: art-portal-light 7s ease-in-out infinite;
}

@keyframes art-levitate {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-7px); }
}
@keyframes art-transmit { to { stroke-dashoffset: -40; } }
@keyframes art-twinkle { 0%, 100% { opacity: .18; } 48% { opacity: .78; } 62% { opacity: .34; } }
@keyframes art-node-pulse { 0%, 100% { opacity: .62; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes art-crystal-breathe { 0%, 100% { opacity: .78; transform: translateY(2px) scale(.98); } 50% { opacity: 1; transform: translateY(-3px) scale(1.025); } }
@keyframes art-origin-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes art-ribbon-drift {
  0%, 100% { opacity: .72; transform: translate(-6px, 9px) rotate(-2.4deg) scale(.985); }
  50% { opacity: 1; transform: translate(7px, -12px) rotate(2.4deg) scale(1.018); }
}
@keyframes art-identity-orbit { to { transform: rotate(360deg); stroke-dashoffset: -56; } }
@keyframes art-memory-breathe { 0%, 100% { opacity: .5; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes art-chamber-breathe { 0%, 100% { transform: translateY(3px) scale(.992); } 50% { transform: translateY(-4px) scale(1.008); } }
@keyframes art-lab-scan { 0%, 100% { opacity: 0; transform: translateY(-150px) scaleX(.6); } 18% { opacity: .85; } 82% { opacity: .38; } 95% { opacity: 0; transform: translateY(150px) scaleX(1); } }
@keyframes art-monogram-breathe { 0%, 100% { transform: translateY(5px) scale(.99); } 50% { transform: translateY(-7px) scale(1.012); } }
@keyframes art-k-sheen { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -468; } }
@keyframes art-beacon-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@keyframes art-signal-ring { 0%, 100% { opacity: .25; transform: scale(.94); } 52% { opacity: .85; transform: scale(1.045); } }
@keyframes art-portal-drift {
  0%, 100% { opacity: .88; transform: translateY(6px); }
  50% { opacity: 1; transform: translateY(-8px); }
}
@keyframes art-portal-light {
  0%, 100% { opacity: .16; }
  50% { opacity: .34; }
}

@media (max-width: 1024px) {
  .illustration-identity { width: calc(100% + 26px); margin-left: -13px; margin-right: -13px; }
  .illustration-laboratory { inset: -25px -16px; }
  .illustration-karina { inset: 9px -22px 24px; }
  .illustration-horizon { width: min(680px, 100%); margin-top: -70px; }
}
@media (max-width: 740px) {
  .illustration-signal { max-width: 410px; margin: 5px auto -14px; }
}
@media (max-width: 640px) {
  .vision-aside { display: grid; grid-template-columns: 40px 1fr; gap: 15px 18px; }
  .vision-aside .mini-orbit { margin: 0; }
  .illustration-identity { grid-column: 1 / -1; width: min(275px, 100%); margin: 0 auto -16px; }
  .illustration-origin { opacity: .63; }
  .illustration-memory { inset: 38px -7px 39px; }
  .illustration-laboratory { inset: -20px -8px; }
  .illustration-karina { inset: 14px -26px 21px; }
  .illustration-horizon { width: 100%; margin: -35px auto 15px; }
  .art-stars circle { animation-duration: 7s; }
  .art-node, .art-crystal { animation-duration: 7.5s; }
}
@media (prefers-reduced-motion: reduce) {
  .art-layer { transform: none !important; will-change: auto !important; }
  .sle-illustration * { animation: none !important; }
}
@media (forced-colors: active) {
  .sle-illustration { opacity: .35; }
}
@media print {
  .sle-illustration { display: none; }
  .specimen-frame .specimen-k { display: block; }
  .coming-promises { margin-top: 24px; }
}