/*
 * Spatial-glass shared polish layer.
 * Each glass-NN-*.html page links this; visual primitives that benefit from
 * being identical across the 4 pages live here. Per-page CSS still owns
 * layout. Motion is gated by prefers-reduced-motion.
 */

/* Aurora drift on the body background. The radial-gradient stack each page
 * defines is preserved; we just push the background-position around slowly so
 * the surface feels alive without being distracting. ~52s loop. */
@keyframes auroraDrift {
  0%   { background-position: 0% 0%,   100% 0%,   100% 100%, 0% 100%, 0% 0%; }
  50%  { background-position: 5% 4%,   95%  6%,   92%  96%,  4% 94%, 0% 0%; }
  100% { background-position: 0% 0%,   100% 0%,   100% 100%, 0% 100%, 0% 0%; }
}
body { animation: auroraDrift 52s ease-in-out infinite; }

/* Subtle floating motion for things tagged .float (e.g. live status pills). */
@keyframes glassFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.float { animation: glassFloat 4.5s ease-in-out infinite; }

/* Reveal-on-scroll. Cards start invisible + slightly down; .on swaps in. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.reveal.on { opacity: 1; transform: translateY(0); }

/* Stagger child reveals when a parent carries .reveal-stagger. JS toggles. */
.reveal-stagger > .reveal { transition-delay: var(--rd, 0ms); }

/* Mouse-tilt baseline; JS supplies the actual --tx / --ty values. */
[data-tilt] {
  transform: perspective(1200px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* Composer cursor blink. Apply .alive on the input wrapper so the caret
 * placeholder reads as an active session even when nothing is typed. */
@keyframes blink { 0%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0; } }
.alive::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: middle;
  animation: blink 1.1s steps(1) infinite;
  opacity: .65;
}

/* Typing indicator (3 dots) for assistant pending state. */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: typingDot 1.1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

/* Better focus rings everywhere a glass surface gets keyboard focus. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 4px rgba(107,79,230,.65);
  border-radius: inherit;
}
button:focus-visible, a:focus-visible { box-shadow: 0 0 0 2px rgba(107,79,230,.85); }

/* Smooth in-page anchor scrolls. */
html { scroll-behavior: smooth; }

/* ── Aurora progress bar ────────────────────────────────────────────────
 * Replacement for the old "highlighter spilling over the line" bars. The
 * track reads as a recessed frosted channel; the fill picks up the aurora
 * gradient (peach → pink → lilac → blue) with a soft glow underneath and
 * a glassy specular highlight on top. A slow sheen animates left-to-right
 * to give the bar life without being distracting. */
.aurora-bar {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(27, 24, 48, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45);
}
.aurora-bar .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255, 183, 197, 0.95) 0%,
    rgba(199, 88, 141, 0.95) 38%,
    rgba(107, 79, 230, 0.95) 68%,
    rgba(143, 184, 255, 0.95) 100%);
  position: relative;
  /* No outer glow — the previous box-shadow extended ~10px beyond the bar
   * edge and read as the fill bleeding outside the track. Inside-only
   * highlights + base shadow only. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(43, 28, 95, 0.10);
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
/* Slow left-to-right specular sheen */
.aurora-bar .fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  border-radius: 999px;
  animation: aurora-bar-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aurora-bar-sheen {
  0% { background-position: -40% 0; }
  60%, 100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-bar .fill { transition: none; }
  .aurora-bar .fill::after { animation: none; }
}

/* Topbar nav separator + scroll-overflow for pages carrying 7 nav items.
 * Pages declare their own .topbar/.nav containers; this just provides the
 * shared visual divider + lets the pill row scroll on narrow viewports. */
.topbar .nav { overflow-x: auto; max-width: 100%; }
.topbar .nav .sep { display: inline-block; width: 1px; align-self: stretch; background: rgba(27,24,48,0.18); margin: 4px 4px; flex-shrink: 0; }

/* Skip-link convenience for the topbar logo + theme nav. Mostly hidden. */
.sr-only { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mobile tightening. The per-page rules handle column collapses; this is
 * the catch-all for spacing + chip wrapping that gets sloppy under 420px. */
@media (max-width: 420px) {
  .hero h1 { letter-spacing: -.02em; }
  .badge { font-size: 10.5px; padding: 5px 10px; }
  .quick { gap: 6px; }
}

/* Motion-sensitive users get a still surface. Kill all the animations. */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .float { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-tilt] { transform: none; transition: none; }
  .alive::after { animation: none; opacity: .5; }
  .typing span { animation: none; opacity: .6; }
  html { scroll-behavior: auto; }
}