/* Scene transitions: room tour, page transitions and "Next room" doorways.
   Loaded last. Uses the existing palette tokens so light and bedtime modes both follow. */

/* ---------- Home: the room tour ---------- */
.tour{position:relative}
.tour-stage.home-hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;border-bottom:0;align-items:center}
.tour-stage .hero-copy{position:relative;z-index:1;will-change:opacity,transform}
.room-slot{width:100%;aspect-ratio:16/9;align-self:center}
.tour-window{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:clip-path}
.tour .room{position:absolute;left:0;top:0;aspect-ratio:auto;align-self:auto;transform-origin:0 0;will-change:transform;pointer-events:auto;overflow:hidden}
.room-camera{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.room-camera>.room-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The mirror's fall-in still applies to the artwork now that it sits inside the camera. */
.room.portal .room-camera>.room-still,.room.portal .room-camera>.room-video{transform-origin:var(--mx) var(--my);animation:fall-in 1.1s cubic-bezier(.6,0,.3,1) forwards}

/* UI inside the scaled room stays at its normal size. */
.tour .room .hotspot-label{scale:var(--tour-inv,1);transform-origin:50% 100%}
.tour .room .window-radio .hotspot-label{transform-origin:50% 0}
.tour .room .night-books .hotspot-label{transform-origin:100% 100%}
.tour .room .skip-anim{scale:var(--room-inv,1);transform-origin:100% 100%;right:calc(14px + var(--crop-r,0px));bottom:calc(12px + var(--crop-b,0px))}
.tour .room .motion-toggle{scale:var(--room-inv,1);transform-origin:0 100%;left:calc(12px + var(--crop-l,0px));bottom:calc(10px + var(--crop-b,0px))}
.tour .room .room-hint{scale:var(--room-inv,1);transform-origin:100% 100%;right:calc(14px + var(--crop-r,0px));bottom:calc(10px + var(--crop-b,0px));transition:opacity .3s}
.tour .is-touring .room-hint{opacity:0}

/* The object the current card is about: a soft pulsing outline and its label. */
.tour .hotspot.is-spotlit::before{border-color:var(--shell);border-width:calc(2px * var(--tour-inv,1));background:rgba(255,248,239,.1);animation:spot-pulse 1.9s ease-in-out infinite}
.tour .hotspot.is-spotlit .hotspot-label{opacity:1;transform:translateX(-50%) translateY(0)}
.tour .night-books.is-spotlit .hotspot-label{transform:translateY(0)}
@keyframes spot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,248,239,.5)}55%{box-shadow:0 0 0 12px rgba(255,248,239,0)}}

/* Scroll cue under the hero buttons */
.tour-cue{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:13px;color:var(--plum);letter-spacing:.01em;min-height:44px}
.tour-cue-arrow{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--plum);border-radius:50%;animation:cue-bob 1.6s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Caption cards */
.tour-cards{position:absolute;inset:0;z-index:4;pointer-events:none}
.tour-card{position:absolute;top:50%;left:calc(var(--frame-side,14px) + clamp(24px,4vw,64px));width:min(410px,34vw);background:var(--shell);color:var(--ink);border:1px solid var(--plum);border-radius:8px;padding:30px 30px 28px;box-shadow:6px 8px 0 #27294a2e;
  opacity:0;visibility:hidden;filter:blur(6px);transform:translate3d(0,calc(-50% + 28px),0) scale(.98);pointer-events:none;
  transition:opacity .4s ease,transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease,visibility 0s linear .75s}
