@view-transition {
  navigation: auto;
}

:root {
  --command-red: #ff334d;
  --command-cyan: #62e6ff;
  --command-blue: #4f7cff;
  --command-ink: #030711;
  --command-panel: rgba(8, 15, 29, .78);
  --command-line: rgba(126, 205, 255, .18);
}

html {
  background: var(--command-ink);
  scroll-behavior: smooth;
}

body.immersive-page {
  min-width: 320px;
  color: #f5f8ff;
  background:
    radial-gradient(circle at 76% 8%, rgba(70, 100, 255, .12), transparent 30rem),
    radial-gradient(circle at 20% 32%, rgba(255, 30, 64, .07), transparent 32rem),
    var(--command-ink);
}

.site-nav::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--command-cyan),var(--command-blue),var(--command-red));
  transform:scaleX(var(--page-progress,0));
  transform-origin:left center;
  transition:transform .12s linear;
  pointer-events:none;
}

.site-nav .nav__menu a { position:relative; transition:color .2s ease; }
.site-nav .nav__menu a::after {
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:-.65rem;
  height:1px;
  background:var(--command-cyan);
  transition:left .22s ease,right .22s ease;
}
.site-nav .nav__menu a:hover::after,
.site-nav .nav__menu a.is-active::after { left:0; right:0; }
.site-nav .nav__menu a.is-active { color:#fff; }

.scene-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #030711;
}

.scene-stage::before {
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:-22%;
  height:22%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(98,230,255,.035) 46%,rgba(98,230,255,.12) 50%,rgba(255,51,77,.03) 56%,transparent);
  opacity:.7;
  transform:translate3d(0,-120%,0);
  animation:sceneAmbientScan 14s linear infinite;
}

.scene-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 17, .94) 0%, rgba(3, 7, 17, .52) 42%, rgba(3, 7, 17, .08) 72%),
    linear-gradient(180deg, rgba(3, 7, 17, .2), rgba(3, 7, 17, .72));
}

.scene-stage__poster,
.scene-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-stage__poster {
  background:
    radial-gradient(circle at 74% 42%, rgba(255, 37, 70, .28), transparent 8%),
    radial-gradient(circle at 74% 42%, rgba(53, 106, 255, .18), transparent 31%),
    url('../assets/images/ai-command-hero-v1.webp') center / cover no-repeat;
  opacity: 1;
  transition: opacity 1.25s cubic-bezier(.2,.7,.2,1) .08s;
}

