/* Learning feedback timing overrides and restrained ambient motion.
   Keep the insight readable long enough for the eye to follow it into retained cognition. */

body:not(.drift-started) .drift-shell {
  opacity: 0;
}

body.drift-started .drift-shell {
  opacity: 1;
  transition: opacity 1.35s cubic-bezier(.16,.76,.18,1);
}

.drift-splash {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 1;
  transition: opacity 1.25s cubic-bezier(.16,.76,.18,1), visibility 1.25s step-end;
}

.drift-splash[hidden] {
  display: none;
}

.drift-splash.leaving {
  opacity: 0;
  pointer-events: none;
}

.splash-inner {
  display: grid;
  justify-items: center;
  gap: 34px;
  padding: 24px;
  animation: splashBodyDrift 17s ease-in-out infinite;
}

.splash-mark {
  margin: 0;
  color: rgba(239,246,238,.78);
  font: 500 clamp(8px, 1.45vw, 15px)/1.18 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
  text-align: left;
  text-shadow: 0 0 18px rgba(239,246,238,.06);
  user-select: none;
  animation: splashMarkDrift 21s ease-in-out -4s infinite;
}

.splash-start {
  border: 0;
  background: transparent;
  padding: 8px 10px;
  color: rgba(239,246,238,.58);
  font: inherit;
  font-size: 10px;
  letter-spacing: .16em;
  cursor: pointer;
  animation: splashStartDrift 14s ease-in-out -2s infinite;
  transition: color 320ms ease, text-shadow 320ms ease;
}

.splash-start:hover,
.splash-start:focus-visible {
  color: rgba(239,246,238,.94);
  text-shadow: 0 0 10px rgba(239,246,238,.12);
  outline: none;
}

.splash-start:disabled {
  cursor: default;
}

.start-cursor {
  display: inline-block;
  margin-left: .6em;
  color: rgba(239,246,238,.72);
  animation: splashCursorBlink 1.05s steps(1,end) infinite;
}

.insight-bulb.flash {
  animation-duration: 2.65s;
  animation-timing-function: cubic-bezier(.16,.76,.18,1);
}

.status-line:has(.insight-bulb.flash) #statusText {
  animation: statusIndicatorEaseOut 3.2s cubic-bezier(.16,.76,.18,1) both;
}

/* Idle motion intentionally uses sub-pixel translation and long, unsynchronised cycles.
   It should read as presence, never as movement demanding attention. */
body.drift-started .brand {
  animation: ambientDriftA 19s ease-in-out -3s infinite;
}

body.drift-started .passage p:nth-child(3n+1),
body.drift-started .response p:nth-child(3n+1) {
  animation: ambientDriftA 17s ease-in-out -6s infinite;
}

body.drift-started .passage p:nth-child(3n+2),
body.drift-started .response p:nth-child(3n+2) {
  animation: ambientDriftB 23s ease-in-out -11s infinite;
}

body.drift-started .passage p:nth-child(3n),
body.drift-started .response p:nth-child(3n) {
  animation: ambientDriftC 20s ease-in-out -8s infinite;
}

body.drift-started .story-memory {
  animation: ambientDriftB 26s ease-in-out -4s infinite;
}

body.drift-started .composition-rail {
  animation: ambientDriftC 22s ease-in-out -10s infinite;
}

body.drift-started .status-line {
  animation: ambientDriftA 24s ease-in-out -12s infinite;
}

body.drift-started .mind-grids {
  animation: ambientDriftB 25s ease-in-out -7s infinite;
}

body.drift-started .mind-hint {
  animation: ambientDriftC 21s ease-in-out -5s infinite;
}

body.drift-started .mind-meta {
  animation: ambientDriftA 27s ease-in-out -13s infinite;
}

body.drift-started .story-nav-prev {
  animation: ambientDriftB 29s ease-in-out -9s infinite;
}

body.drift-started .story-nav-next {
  animation: ambientDriftC 31s ease-in-out -15s infinite;
}

@keyframes insightFlash {
  0% { opacity:0; transform:translateY(2px) scale(.76); }
  14% { opacity:1; transform:translateY(0) scale(1.035); }
  52% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-1px) scale(.94); }
}

@keyframes statusIndicatorEaseOut {
  0%, 46% { opacity:1; }
  100% { opacity:0; }
}

@keyframes ambientDriftA {
  0%,100% { translate: 0 0; }
  33% { translate: .38px -.58px; }
  68% { translate: -.24px .34px; }
}

@keyframes ambientDriftB {
  0%,100% { translate: 0 0; }
  38% { translate: -.42px -.3px; }
  72% { translate: .31px .51px; }
}

@keyframes ambientDriftC {
  0%,100% { translate: 0 0; }
  31% { translate: .22px .46px; }
  66% { translate: -.36px -.42px; }
}

@keyframes splashBodyDrift {
  0%,100% { translate: 0 0; }
  34% { translate: .55px -.7px; }
  69% { translate: -.45px .5px; }
}

@keyframes splashMarkDrift {
  0%,100% { translate: 0 0; opacity: .86; }
  42% { translate: -.7px .45px; opacity: .92; }
  75% { translate: .55px -.35px; opacity: .88; }
}

@keyframes splashStartDrift {
  0%,100% { translate: 0 0; }
  45% { translate: .45px -.4px; }
  78% { translate: -.35px .3px; }
}

@keyframes splashCursorBlink {
  0%,48% { opacity: .9; }
  49%,100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.drift-started) .drift-shell { opacity: 0; }
  body.drift-started .drift-shell { opacity: 1; }
}