.tour-card.side-right{left:auto;right:calc(var(--frame-side,14px) + clamp(70px,7vw,120px))}
.tour-card.is-past{transform:translate3d(0,calc(-50% - 28px),0) scale(.98)}
.tour-card.is-active{opacity:1;visibility:visible;filter:none;transform:translate3d(0,-50%,0);pointer-events:auto;transition-delay:.1s,.1s,.1s,0s}
.tour-card .eyebrow{margin-bottom:12px}
.tour-card h2{font-size:clamp(1.9rem,2.5vw,2.7rem);margin-bottom:12px}
.tour-card p{font-size:16px;margin-bottom:20px}
.tour-card p:last-child{margin-bottom:0}
.tour-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.tour-actions .button{padding:13px 20px;gap:12px;min-height:46px}
.tour-actions .text-link{background:none;border:0;padding:6px 0;font-size:15px;color:inherit;min-height:44px}
[data-theme="dark"] .tour-card{background:#1c2340;border-color:#8e9fd4;box-shadow:6px 8px 0 #05091880}

/* Progress rail: one dot per stop; doubles as room navigation. */
.tour-rail{position:absolute;right:calc(var(--frame-side,14px) + 18px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.is-full .tour-rail{opacity:1;pointer-events:auto}
.tour-rail:focus-within{opacity:1;pointer-events:auto}
.is-playing .tour-rail,.is-playing .tour-cards{opacity:0;pointer-events:none}
.tour-rail ol{list-style:none;margin:0;padding:8px 6px;display:flex;flex-direction:column;gap:2px;background:#27294a33;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tour-rail button{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;border-radius:50%}
.rail-dot{width:9px;height:9px;border-radius:999px;background:var(--shell);opacity:.7;transition:height .35s cubic-bezier(.2,.8,.2,1),opacity .2s,background .2s}
.tour-rail button[aria-current] .rail-dot{height:24px;opacity:1;background:var(--shell)}
.tour-rail button:hover .rail-dot{opacity:1}
.rail-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--shell);color:var(--ink);border:1px solid var(--plum);border-radius:5px;padding:4px 10px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.tour-rail button:hover .rail-label,.tour-rail button:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
.rail-skip{font-size:12px;background:var(--shell);color:var(--ink);border:1px solid var(--plum);border-radius:999px;padding:6px 12px;text-decoration:none;white-space:nowrap}
.rail-skip:hover{background:var(--rose-light)}
.tour-end{display:block;height:0;outline:none}

/* Phones and portrait screens: the room fills the top of the screen, the card sits below. */
.tour-stage.is-stacked{display:flex;flex-direction:column;justify-content:center}
.is-stacked .hero-copy{flex-shrink:0;align-self:stretch}
.is-stacked .room-slot{flex-shrink:0}
.is-stacked .tour-card{left:var(--frame-side,10px);right:var(--frame-side,10px);width:auto;top:calc(var(--frame-bottom) + 40px);padding:20px 20px 18px;transform:translate3d(0,22px,0) scale(.98)}
.is-stacked .tour-card.side-right{left:var(--frame-side,10px);right:var(--frame-side,10px)}
.is-stacked .tour-card.is-past{transform:translate3d(0,-14px,0) scale(.98)}
.is-stacked .tour-card.is-active{transform:none}
.is-stacked .tour-card .eyebrow{margin-bottom:8px;font-size:11px}
.is-stacked .tour-card h2{font-size:clamp(1.55rem,6.4vw,2rem);margin-bottom:8px}
.is-stacked .tour-card p{font-size:15px;line-height:1.5;margin-bottom:14px}
.is-stacked .tour-actions .button{padding:11px 18px;font-size:15px}
.is-stacked .tour-rail{top:calc(var(--frame-bottom) + 4px);right:auto;left:50%;transform:translateX(-50%);flex-direction:row}
.is-stacked .tour-rail ol{flex-direction:row;padding:2px 4px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.is-stacked .tour-rail button{width:32px;height:32px}
.is-stacked .rail-dot{background:var(--plum);opacity:.35}
.is-stacked .tour-rail button[aria-current] .rail-dot{background:var(--plum);opacity:1}
.is-stacked .tour-rail button[aria-current] .rail-dot{height:9px;width:22px}
.is-stacked .rail-label{display:none}
.is-stacked .rail-skip{position:absolute;top:calc(-1 * var(--frame-bottom) + 18px);left:50%;transform:translateX(-50%);display:block;min-height:44px;padding:12px}
.is-offscreen .tour-cue-arrow,.is-offscreen .hotspot.is-spotlit::before{animation-play-state:paused}
@media(max-width:760px){.tour-stage .hero-copy{padding-bottom:22px}.tour-cue{font-size:12px}}
@media(max-height:700px) and (max-width:760px){.tour-stage .hero-copy h1{font-size:clamp(2.8rem,11vw,4rem);margin-bottom:12px}.tour-stage .hero-copy p{margin-bottom:16px;font-size:16px}.tour-stage .hero-actions{gap:12px}}

/* Reduced motion / short screens: the same stops as a plain list. */
.room-guide{background:var(--shell);padding:60px 6% 70px;border-bottom:1px solid var(--line)}
.room-guide h2{font-size:clamp(1.9rem,3vw,2.8rem);margin-bottom:26px}
.room-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px}
.tour-card.is-static{position:static;width:auto;opacity:1;visibility:visible;filter:none;transform:none;pointer-events:auto;transition:none;box-shadow:5px 6px 0 #3e4b9324}
.tour-card.is-static h2{font-size:1.6rem}

/* ---------- "Next room" doorway at the end of each page ---------- */
.next-room{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(52px,7vw,100px) 7%;background:var(--plum);color:var(--shell);text-decoration:none;position:relative;overflow:hidden;border-top:1px solid var(--line)}
[data-theme="dark"] .next-room{background:#242f53;color:var(--ink)}
.next-room .eyebrow{color:inherit;opacity:.78;margin:0}
.next-room-title{display:block;font-family:var(--serif);font-size:clamp(2.6rem,6vw,5.8rem);line-height:1.02;letter-spacing:-.035em;margin:12px 0 14px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.next-room-line{display:block;font-size:17px;opacity:.85;max-width:40ch}
.next-room-window{display:block;width:clamp(120px,15vw,210px);aspect-ratio:4/5;border-radius:999px 999px 10px 10px;border:2px solid currentColor;background:#c9d8f3 url(./assets/room-blue.webp) no-repeat;background-size:420% auto;box-shadow:8px 10px 0 #0000002e;transition:background-size .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
[data-theme="dark"] .next-room-window{filter:brightness(.82) saturate(.9)}
.next-room-arrow{display:grid;place-items:center;width:clamp(56px,6vw,78px);aspect-ratio:1;border:1.5px solid currentColor;border-radius:50%;font-size:clamp(22px,2.2vw,30px);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.next-room:hover .next-room-window,.next-room:focus-visible .next-room-window{background-size:520% auto;transform:rotate(-2deg) scale(1.03)}
.next-room:hover .next-room-arrow,.next-room:focus-visible .next-room-arrow{transform:translateX(8px);background:var(--shell);color:var(--plum)}
[data-theme="dark"] .next-room:hover .next-room-arrow{background:var(--ink);color:#242f53}
.next-room:hover .next-room-title{transform:translateX(6px)}
.next-room:focus-visible{outline-offset:-8px}
.next-room.is-waiting .next-room-window{transform:translateY(20px) scale(.9) rotate(-4deg);opacity:.7}
.next-room.is-waiting .next-room-copy{opacity:1;transform:none}
.next-room-copy{display:block;transition:opacity .7s ease .1s,transform .9s cubic-bezier(.2,.8,.2,1) .1s}
.next-room.is-in .next-room-window{transition-delay:.18s}
@media(max-width:760px){.next-room{grid-template-columns:minmax(0,1fr) auto;padding:48px 25px}.next-room-arrow{display:none}.next-room-window{width:104px}.next-room-line{font-size:15px}}
@media(max-width:420px){.next-room{gap:15px;padding-inline:20px}.next-room-title{font-size:2.1rem;overflow-wrap:anywhere}.next-room-window{width:76px}}

/* A route replacement should not anchor the new document to an old, deep scroll position. */
html[data-vt],html[data-vt] body{overflow-anchor:none}

/* Fallback page entrance where View Transitions are unavailable */
#main.page-enter{animation:page-enter .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes page-enter{from{opacity:0;transform:translateY(24px)}}

/* ---------- Page transitions (View Transitions API) ---------- */
.radio-dock{view-transition-name:radio-dock}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.6s;animation-timing-function:cubic-bezier(.76,0,.24,1)}
html[data-vt]::view-transition{background:#27294a}
html[data-theme="dark"][data-vt]::view-transition{background:#090d1e}
/* Nav: the new page slides up over the old one, which sinks back like a card in a stack. */
html[data-vt="stack"]::view-transition-old(root){animation-name:vt-sink;transform-origin:50% 0}
html[data-vt="stack"]::view-transition-new(root){animation-name:vt-rise}
/* Back to the room: the page drops away and the room rises from underneath. */
html[data-vt="stack-back"]::view-transition-old(root){animation-name:vt-drop;z-index:2}
html[data-vt="stack-back"]::view-transition-new(root){animation-name:vt-surface;transform-origin:50% 0}
/* From the room or a doorway: an iris opens from the clicked object, like the mirror portal. */
html[data-vt="iris"]::view-transition-old(root){animation-name:vt-zoom-in;animation-duration:.75s;transform-origin:var(--vt-x) var(--vt-y)}
html[data-vt="iris"]::view-transition-new(root){animation-name:vt-iris;animation-duration:.75s;animation-timing-function:cubic-bezier(.65,0,.25,1)}
/* Browser back/forward */
html[data-vt="fade"]::view-transition-old(root){animation-name:vt-fade-out;animation-duration:.35s}
html[data-vt="fade"]::view-transition-new(root){animation-name:vt-fade-in;animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-sink{to{transform:scale(.92);opacity:.45;filter:brightness(.7)}}
@keyframes vt-rise{from{transform:translateY(100vh);clip-path:inset(0 round 32px 32px 0 0)}to{transform:none;clip-path:inset(0 round 0)}}
@keyframes vt-drop{to{transform:translateY(100vh);clip-path:inset(0 round 32px 32px 0 0)}}
@keyframes vt-surface{from{transform:scale(.92);opacity:.45;filter:brightness(.7)}}
@keyframes vt-zoom-in{to{transform:scale(1.22);filter:blur(5px) brightness(.85)}}
@keyframes vt-iris{from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}to{clip-path:circle(150vmax at var(--vt-x) var(--vt-y))}}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0;transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .tour-cue-arrow,.tour .hotspot.is-spotlit::before{animation:none}
  .next-room.is-waiting .next-room-window,.next-room.is-waiting .next-room-copy{transform:none;opacity:1}
}