/* The Quiet Scribe · Motion System
   One shared motion layer for the static Cloudflare Pages build.
   Keep content and application state independent from decorative animation. */

:root {
  --qs-motion-fast: 160ms;
  --qs-motion-base: 240ms;
  --qs-motion-screen: 460ms;
  --qs-motion-scene: 6.4s;
  --qs-motion-ease: cubic-bezier(.2, .7, .2, 1);
  --qs-motion-soft: cubic-bezier(.22, .72, .2, 1);
}

/* Keyboard users get the same clear focus signal, without hover-only behavior. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--qs-accent, #c0bcde) 78%, white);
  outline-offset: 3px;
}

/* Screen changes are consistent across the rooms while existing screen logic stays intact. */
.screen.active {
  animation: qs-motion-screen-in var(--qs-motion-screen) var(--qs-motion-ease) both;
}

@keyframes qs-motion-screen-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The room grid enters in a soft, short stagger, not a cascade that delays use. */
#purpose.active .qs-room-card {
  animation: qs-motion-room-in 440ms var(--qs-motion-ease) both;
}
#purpose.active .qs-room-card:nth-child(2) { animation-delay: 45ms; }
#purpose.active .qs-room-card:nth-child(3) { animation-delay: 90ms; }
#purpose.active .qs-room-card:nth-child(4) { animation-delay: 135ms; }

@keyframes qs-motion-room-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Small, deliberate interactions. Avoid transition: all so layout never animates accidentally. */
.qs-room-card,
.reading-card,
.entry,
.person-card,
.settings-card,
.thought-box,
.creator-links a,
.qs-mark-card {
  transition:
    transform var(--qs-motion-base) var(--qs-motion-ease),
    border-color var(--qs-motion-base) ease,
    background-color var(--qs-motion-base) ease,
    box-shadow var(--qs-motion-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .reading-card:hover,
  .entry:hover,
  .person-card:hover,
  .settings-card:hover,
  .thought-box:hover,
  .creator-links a:hover,
  .qs-mark-card:hover {
    transform: translateY(-2px);
    border-color: var(--qs-line-bright, rgba(193,194,226,.34));
  }

  button:not(:disabled):hover {
    filter: brightness(1.045);
  }
}

button:not(:disabled):active {
  transform: translateY(1px) scale(.99);
  filter: brightness(.98);
}

button:disabled {
  cursor: not-allowed;
}

/* Reusable entrance for messages added after the chat is already open. */
#chat .message.qs-motion-new {
  animation: qs-motion-message-in 300ms var(--qs-motion-ease) both;
}

@keyframes qs-motion-message-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Opening scene: let the sky, horizon, moon and title transition together. */
#qs-opening-scene {
  transition: opacity 1.35s var(--qs-motion-soft);
}

.qs-day-sky,
.qs-day-haze,
.qs-night-sky,
.qs-night-haze,
.qs-stars,
.qs-moon,
.qs-day-glow {
  transition: opacity var(--qs-motion-scene) var(--qs-motion-soft);
}

.qs-moon {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate3d(0, 12px, 0) scale(.97);
  transition:
    opacity 5.8s var(--qs-motion-soft),
    transform 5.8s var(--qs-motion-soft);
}

#qs-opening-scene.qs-night .qs-moon {
  transform: translate3d(0, 0, 0) scale(1);
}

.qs-day-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    qs-motion-sun-breathe 7s ease-in-out infinite,
    qs-motion-sun-drift 11s ease-in-out infinite alternate;
}

@keyframes qs-motion-sun-breathe {
  0%, 100% { opacity: .94; }
  50%      { opacity: 1; }
}
@keyframes qs-motion-sun-drift {
  from { transform: scale(.99); }
  to   { transform: scale(1.035); }
}

.qs-stars circle:nth-child(4n + 1) {
  animation: qs-motion-star-glint 4.8s ease-in-out 300ms infinite;
}
.qs-stars circle:nth-child(4n + 2) {
  animation: qs-motion-star-glint 3.7s ease-in-out 1.1s infinite;
}
.qs-stars circle:nth-child(4n + 3) {
  animation: qs-motion-star-glint 5.5s ease-in-out 700ms infinite;
}