.home-page .scene-stage__poster { opacity:.72; transition:none; }
.scene-stage__poster--managed {
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 44%,rgba(255,42,70,.14),transparent 10%),
    radial-gradient(ellipse at 74% 44%,transparent 0 17%,rgba(98,230,255,.055) 17.2%,transparent 17.8% 25%,rgba(79,124,255,.04) 25.2%,transparent 26%),
    radial-gradient(ellipse at 74% 44%,rgba(30,74,128,.12),transparent 38%),
    linear-gradient(105deg,#030711 0 38%,rgba(3,7,17,.76) 58%,rgba(4,11,23,.42));
}
.scene-stage__poster--managed::before {
  content:"";
  position:absolute;
  inset:30% -12% -52% 33%;
  background-image:linear-gradient(rgba(98,230,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(98,230,255,.075) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.22;
  transform:perspective(720px) rotateX(65deg) rotateZ(-8deg);
  transform-origin:center;
  -webkit-mask-image:radial-gradient(ellipse at 58% 42%,#000,transparent 68%);
  mask-image:radial-gradient(ellipse at 58% 42%,#000,transparent 68%);
  animation:commandGridDrift 20s linear infinite;
}
.scene-stage__poster--managed::after {
  content:"";
  position:absolute;
  left:calc(74% - 260px);
  top:calc(44% - 150px);
  width:520px;
  height:300px;
  border:1px solid rgba(98,230,255,.1);
  border-radius:50%;
  box-shadow:0 0 70px rgba(79,124,255,.055),inset 0 0 46px rgba(255,51,77,.035);
  transform:rotate(-10deg);
  animation:commandOrbitDrift 16s ease-in-out infinite alternate;
}
.scene-fallback .scene-stage__poster--managed {
  background:
    linear-gradient(90deg,rgba(3,7,17,.96),rgba(3,7,17,.42) 58%,rgba(3,7,17,.16)),
    url('../assets/images/ai-command-hero-v2.webp') center/cover no-repeat;
}

.scene-stage canvas {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.15s cubic-bezier(.2,.7,.2,1);
}

.scene-stage.is-ready canvas { visibility:visible; opacity: 1; }
.scene-stage.is-ready .scene-stage__poster { opacity: .22; }
.home-page .scene-stage.is-ready .scene-stage__poster { opacity: .72; }
.home-page[data-active-scene="contact"] .scene-stage::before { animation:none; opacity:0; }
.scene-fallback .scene-stage canvas { display: none; }

.immersive-page main,
.immersive-page footer {
  position: relative;
  z-index: 2;
}

.immersive-page .site-nav {
  view-transition-name: site-navigation;
  background: rgba(3, 7, 17, .7);
  border-bottom: 1px solid rgba(126, 205, 255, .12);
  backdrop-filter: blur(20px) saturate(130%);
}

.immersive-page .brand { view-transition-name: site-brand; }

.brand-command {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  line-height: 1;
}

.brand-command strong {
  font-size: 1rem;
  letter-spacing: .04em;
}

.brand-command small {
  color: var(--command-cyan);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.scene-kicker,
.command-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  color: var(--command-cyan);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.scene-kicker::before,
.command-tag::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  transform-origin:left center;
  animation:kickerSignal 3.8s ease-in-out infinite;
}

@keyframes sceneAmbientScan {
  0%,12% { transform:translate3d(0,-120%,0); opacity:0; }
  20% { opacity:.7; }
  58%,100% { transform:translate3d(0,560%,0); opacity:0; }
}

@keyframes kickerSignal {
  0%,100% { transform:scaleX(.56); opacity:.5; }
  45% { transform:scaleX(1); opacity:1; }
}

@keyframes commandGridDrift {
  from { background-position:0 0,0 0; }
  to { background-position:0 64px,64px 0; }
}

@keyframes commandOrbitDrift {
  from { opacity:.38; transform:rotate(-12deg) scale(.98); }
  to { opacity:.72; transform:rotate(-7deg) scale(1.025); }
}

.command-panel {
  border: 1px solid var(--command-line);
  background: linear-gradient(145deg, rgba(12, 23, 42, .88), rgba(4, 10, 21, .62));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 24px 70px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
}

.command-panel::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: 4.2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--command-cyan), transparent);
}

/* Shared card interaction language. Pointer coordinates are supplied by the
   single delegated listener in main.js; without JavaScript the glow centers. */
[data-hover-card] {
  --card-pointer-x: 50%;
  --card-pointer-y: 50%;
  position:relative;
  overflow:hidden;
  border-radius: 16px;
  isolation: isolate;
}

[data-hover-card]:not([data-hover-card="media"]):not(.crew-seat)::after {
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(240px circle at var(--card-pointer-x) var(--card-pointer-y),rgba(98,230,255,.13),rgba(79,124,255,.045) 38%,transparent 72%);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}

[data-hover-card="interactive"]:focus-visible,
[data-hover-card="interactive"]:focus-within {
  outline:none;
  border-color:rgba(98,230,255,.48);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 22px 58px rgba(0,0,0,.3),0 0 28px rgba(62,193,255,.08);
}

[data-hover-card="informational"]:focus-visible,
[data-hover-card="informational"]:focus-within {
  outline:none;
  border-color:rgba(98,230,255,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.24),0 0 22px rgba(62,193,255,.055);
}

[data-hover-card]:not([data-hover-card="media"]):not(.crew-seat):focus-visible::after,
[data-hover-card]:not([data-hover-card="media"]):not(.crew-seat):focus-within::after { opacity:1; }

@media (hover:hover) and (pointer:fine) {
  [data-hover-card="interactive"]:hover {
    border-color:rgba(98,230,255,.48);
    box-shadow:inset 0 1px rgba(255,255,255,.07),0 22px 58px rgba(0,0,0,.3),0 0 28px rgba(62,193,255,.08);
  }

  [data-hover-card="informational"]:hover {
    border-color:rgba(98,230,255,.3);
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.24),0 0 22px rgba(62,193,255,.055);
  }

  [data-hover-card]:not([data-hover-card="media"]):not(.crew-seat):hover::after { opacity:1; }
}

@media (hover:none) {
  [data-hover-card]:not(.crew-seat):hover { transform:none !important; }
  [data-hover-card="interactive"]:active { filter:brightness(1.08); }
  [data-hover-card="interactive"]:not(.crew-seat):active { transform:translateY(-1px) !important; }
}

