/* ---------------------------------------------------------------
   do welcome — the first-visit loading overlay.

   Ported from design_handoff_do_welcome. All values are the
   handoff's; the only substitution is the typeface, since Antikor
   Text left this repo — "Space Mono" is what --font-body now
   resolves to, and the legacy family names alias onto it anyway.

   do was drawn by nyla ceylan. She is three aligned 760×848 layers
   stacked absolutely: body, arm, head. The arm turns at the
   shoulder, the head at the neck, and the whole bear bobs.
   --------------------------------------------------------------- */

#do-welcome{
  position:fixed; inset:0; z-index:9000;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body,"Space Mono","Antikor Text",ui-monospace,Menlo,monospace);
  opacity:1; transition:opacity 460ms cubic-bezier(.22,.61,.36,1);
}
#do-welcome.closed{opacity:0; pointer-events:none}
#do-welcome a{color:#2e3191; text-decoration:none}
#do-welcome a:hover{color:#ff1a1a}

/* the stage must always hold 1280:800 — every overlay below is
   positioned as a % of it, and drifts off the artwork otherwise */
.dw-stage{position:relative; width:min(1280px,100vw,160vh); aspect-ratio:1280/800}

/* ---- 1. the faded room ---- */
.dw-room{position:absolute; inset:0}
.dw-room svg{width:100%; height:100%; display:block}

/* ---- 2. the red spotlight frames ---- */
.dw-frame{
  position:absolute; border:6px solid #ff1a1a; background:rgba(255,26,26,.10);
  border-radius:4px; pointer-events:none;
  animation:dw-frame-in 220ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes dw-frame-in{from{opacity:0; transform:scale(1.04)} to{opacity:1; transform:scale(1)}}

/* ---- 3. do ---- */
.dw-do{
  position:absolute; left:17.93%; top:23.21%; width:29.64%;
  cursor:pointer; transform-origin:50% 90%;
  animation:do-bob 3.6s ease-in-out infinite;
}
.dw-do .rig{position:relative; width:100%; aspect-ratio:760/848}
.dw-do .rig img{position:absolute; inset:0; width:100%; height:auto; display:block}
.dw-do .arm{transform-origin:67% 45%; transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
.dw-do .head{transform-origin:46% 58%}
.dw-caption{
  text-align:center; margin-top:.5em;
  font-size:clamp(9px,.9vw,11px); letter-spacing:.04em; color:#868688;
}
@keyframes do-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(-1.4deg)}}
@keyframes do-wave-a{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-13deg)}}
@keyframes do-wave-b{0%,100%{transform:rotate(-1deg)}40%{transform:rotate(-17deg)}70%{transform:rotate(-7deg)}}
@keyframes do-arm-idle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}
@keyframes do-head-nod{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2.2deg)}}
@keyframes do-head-sway{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-1.5deg)}}
@keyframes do-arm-think{0%,100%{transform:rotate(14deg)}50%{transform:rotate(9deg)}}
@keyframes do-head-think{0%,100%{transform:rotate(3.5deg) translateY(4px)}50%{transform:rotate(-1deg) translateY(0)}}

