/* Lumedia motion layer. Decorative media stays behind readable, usable content. */
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #101311;
}
.hero-art,
.hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-art {
  z-index: -3;
  background: #101311 url('./assets/lumedia-ambient-poster.webp') center right / cover no-repeat;
}
.hero-art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: .88;
}
.hero-wash {
  z-index: -2;
  background:
    linear-gradient(0deg, #101311 0%, #10131100 28%, #10131100 85%, #10131180 100%),
    linear-gradient(90deg, #101311f7 0%, #101311d9 30%, #10131175 55%, #1013110d 100%);
}
.hero-stage .hero { position: relative; }
.hero-stage .hero-bottom { border-color: #6b8a5a4f; }
.hero-stage .hero-bottom > span:last-child { gap: 18px; }
.hero-stage .hero-bottom .hero-tagline { font: 11px/1.6 var(--font); color: #b4c1b0; }
.hero-stage .motion-toggle .motion-symbol { font: 12px/1 var(--font); color: var(--accent); }
.hero-art.poster-only video { opacity: 0; }
.hero-stage .hero h1 { text-shadow: 0 3px 30px #0004; }
.hero-stage .workflow-shell {
  background: #111a13eb;
  border-color: #92bf6266;
  box-shadow: 0 25px 70px #0007, 0 0 50px #acfb7b0d;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.hero-stage .workflow-shell:hover {
  border-color: #bded8ca6;
  box-shadow: 0 28px 75px #0008, 0 0 70px #acfb7b20;
}
.hero-stage .workflow-heading { background: #121b14b3; border-radius: 11px 11px 0 0; }
.hero-stage .canvas-grid { opacity: .8; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  gap: 9px;
  border: 1px solid #657859;
  border-radius: 5px;
  background: #162013;
  color: #dfebd6;
  font: 10px/1.4 var(--mono);
  white-space: nowrap;
}
.motion-toggle:hover { background: #24351e; border-color: #c7f59a; }
.motion-toggle:disabled { opacity: .75; cursor: default; }
.motion-toggle .motion-symbol { font: 12px/1 var(--font); color: var(--accent); }
.hero-stage .hero-bottom .motion-label { font: inherit; color: inherit; }
.control-section { position: relative; isolation: isolate; overflow: clip; }
.control-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #172019 0%, #172019e8 45%, #172019a6 100%), url('./assets/lumedia-ambient-poster.webp') 85% 50% / cover;
  opacity: .8;
  transform-origin: right center;
  pointer-events: none;
}
.ownership-band { position: relative; overflow: hidden; }
.ownership-band::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid #c7f59a16;
  border-radius: 50%;
  right: -100px;
  top: -60px;
  pointer-events: none;
  box-shadow: 0 0 0 22px #c7f59a05, 0 0 0 45px #c7f59a04;
}
.button { position: relative; overflow: hidden; }
.button::after {
  content: '';
  position: absolute;
  inset: -100% -30%;
  background: linear-gradient(115deg, transparent 42%, #fff4 49%, transparent 57%);
  transform: translateX(-75%);
  pointer-events: none;
}
.solution summary { transition: color .2s ease; }
.solution summary:hover { color: var(--accent); }
.platform { transition: color .25s ease, transform .25s ease; }
.platform:hover { color: var(--ink); transform: translateY(-3px); }
.step-number > span { transition: transform .3s ease, color .3s ease; }
.process-steps article:hover .step-number > span { transform: translate(4px, -4px); color: var(--accent); }

html[data-motion='on'] .workflow-shell::before { animation: lumedia-halo 9s ease-in-out infinite; }
html[data-motion='on'] .control-section::before { animation: lumedia-breathe 16s ease-in-out infinite alternate; }
html[data-motion='on'] .hero-copy .signal-dot { animation: lumedia-signal 3.5s ease-in-out infinite; }
html[data-motion='on'] .connector span { animation: lumedia-flow 3.5s ease-in-out infinite; }
html[data-motion='on'] .branch-connectors span::after { animation: lumedia-branch 3.5s 1.1s ease-in-out infinite; }
html[data-motion='on'] .button:hover::after { animation: lumedia-shine .8s ease-out; }
html[data-motion='on'] .ownership-art .brand-symbol { animation: lumedia-mark 11s ease-in-out infinite; }
html[data-motion='paused'] *,
html[data-motion='paused'] *::before,
html[data-motion='paused'] *::after { animation-play-state: paused !important; }

@keyframes lumedia-halo { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes lumedia-breathe { from { transform: scale(1); opacity: .55; } to { transform: scale(1.06); opacity: .9; } }
@keyframes lumedia-signal { 0%,100% { box-shadow: 0 0 0 0 #c7f59a00; } 50% { box-shadow: 0 0 0 5px #c7f59a12, 0 0 16px #c7f59a45; } }
@keyframes lumedia-flow { 0%,15% { translate: 0 -29px; opacity: 0; } 35% { opacity: 1; } 70%,100% { translate: 0 0; opacity: 0; } }
@keyframes lumedia-branch { 0%,15% { translate: 0 -16px; opacity: 0; } 35% { opacity: 1; } 70%,100% { translate: 0 0; opacity: 0; } }
@keyframes lumedia-shine { to { transform: translateX(75%); } }
@keyframes lumedia-mark { 0%,100% { rotate: 0deg; } 50% { rotate: 8deg; } }

@media(max-width:960px) {
  .hero-stage .hero-bottom { gap: 20px; }
  .hero-stage .hero-bottom > span:last-child { gap: 12px; }
  .hero-bottom .hero-tagline { display: none; }
}
@media(max-width:760px) {
  .hero-art { background-position: 68% 50%; }
  .hero-art video { object-position: 68% 50%; opacity: .62; }
  .hero-wash { background: linear-gradient(180deg, #101311cc 0%, #101311a6 35%, #10131140 65%, #101311 100%); }
  .hero-stage .hero-copy { text-shadow: 0 2px 20px #101311; }
  .motion-toggle { font-size: 9px; padding: 7px 10px; }
  .hero-stage .hero-bottom > span:first-child { max-width: 130px; line-height: 1.7; }
  .control-section::before { opacity: .6; }
}
@media(prefers-reduced-motion:reduce) {
  html:not([data-manual-motion='true']) .hero-art video { display: none; }
  .platform:hover,.process-steps article:hover .step-number > span { transform: none; }
}