/* Aimee's landing (owner 26 Oct 2026; Aimeedesign.md "Landing page", from the signed-off mock design/aimee-landing.html):
   Aimee herself, the comet cursor, the waiting vignette and ping on the i's dot, and the replay icon, layered on the
   shared intro (/intro.css + /intro.js with data-hold). login.html loads it; landing.js draws what it styles. */
/* Aimee */
/* Aimee's layer: the stage's twin (same size, centre and scale) but above the page's Get Started button, so when she
   peeks up over the R mark she is in front of it. */
.aimee-layer { position: fixed; width: 1440px; height: 810px; left: 50%; top: 50%; z-index: 7; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--rus-scale, 1)); transform-origin: center; }
.aimee { pointer-events: none; }
.aimee .a-breathe { transform-box: view-box; transform-origin: 60px 109.5px; animation: a-breathe 3.6s ease-in-out infinite; }
@keyframes a-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.a-spark { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,248,210,1) 0, rgba(255,215,0,.8) 35%, rgba(255,215,0,0) 70%); }
@media (prefers-reduced-motion: reduce) { .aimee .a-breathe { animation: none; } }
/* The comet cursor: drawn on a canvas over everything; the system cursor hides once the mouse moves (kept on the controls). */
.comet-cursor { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
.comet-on, .comet-on * { cursor: none !important; }
/* The opening: a gold, pulsing i's dot to click; the hint after 10 s; no cursor while the intro plays. */
.att-pulse.ri-waiting #rus-intro .ri-plain-dot { background: #ffd700; animation: ri-pulse 1.6s ease-in-out infinite; }
/* Every option: the dot turns gold, and grows and glows as the cursor comes near (--near 0 → 1). */
/* The ping: one light-gold ring every 1.5 s, centred on the i's dot. It sits above the vignette
   (fixed, placed on the dot in window px and scaled with the stage), so the dark never covers it. The dot itself stays
   plain white: no glow. */
.attract { position: fixed; z-index: 6; width: 0; height: 0; pointer-events: none; }
.attract > * { position: absolute; display: none; }
.attract > .att-ring { display: block; box-sizing: border-box; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(243,220,143,.85); animation: att-ring 3s ease-out infinite; }
@keyframes att-ring { 0% { transform: scale(.6); opacity: .9 } 75%,100% { transform: scale(4.2); opacity: 0 } }
/* Twinkle: the dot is already the ✦ it will become, turning slowly and twinkling. */
.att-star.ri-waiting #rus-intro .ri-plain-dot { opacity: 0; }
.att-star #rus-intro .att-star { display: block; left: -13px; top: -13px; width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,215,0,.85));
  animation: att-tw 2.2s ease-in-out infinite; }
@keyframes att-tw { 0%,100% { transform: scale(.85) rotate(0) ; opacity: .85 } 50% { transform: scale(1.25) rotate(45deg); opacity: 1 } }
/* Orbit: a small spark circles the dot. */
.att-orbit #rus-intro .att-orb { display: block; left: 0; top: 0; animation: att-orb 2.4s linear infinite; }
.att-orbit #rus-intro .att-orb::before { content: ""; position: absolute; left: 16px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff3c4; box-shadow: 0 0 8px 2px rgba(255,215,0,.8); }
@keyframes att-orb { to { transform: rotate(360deg) } }
/* Burst: every few seconds the dot fizzes a tiny preview of the big bang. */
.att-burst #rus-intro .att-burst { display: block; left: 0; top: 0; }
.att-burst #rus-intro .att-burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #ffd700;
  box-shadow: 0 0 4px rgba(255,215,0,.9); opacity: 0; animation: att-fz 2.8s ease-out infinite; }
@keyframes att-fz { 0%,4% { transform: rotate(var(--a)) translateX(0); opacity: 1 } 45%,100% { transform: rotate(var(--a)) translateX(44px); opacity: 0 } }
@keyframes ri-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,.55), 0 0 8px 2px rgba(255,215,0,.5); transform: scale(1) }
  50% { box-shadow: 0 0 0 10px rgba(255,215,0,0), 0 0 16px 6px rgba(255,215,0,.65); transform: scale(1.25) } }
#rus-intro .begin-hit { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 0; padding: 0;
  background: transparent; cursor: pointer; }
#rus-intro .begin-hit:focus-visible { outline: 2px solid #f4f1e8; outline-offset: 2px; }
#rus-intro .begin-hint { position: absolute; white-space: nowrap; font: 20px/1 Helvetica, Arial, sans-serif; letter-spacing: 1px; color: #8592ab;
  opacity: 0; transition: opacity .8s ease; pointer-events: none; }
#rus-intro .begin-hint.show { opacity: .55; }
.ri-playing, .ri-playing * { cursor: none !important; }
/* The waiting vignette: dark at the edges, clear around the i's dot; it lifts as the cursor nears the dot. */
.vignette { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; --vx: 50%; --vy: 40%; --va: .97; --vc: .9; --vr: 60px;
  transition: opacity .9s ease; }
.vignette.gone { opacity: 0; }
.ping { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
/* Replay: a quiet light-grey refresh icon in the bottom-right corner. */
.replay-ic { position: fixed; z-index: 30; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #a9b1c0; opacity: .55; cursor: pointer; transition: opacity .2s ease, transform .4s ease; }
.replay-ic:hover { opacity: .9; transform: rotate(-90deg); }
.replay-ic:focus-visible { outline: 2px solid #f4f1e8; outline-offset: 2px; opacity: .9; }
.comet-on .replay-ic { cursor: none !important; }

/* The sign-in box is the house modal: while it is open the comet steps aside and the ordinary cursor comes back. */
html:has(#rs-auth-modal[style*="flex"]) .comet-cursor { display: none; }
html.comet-on:has(#rs-auth-modal[style*="flex"]), html.comet-on:has(#rs-auth-modal[style*="flex"]) * { cursor: auto !important; }
html:has(#rs-auth-modal[style*="flex"]) .replay-ic { visibility: hidden; }