/* Nova's local atomic field shares one lifecycle with hover and landing.
   The faceted Novelle star stays the source; the sky palette is untouched. */
[data-nai-open] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.nai-mark[data-reactor-phase] {
  --reactor-angle: 0deg;
  --reactor-core-y: 0deg;
  --reactor-roll: 0deg;
  --reactor-precession: 0deg;
  --reactor-tilt: 0deg;
  --reactor-energy: 0;
  --reactor-halo-opacity: 0;
  --reactor-ring-opacity: 0;
  --reactor-light-rgb: 216 232 243;
  perspective: 420px;
  isolation: auto;
  transform-style: preserve-3d;
}

.nai-mark[data-reactor-aura="ice"] { --reactor-light-rgb: 216 232 243; }
.nai-mark[data-reactor-aura="cyan"] { --reactor-light-rgb: 206 232 240; }
.nai-mark[data-reactor-aura="violet"] { --reactor-light-rgb: 224 224 239; }
.nai-mark[data-reactor-aura="white"] { --reactor-light-rgb: 237 245 250; }

.nai-atom-field {
  position: absolute;
  z-index: 2;
  inset: -30%;
  width: 160%;
  height: 160%;
  pointer-events: none;
  transform: translateZ(1px);
}
.has-atom-field > .nai-atom-orbit { display: none; }
.nai-mark[data-reactor-phase] .nai-star { width: 30px; height: 30px; }
.nai-dock .nai-mark[data-reactor-phase] .nai-star { width: 21px; height: 21px; }

.nai-mark[data-reactor-phase]::before,
.nai-mark[data-reactor-phase]::after {
  position: absolute;
  z-index: -1;
  inset: -28%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  opacity: var(--reactor-halo-opacity);
  transform: translateZ(-1px) scale(calc(.72 + var(--reactor-energy) * .3));
}

.nai-mark[data-reactor-phase]::before {
  background: radial-gradient(ellipse, rgb(var(--reactor-light-rgb) / .16), rgb(var(--reactor-light-rgb) / .035) 32%, transparent 66%);
}

.nai-mark[data-reactor-phase]::after {
  display: none;
}

.nai-mark[data-reactor-phase] > .nai-halo {
  opacity: calc(.12 + var(--reactor-halo-opacity) * .2);
  background: radial-gradient(ellipse, rgb(var(--reactor-light-rgb) / .12), rgb(var(--reactor-light-rgb) / .025) 35%, transparent 66%);
}

.nai-mark[data-reactor-phase] > .nai-orbit { opacity: 0; }