.demo-rail {
  position: fixed;
  right: 0;
  top: 48%;
  z-index: 30;
  display: grid;
  gap: .3rem;
  justify-items: center;
  width: 3.35rem;
  padding: 1rem .45rem;
  color: #fff;
  background: linear-gradient(180deg, #ff4059, #bf1734);
  box-shadow: 0 16px 50px rgba(255, 29, 68, .28);
  writing-mode: vertical-rl;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 12px 0 0 12px;
}

.immersive-page > .demo-rail { position: fixed; }

.demo-rail:hover { color: #fff; transform: translateX(-3px); }

.mobile-demo-bar { display: none; }

.subpage-end-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 4rem auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 1180px;
  border: 1px solid var(--command-line);
  background: linear-gradient(120deg, rgba(14, 34, 66, .9), rgba(88, 9, 32, .78));
}

.subpage-end-cta h2 { margin: 0 0 .55rem; }
.subpage-end-cta p { margin: 0; color: rgba(235, 243, 255, .72); }
.subpage-end-cta__actions { display: flex; gap: .75rem; flex: 0 0 auto; }

.profile-shell {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.brain-subpage main { position: relative; }
.brain-subpage main > section:not(.about-hero) {
  background: linear-gradient(180deg, rgba(3, 7, 17, .8), rgba(3, 7, 17, .64));
}

.brain-subpage .about-hero {
  min-height: 90svh;
  align-content: center;
}

.brain-subpage .section__head,
.brain-subpage .prose,
.brain-subpage .profile-toc { position: relative; z-index: 2; }

.brain-subpage .prose {
  padding: clamp(1.2rem, 4vw, 3rem);
  border: 1px solid var(--command-line);
  border-radius: 1rem;
  background: rgba(4, 10, 22, .82);
  backdrop-filter: blur(15px);
}

.brain-subpage .prose__h { scroll-margin-top: 7rem; }

.brain-subpage .about-cta {
  flex-wrap: wrap;
}

.profile-toc {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: .35rem;
  padding: 1rem;
  border-left: 1px solid var(--command-line);
  background: rgba(3, 7, 17, .52);
  backdrop-filter: blur(12px);
}

.profile-toc a {
  padding: .65rem .75rem;
  color: rgba(235, 243, 255, .6);
  font-size: .86rem;
}

.profile-toc a:hover,
.profile-toc a:focus-visible { color: #fff; background: rgba(98, 230, 255, .08); }

::view-transition-old(site-navigation),
::view-transition-new(site-navigation) { animation-duration: .36s; }

::view-transition-old(site-brand),
::view-transition-new(site-brand) { animation-duration: .52s; }

@media (max-width: 800px) {
  .scene-stage::after {
    background: linear-gradient(180deg, rgba(3, 7, 17, .18), rgba(3, 7, 17, .78) 62%, #030711);
  }

  .scene-stage__poster {
    background-position: 62% center;
  }

  .demo-rail { display: none; }

  .immersive-page > .mobile-demo-bar {
    position: fixed;
    inset: auto .75rem .75rem;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding: .5rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    background: rgba(4, 10, 22, .88);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(18px);
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    box-sizing: border-box;
  }

  .mobile-demo-bar a {
    display: grid;
    min-height: 2.85rem;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
  }

  .mobile-demo-bar a:first-child { background: rgba(255, 255, 255, .1); }
  .mobile-demo-bar a:last-child { background: var(--command-red); }
  .immersive-page { padding-bottom: 4.5rem; }

  .home-page .rag-assistant { right:.85rem; bottom:5.4rem; left:auto; width:3.5rem; height:3.5rem; }
  .immersive-page .rag-assistant__launcher { width:3.5rem; height:3.5rem; overflow:hidden; border:1px solid rgba(98,230,255,.34); border-radius:50%; background:rgba(5,14,29,.88); box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 22px rgba(98,230,255,.12); backdrop-filter:blur(14px); }
  .immersive-page .rag-assistant__launcher::before { width:3rem; height:.7rem; bottom:-.15rem; }
  .immersive-page .rag-assistant__launcher-icon { width:3.25rem; height:3.65rem; transform:translateY(.28rem); }
  .immersive-page .rag-assistant__launcher-bubble { display:none; }
  .immersive-page .rag-assistant__panel { right:0; left:auto; width:min(420px,calc(100vw - 1.5rem)); }

  .profile-shell { grid-template-columns: 1fr; }
  .profile-toc { position: static; grid-template-columns: repeat(2, 1fr); }

  .subpage-end-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 960px) {
  .immersive-page .nav__toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scene-stage canvas { display: none; }
  .scene-stage__poster { opacity: .55; }
  .scene-stage__poster--managed {
    background:
      linear-gradient(180deg,rgba(3,7,17,.28),rgba(3,7,17,.72)),
      url('../assets/images/ai-command-hero-v2.webp') 62% center/cover no-repeat;
  }
  .scene-stage::before { display:none; }
  [data-hover-card],
  [data-hover-card]:hover,
  [data-hover-card]:focus-visible,
  [data-hover-card]:focus-within { transform:none !important; transition-duration:.01ms !important; }
  [data-hover-card]::before,
  [data-hover-card]::after { transition:none !important; }
  [data-hover-card]:not([data-hover-card="media"])::after { display:none; }
}

@media print {
  .scene-stage, .site-nav, .demo-rail, .mobile-demo-bar, .chat-widget { display: none !important; }
  body.immersive-page { color: #111; background: #fff; padding: 0; }
  .immersive-page > :not(.scene-stage):not(.bg-field) { color: #111; }
  .command-panel { color: #111; background: #fff; border: 1px solid #bbb; box-shadow: none; }
  a { color: #111; text-decoration: underline; }
}