/* Stage: this site's own styles, on top of the round 3 system (assets/system/) and area.css. */

/* The name in the second navbar takes its label character (brief 8.3): Shippori Mincho. */
.area-nav-name { font-family: var(--face-head); font-weight: 600; }
.name-move { position: relative; }

/* On the front page the name does what it says, once: it rises onto a thin stage line and a soft light warms behind it (640 ms). */
@media (prefers-reduced-motion: no-preference) {
  .page-front .name-move > span { animation: st-rise 640ms var(--ease-out) both; }
  .page-front .name-move::after { content: ""; position: absolute; left: -0.15em; right: -0.15em; bottom: -0.2em; height: 1.5px; border-radius: 2px; background: var(--accent); transform-origin: left center; animation: st-line 640ms var(--ease-out) both; }
  .page-front .name-move::before { content: ""; position: absolute; inset: -0.6em -0.9em; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--area-ink) 30%, transparent), transparent); animation: st-light 1400ms ease-out both; pointer-events: none; }
  html.lt-js:not(.lt-ready) .page-front .name-move > span,
  html.lt-js:not(.lt-ready) .page-front .name-move::after,
  html.lt-js:not(.lt-ready) .page-front .name-move::before { animation-play-state: paused; }
}
@keyframes st-rise { from { transform: translateY(0.45em); opacity: 0; } }
@keyframes st-line { from { transform: scaleX(0); } }
@keyframes st-light { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* The welcome book's paper, in both lights (contrast in the lane report). */
:root {
  --book-paper: light-dark(#FDFAF3, #3A3832);
  --book-ink: light-dark(#1F1B16, #EFE8DC);
  --book-ink-2: light-dark(#5A5045, #C4B9A8);
  --book-say: light-dark(#136170, #7ACFDD);
  --book-line: light-dark(#E4DED0, #57534A);
}

/* The day's arc sits top left, where the wall is clear. */
.day { right: auto; left: 3cqi; }

/* Where each annotation sits on the bedroom (percentages of the 4:3 picture). */
.pin-cushion { left: 31%; top: 38%; }
.pin-throw { left: 43%; top: 63%; }
.pin-towels { left: 38%; top: 46%; }
.pin-tray { left: 60%; top: 60%; }
.pin-card { left: 66%; top: 56%; }
.pin-lamp { left: 47%; top: 31%; }
.pin-window { left: 84%; top: 30%; }
.pin-chair { left: 93%; top: 50%; }
.pin-door { left: 5%; top: 62%; }
.pin-bench { left: 58%; top: 77%; }
.pin-rug { left: 50%; top: 88%; }