.nai-reactor-core {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotateX(var(--reactor-tilt, 0deg)) rotateY(var(--reactor-core-y, 0deg)) rotateZ(var(--reactor-roll, 0deg));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.nai-mark[data-reactor-phase] .nai-reactor-core > .nai-star {
  position: relative;
  margin: auto;
  backface-visibility: visible;
  filter: drop-shadow(0 0 2px rgb(var(--reactor-light-rgb) / .18));
  animation: none;
  transition: none;
}

.nai-entry:not(.is-forming):hover .nai-reactor-core > .nai-star,
.nai-entry:not(.is-forming) .nai-reactor-core > .nai-star,
.nai-dock .nai-reactor-core > .nai-star { transform: none; }

/* An electron's inverse rotation keeps its light round while its location
   follows the same three-dimensional plane as the silver orbital trace. */
.nai-atom-orbit {
  --reactor-axis: 0deg;
  --reactor-orbit-tilt: 68deg;
  position: absolute;
  z-index: auto;
  inset: 5%;
  box-sizing: border-box;
  border: .75px solid rgb(var(--reactor-light-rgb) / .48);
  border-top-color: rgb(var(--reactor-light-rgb) / .7);
  border-bottom-color: rgb(var(--reactor-light-rgb) / .22);
  border-radius: 50%;
  box-shadow: none;
  opacity: var(--reactor-ring-opacity, 0);
  transform: rotateZ(calc(var(--reactor-angle, 0deg) + var(--reactor-axis))) rotateX(var(--reactor-orbit-tilt)) rotateZ(var(--reactor-precession, 0deg)) scale3d(calc(.86 + var(--reactor-energy, 0) * .28), calc(.86 + var(--reactor-energy, 0) * .28), 1);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.nai-atom-orbit-0 { --reactor-axis: -25deg; --reactor-orbit-tilt: 68deg; }
.nai-atom-orbit-1 { --reactor-axis: 37deg; --reactor-orbit-tilt: 73deg; inset: 1%; }
.nai-atom-orbit-2 { --reactor-axis: 98deg; --reactor-orbit-tilt: 66deg; inset: 8%; }

.nai-electron {
  position: absolute;
  left: 100%;
  top: 50%;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #eff8ff;
  box-shadow: 0 0 2px rgb(var(--reactor-light-rgb) / .28);
  transform: translate3d(-50%, -50%, 1px) rotateZ(calc(0deg - var(--reactor-precession, 0deg))) rotateX(calc(0deg - var(--reactor-orbit-tilt))) rotateZ(calc(0deg - var(--reactor-angle, 0deg) - var(--reactor-axis)));
  transform-style: preserve-3d;
}

.nai-atom-orbit-1 > .nai-electron { left: 0; }
.nai-atom-orbit-2 > .nai-electron { width: 2px; height: 2px; }
.nai-dock .nai-electron { width: 2px; height: 2px; }

.nai-mark[data-reactor-phase="charging"] .nai-reactor-core,
.nai-mark[data-reactor-phase="ambient"] .nai-reactor-core,
.nai-mark[data-reactor-phase="cooling"] .nai-reactor-core,
.nai-mark[data-reactor-phase="burst"] .nai-reactor-core,
.nai-mark[data-reactor-phase="charging"] .nai-atom-orbit,
.nai-mark[data-reactor-phase="cooling"] .nai-atom-orbit,
.nai-mark[data-reactor-phase="burst"] .nai-atom-orbit { will-change: transform; }

.nai-mark[data-reactor-phase="idle"] .nai-atom-orbit,
.nai-mark[data-reactor-phase="settling"] .nai-atom-orbit { will-change: auto; }

/* Apply shake to normal page content, never to the body: fixed controls and
   the viewport canvas must keep their original coordinate system. */
/* The finite camera displacement must not become a horizontal scroll area. */
html:has(> body.nai-reactor-shaking),
body.nai-reactor-shaking { overflow-x: clip; }

body.nai-reactor-shaking > main,
body.nai-reactor-shaking > .site-header,
body.nai-reactor-shaking > .site-footer,
body.nai-easter-egg.nai-reactor-shaking > .nai-dock {
  transform: translate3d(var(--reactor-shake-x, 0px), var(--reactor-shake-y, 0px), 0) rotate(var(--reactor-shake-r, 0deg));
  transform-origin: 50% 12vh;
  will-change: transform;
}

body.nai-reactor-flare > .site-header {
  border-bottom-color: rgb(var(--reactor-light-rgb, 173 213 251) / calc(var(--reactor-flare-opacity, .5) * .7));
  box-shadow: 0 7px 30px rgb(var(--reactor-light-rgb, 173 213 251) / calc(var(--reactor-flare-opacity, .5) * .08));
}

body.nai-reactor-flare .hero h1 {
  text-shadow: 0 0 12px rgb(var(--reactor-light-rgb, 173 213 251) / calc(var(--reactor-flare-opacity, .5) * .12));
}

body.nai-reactor-flare .nai-entry {
  border-color: rgb(var(--reactor-light-rgb, 173 213 251) / calc(.25 + var(--reactor-flare-opacity, .5) * .45));
  box-shadow: 0 0 18px rgb(var(--reactor-light-rgb, 173 213 251) / calc(var(--reactor-flare-opacity, .5) * .08)), inset 0 0 12px rgb(var(--reactor-light-rgb, 173 213 251) / calc(var(--reactor-flare-opacity, .5) * .035));
}

@media (max-width: 380px) {
  .nai-electron { width: 2px; height: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .nai-mark[data-reactor-phase] { transform: none !important; }
  .nai-mark[data-reactor-phase]::before,
  .nai-mark[data-reactor-phase]::after,
  .nai-atom-field,
  .nai-atom-orbit { display: none !important; }
  .nai-reactor-core,
  .nai-reactor-core > .nai-star { transform: none !important; animation: none !important; will-change: auto !important; }
  body.nai-reactor-shaking > main,
  body.nai-reactor-shaking > .site-header,
  body.nai-reactor-shaking > .site-footer,
  body.nai-easter-egg.nai-reactor-shaking > .nai-dock { transform: none !important; will-change: auto !important; }
  body.nai-reactor-flare .hero h1 { text-shadow: none !important; }
  body.nai-reactor-flare > .site-header,
  body.nai-reactor-flare .nai-entry { box-shadow: none !important; }
}

body.nai-motion-off .nai-mark[data-reactor-phase] { transform: none !important; }
body.nai-motion-off .nai-mark[data-reactor-phase]::before,
body.nai-motion-off .nai-mark[data-reactor-phase]::after,
body.nai-motion-off .nai-atom-field,
body.nai-motion-off .nai-atom-orbit { display: none !important; }
body.nai-motion-off .nai-reactor-core,
body.nai-motion-off .nai-reactor-core > .nai-star { transform: none !important; animation: none !important; will-change: auto !important; }
body.nai-motion-off.nai-reactor-shaking > main,
body.nai-motion-off.nai-reactor-shaking > .site-header,
body.nai-motion-off.nai-reactor-shaking > .site-footer,
body.nai-motion-off.nai-easter-egg.nai-reactor-shaking > .nai-dock { transform: none !important; will-change: auto !important; }
body.nai-motion-off.nai-reactor-flare .hero h1 { text-shadow: none !important; }
body.nai-motion-off.nai-reactor-flare > .site-header,
body.nai-motion-off.nai-reactor-flare .nai-entry { box-shadow: none !important; }

/* Keep the phone's camera impulse on the visible section. Promoting the entire
   long page would allocate a large composited surface during Safari scrolling. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  body.nai-reactor-shaking > main { transform: none; will-change: auto; }
  body.nai-reactor-shaking:not(.nai-motion-off) > main > .nai-camera-layer {
    transform: translate3d(var(--reactor-shake-x, 0px), var(--reactor-shake-y, 0px), 0) rotate(var(--reactor-shake-r, 0deg));
    transform-origin: 50% 12vh;
    will-change: transform;
  }
  body.nai-supernova .hero.hero-with-key .key-card-scene { filter: none; transition: none; }
}