@keyframes qs-motion-star-glint {
  0%, 100% { opacity: .48; }
  50%      { opacity: 1; }
}

/* A restrained dusk tint sits above the artwork and below the opening controls. */
#qs-opening-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 70% 57%, rgba(148, 127, 174, .16), transparent 42%),
    linear-gradient(180deg, rgba(9, 16, 33, .12), transparent 40%, rgba(11, 20, 31, .14));
  transition: opacity 5.6s var(--qs-motion-soft);
}
#qs-opening-scene.qs-night::before { opacity: 1; }

#qs-opening-title {
  transition: opacity 900ms ease, letter-spacing 1.1s var(--qs-motion-soft);
}
#qs-opening-scene.qs-night #qs-opening-title {
  animation: qs-motion-title-night 1.1s var(--qs-motion-ease) both;
}
@keyframes qs-motion-title-night {
  from { opacity: .78; transform: translate3d(0, 5px, 0); letter-spacing: .08em; }
  to   { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .12em; }
}

#qs-opening-actions button,
#qs-opening-skip {
  transition:
    opacity var(--qs-motion-base) ease,
    transform var(--qs-motion-base) var(--qs-motion-ease),
    background-color var(--qs-motion-base) ease,
    border-color var(--qs-motion-base) ease;
}

/* Animations should not burn cycles while the tab is backgrounded. */
body.qs-motion-paused *,
body.qs-motion-paused *::before,
body.qs-motion-paused *::after {
  animation-play-state: paused !important;
}

/* STABLE MOTION PASS
   Lightweight, predictable motion. Avoid SVG transforms and blur filters on touch devices. */

/* Keep screen changes smooth without blur filters or competing transforms. */
.screen.active {
  animation: qs-motion-screen-in var(--qs-motion-screen) var(--qs-motion-ease) both;
}

/* A restrained 2D hover gives room cards a tactile response on mouse devices only. */
button.qs-room-card {
  transition:
    transform var(--qs-motion-base) var(--qs-motion-ease),
    border-color var(--qs-motion-base) ease,
    background-color var(--qs-motion-base) ease,
    box-shadow var(--qs-motion-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  button.qs-room-card:hover {
    transform: translateY(-2px);
    border-color: var(--qs-line-bright, rgba(193, 194, 226, .38));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  }

  .reading-card:hover,
  .entry:hover,
  .person-card:hover,
  .settings-card:hover,
  .thought-box:hover,
  .creator-links a:hover,
  .qs-mark-card:hover {
    transform: translateY(-2px);
  }
}

/* Scroll arrivals use opacity and a small vertical offset only. */
body.qs-reveal-enhanced .qs-scroll-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--qs-motion-ease),
    transform 420ms var(--qs-motion-ease);
  transition-delay: var(--qs-reveal-delay, 0ms);
}

body.qs-reveal-enhanced .qs-scroll-reveal.qs-scroll-reveal-visible,
body.qs-reveal-enhanced .qs-scroll-reveal.qs-scroll-reveal-visible:hover {
  opacity: 1;
  transform: none;
}

/* Keep the opening art still: the day/night crossfade supplies the cinematic motion. */
#qs-opening-art {
  transform: none;
  transition: none;
}

#qs-opening-caption {
  text-shadow: 0 2px 18px rgba(8, 13, 24, .28);
}

#qs-opening-actions button {
  transition:
    opacity var(--qs-motion-base) ease,
    transform var(--qs-motion-base) var(--qs-motion-ease),
    background-color var(--qs-motion-base) ease,
    border-color var(--qs-motion-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  #qs-opening-actions button:hover {
    transform: translateY(-2px);
  }
}

/* Reduced-motion users see the complete scene immediately. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .screen.active,
  #purpose.active .qs-room-card,
  .qs-room-card,
  .reading-card,
  .entry,
  .person-card,
  .settings-card,
  .thought-box,
  .creator-links a,
  .qs-mark-card,
  button:not(:disabled):active {
    animation: none !important;
    transform: none !important;
  }

  body.qs-reveal-enhanced .qs-scroll-reveal,
  body.qs-reveal-enhanced .qs-scroll-reveal.qs-scroll-reveal-visible,
  body.qs-reveal-enhanced .qs-scroll-reveal.qs-scroll-reveal-visible:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* FINAL FORM II · deeper skies, moonlit foliage, and quiet canopy motion */