/* ---- 4. the speech bubble ---- */
.dw-bubble{
  position:absolute; left:50%; top:8.5%; width:31%; min-width:240px;
  background:#fffbf0; border:1px solid #231f20; border-radius:2px;
  padding:clamp(12px,1.4vw,20px);
  box-shadow:0 1px 0 rgba(35,31,32,.06);
  cursor:pointer;
}
.dw-bubble:before{
  content:""; position:absolute; left:-7px; top:48px; width:12px; height:12px;
  background:#fffbf0; border-left:1px solid #231f20; border-bottom:1px solid #231f20;
  transform:rotate(45deg);
}
.dw-line{
  margin:0; min-height:4.4em;
  font-size:clamp(13px,1.35vw,18px); line-height:1.45; color:#2e3191;
  text-transform:lowercase;
}
.dw-caret{
  display:inline-block; width:8px; height:1em; vertical-align:-.14em;
  background:#2e3191; margin-left:3px; animation:dw-caret-blink .9s steps(1) infinite;
}
.dw-caret[hidden]{display:none}
@keyframes dw-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.dw-tap{margin:.7em 0 0; font-size:clamp(10px,1vw,12px); color:#868688}
.dw-tap[hidden]{display:none}

/* ---- 5. chrome ---- */
.dw-wordmark{position:absolute; left:0; top:-2.6%; font-size:13px; letter-spacing:.04em; color:#231f20}
.dw-close{
  position:absolute; right:0; top:-3.2%;
  width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border:1px solid rgba(35,31,32,.35); color:#231f20;
  font:inherit; font-size:16px; line-height:1; cursor:default; opacity:.35;
  transition:opacity 180ms cubic-bezier(.22,.61,.36,1), color 180ms, border-color 180ms;
}
.dw-close.ready{opacity:1; cursor:pointer}
.dw-close.ready:hover{color:#ff1a1a; border-color:#ff1a1a}

.dw-pill{
  position:absolute; left:50%; bottom:-4.4%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border:1px solid rgba(35,31,32,.35); border-radius:999px;
  padding:9px 20px; color:#231f20; font:inherit; font-size:13px;
  white-space:nowrap; transition:color 180ms, border-color 180ms, transform 120ms;
}
.dw-track{width:110px; height:2px; background:rgba(35,31,32,.15)}
.dw-fill{height:100%; width:0; background:#231f20; transition:width 300ms cubic-bezier(.22,.61,.36,1)}
.dw-pill.ready{font-size:15px; font-weight:600; cursor:pointer}
.dw-pill.ready:hover{color:#ff1a1a; border-color:#ff1a1a}
.dw-pill.ready:active{transform:translateX(-50%) scale(.95)}
.dw-pill .dw-track{display:block}
.dw-pill.ready .dw-track{display:none}

.dw-small{
  position:absolute; left:50%; bottom:-8.4%; transform:translateX(-50%);
  display:none; font-size:11px; letter-spacing:.04em; color:#868688; white-space:nowrap;
}
@media (max-width:820px){ .dw-small{display:block} }

@media (prefers-reduced-motion:reduce){
  .dw-do,.dw-do .arm,.dw-do .head,.dw-caret,.dw-frame{animation:none !important}
}

/* ---- replay -------------------------------------------------------
   Clicked from the desk, the overlay runs exactly as it does on a first
   visit: same room, same spotlights, same do at the same size. Only the
   opening line differs, and there is no loading to wait through.

   An earlier attempt sat her at her small size and position from the
   landing artwork so she would talk from the desk. It did not read well
   — the overlay's rig is a different crop from the two layers in the
   SVG, so at that size they do not sit together. Doing it properly means
   animating the artwork's own layers in place rather than the rig, which
   needs a pair of eyes on it. */
#do-welcome.replay .dw-room   { animation: dw-fade-in 520ms ease both; }
#do-welcome.replay .dw-bubble { animation: dw-fade-in 380ms ease 220ms both; }
@keyframes dw-fade-in{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion:reduce){
  #do-welcome.replay .dw-room,
  #do-welcome.replay .dw-bubble{ animation:none }
}

/* ====================================================================
   the in-room tour — what a replay does now.

   No overlay, no second bear, no copy of the room. do wakes up where
   she is drawn, the real landing artwork dims around her, and the red
   frames are drawn into the SVG itself so they cannot drift out of
   register. Her two layers are wrapped in <g> at runtime, because an
   SVG transform attribute and a CSS transform fight each other.

   TUNING — the arm's pivot is the one thing that wants an eye on it.
   Set --arm-x / --arm-y on #landing-frame (percentages of the arm's own
   box). 0% 0% is its top-left. Try moving in steps of 5%.
   ==================================================================== */
/* While she talks the room is not live: no trigger, no hover, nothing but
   the bubble. Belt and braces — the group and every trigger inside it. */
#landing-frame.do-tour #triggers,
#landing-frame.do-tour [id^="trigger-"] { pointer-events: none !important; }
#landing-frame.do-tour svg { cursor: default; }
#landing-frame.do-tour svg > [id] { transition: opacity 460ms cubic-bezier(.22,.61,.36,1); }

#landing-frame.do-tour #do .do-body,
#landing-frame.do-tour #do .do-arm { transform-box: fill-box; }
#landing-frame.do-tour #do .do-body {
  transform-origin: 50% 92%;
  animation: dt-bob 3.6s ease-in-out infinite;
}
#landing-frame.do-tour #do .do-arm {
  transform-origin: var(--arm-x, 62%) var(--arm-y, 24%);
  animation: dt-wave 1.9s ease-in-out infinite;
}
#landing-frame.do-tour.dt-idle #do .do-arm { animation: dt-arm-idle 3.6s ease-in-out infinite; }
#landing-frame.do-tour.dt-idle #do .do-body { animation: dt-bob 4.6s ease-in-out infinite; }

@keyframes dt-bob     { 0%,100%{transform:translateY(0) rotate(0deg)}   50%{transform:translateY(-5px) rotate(-1.1deg)} }
@keyframes dt-wave    { 0%,100%{transform:rotate(2deg)}                 50%{transform:rotate(-14deg)} }
@keyframes dt-arm-idle{ 0%,100%{transform:rotate(0deg)}                 50%{transform:rotate(-4deg)} }

.dt-frame { fill: rgba(255,26,26,.10); stroke: #ff1a1a; stroke-width: 6; pointer-events: none;
            animation: dt-frame-in 220ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes dt-frame-in { from{opacity:0} to{opacity:1} }

.dt-ui { position:absolute; inset:0; pointer-events:none;
         font-family: var(--font-body,"Space Mono",ui-monospace,monospace); }
.dt-bubble {
  pointer-events:auto; cursor:pointer; position:absolute;
  left:8%; top:var(--dt-bubble-top, 33%); width:34%; min-width:230px;
  background:#fffbf0; border:1px solid #231f20; border-radius:2px;
  padding:clamp(11px,1.3vw,18px); box-shadow:0 1px 0 rgba(35,31,32,.06);
  animation: dt-frame-in 380ms ease both;
}
.dt-bubble:after{ content:""; position:absolute; right:-7px; top:38px; width:12px; height:12px;
  background:#fffbf0; border-right:1px solid #231f20; border-top:1px solid #231f20; transform:rotate(45deg); }
.dt-line { margin:0; min-height:4.2em; font-size:clamp(12px,1.25vw,16px); line-height:1.45;
           color:#2e3191; text-transform:lowercase; }
.dt-caret{ display:inline-block; width:7px; height:1em; vertical-align:-.14em; background:#2e3191;
           margin-left:3px; animation:dw-caret-blink .9s steps(1) infinite; }
.dt-caret[hidden]{display:none}
.dt-tap { margin:.6em 0 0; font-size:clamp(9px,.95vw,11px); color:#868688; }
.dt-tap[hidden]{display:none}
.dt-close {
  pointer-events:auto; position:absolute; right:0; top:-2.2%;
  width:32px; height:32px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border:1px solid rgba(35,31,32,.35); color:#231f20; font:inherit; font-size:15px; line-height:1;
}
.dt-close:hover{ color:#ff1a1a; border-color:#ff1a1a; }
@media (prefers-reduced-motion:reduce){
  #landing-frame.do-tour #do .do-body,
  #landing-frame.do-tour #do .do-arm,
  .dt-frame,.dt-bubble,.dt-caret { animation:none !important }
}

/* ====================================================================
   small screens.

   Both of do's appearances assume a wide stage. On a phone the bubble
   was wider than the stage it sits in — the welcome's text ran off the
   edge, and in the room it landed across her face. In both cases the
   answer is the same: stop floating the bubble beside her and put it
   under everything, full width.
   ==================================================================== */
@media (max-width: 820px), (pointer: coarse) {

  /* ---- the first-visit overlay ---- */
  #doorway { padding: 14px 12px; align-content: center; }
  .dw-stage { width: min(88vw, 60vh); }
  .dw-bubble {
    left: 0; right: 0; width: auto; min-width: 0;
    top: calc(100% + 14px);
    padding: 12px 14px;
  }
  .dw-bubble:before { display: none; }      /* nothing left to point at */
  .dw-line { min-height: 5.2em; font-size: 13px; }
  .dw-caption { font-size: 9px; }
  .dw-wordmark { top: -3.4%; font-size: 11px; }
  .dw-close { width: 30px; height: 30px; top: -4.6%; }
  .dw-pill { bottom: auto; top: calc(100% + 14px + 8.6em); font-size: 12px; padding: 8px 16px; }
  .dw-small { bottom: auto; top: calc(100% + 14px + 12em); }

  /* ---- the in-room tour ---- */
  #landing-frame.do-tour .dt-bubble {
    left: 0; right: 0; width: auto; min-width: 0;
    top: auto; bottom: 0;
    border-left: 0; border-right: 0; border-radius: 0;
    padding: 11px 13px;
  }
  #landing-frame.do-tour .dt-bubble:after { display: none; }   /* was on her face */
  .dt-line { min-height: 4.6em; font-size: 12.5px; }
  .dt-close { width: 30px; height: 30px; top: -5%; }
}