.qs-day-atmosphere,
.qs-night-nebula,
.qs-night-constellation,
.qs-shooting-star {
  pointer-events: none;
  transition: opacity 5.2s cubic-bezier(.22,.61,.36,1);
}
.qs-day-atmosphere { opacity: .88; }
.qs-night-nebula { opacity: 0; }
.qs-night-constellation { opacity: 0; }
.qs-shooting-star {
  opacity: 0;
  pointer-events: none;
}
#qs-opening-scene.qs-night .qs-day-atmosphere { opacity: 0; }
#qs-opening-scene.qs-night .qs-night-nebula { opacity: .96; }
#qs-opening-scene.qs-night .qs-night-constellation { opacity: .62; }
#qs-opening-scene.qs-night .qs-shooting-star { opacity: 0; }

/* Grounded cast shadow: visible in daylight, smoothly gone by night. */
.qs-tree-cast-shadow {
  pointer-events: none;
  opacity: .88;
  transition: opacity 5.2s ease;
}
#qs-opening-scene.qs-night .qs-tree-cast-shadow {
  opacity: 0;
}

/* Barely-there canopy sway, pivoting at the trunk base. */
.qs-tree-world {
  transform-box: view-box;
  transform-origin: 360px 900px;
  animation: qs-tree-breeze 6.8s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes qs-tree-breeze {
  from { transform: rotate(-.28deg); }
  to   { transform: rotate(.28deg); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-tree-world { animation: none !important; }
}

/* Small specular glints make the night sky shimmer without filling it with noise. */
.qs-stars circle {
  animation: qs-star-lumen 4.1s ease-in-out infinite;
}
.qs-stars circle:nth-child(4n + 1) { animation-delay: -1.35s; }
.qs-stars circle:nth-child(4n + 2) { animation-delay: -2.7s; }
.qs-stars circle:nth-child(5n) { animation-duration: 5.7s; }
@keyframes qs-star-lumen {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}
#qs-opening-scene.qs-night .qs-moon { filter: none; }

@media (max-width: 700px) {
  .qs-shooting-star { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-canopy-layer,
  .qs-canopy-detail,
  .qs-stars circle,
  .qs-shooting-star { animation: none !important; }
  .qs-day-atmosphere,
  .qs-night-nebula,
  .qs-night-constellation,
  .qs-tree-world,
  .qs-tree-crown-rim,
  .qs-tree-root-detail,
  .qs-moon { transition: none !important; }
}


/* Hotfix: keep SVG scene motion composited safely on mobile GPUs. */
.qs-day-clouds,
.qs-night-clouds,
.qs-day-birds,
.qs-night-beams,
.qs-leaf-veins,
.qs-leaf-glints {
  pointer-events: none;
}
.qs-day-clouds,
.qs-night-clouds,
.qs-day-birds,
.qs-night-beams,
.qs-leaf-veins path,
.qs-leaf-glints,
#qs-opening-scene .qs-fireflies {
  transition: opacity 6.4s ease;
}
.qs-day-clouds { opacity: .76; }
.qs-night-clouds { opacity: 0; }
.qs-day-birds { opacity: .48; }
.qs-night-beams { opacity: 0; }
#qs-opening-scene.qs-night .qs-day-clouds,
#qs-opening-scene.qs-night .qs-day-birds { opacity: 0; }
#qs-opening-scene.qs-night .qs-night-clouds { opacity: .88; }
#qs-opening-scene.qs-night .qs-night-beams { opacity: .74; }
#qs-opening-scene.qs-night .qs-leaf-veins path {
  stroke: #9bb6bd;
  opacity: .2;
}
#qs-opening-scene.qs-night .qs-leaf-glints { opacity: .18; }
#qs-opening-scene:not(.qs-night) .qs-fireflies { opacity: .22; }
#qs-opening-scene.qs-night .qs-fireflies { opacity: .9; }
@media (max-width: 700px) {
  .qs-night-beams { mix-blend-mode: normal; }
  .qs-leaf-glints { filter: none; }
}