/* Content stays visible with no script or reduced motion. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:180ms ease-out both art-out; }
::view-transition-new(root) { animation:420ms cubic-bezier(.2,.7,.2,1) both art-in; }
@keyframes art-out { to { opacity:0; } }
@keyframes art-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }
@keyframes art-rise { from { opacity:0;transform:translateY(28px); } to { opacity:1;transform:none; } }
@keyframes art-settle { from { transform:scale(1.045); } to { transform:scale(1); } }
@keyframes art-reveal { from { opacity:.2;transform:translateY(28px); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:no-preference) {
  .hero-art,.guide-hero-art img { animation:art-settle 1600ms cubic-bezier(.2,.65,.3,1) both; }
  .hero-copy>*,.guide-breadcrumb,.guide-hero h1,.guide-hero__deck,.guide-meta { animation:art-rise 800ms cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy>:nth-child(2),.guide-hero h1 { animation-delay:100ms; }.hero-copy>:nth-child(3),.guide-hero__deck { animation-delay:200ms; }.hero-copy>:nth-child(4),.guide-meta { animation-delay:300ms; }
  .is-revealed { animation:art-reveal 850ms cubic-bezier(.2,.7,.2,1) both; }
  .guide-link,.guide-related__grid a,.text-link,.guide-toc a { transition:color .25s,transform .35s,border-color .25s; }
  .guide-link:hover,.guide-related__grid a:hover { transform:translateY(-5px); }.guide-toc a:hover { transform:translateX(4px); }
  .portrait-print { transition:transform .7s cubic-bezier(.2,.7,.2,1); }.portrait-print:hover { transform:rotate(0deg) translateY(-8px); }
  @supports(animation-timeline:view()) {
    .vision-image img,.story-scene>img { animation:art-pan linear both;animation-timeline:view();animation-range:entry 0% exit 100%; }
    @keyframes art-pan { from { transform:scale(1.07) translateY(-2%); } to { transform:scale(1.07) translateY(2%); } }
  }
}
.reading-progress { position:fixed;z-index:90;top:0;left:0;width:100%;height:2px;background:#ee465c;transform:scaleX(0);transform-origin:left;pointer-events:none; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } *,*::before,*::after { animation:none!important;transition:none!important; }.reading-progress { display:none; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; } }

.motion-toggle { display:block; margin:28px 0 0; padding:10px 0; border:0; border-bottom:1px solid #ffffff50; border-radius:0; background:none; color:#c6cbd3; font:11px "DM Sans",sans-serif; cursor:pointer; }
html[data-motion="paused"] { scroll-behavior:auto!important; }
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after { animation:none!important; transition:none!important; }
html[data-motion="paused"]::view-transition-group(*),html[data-motion="paused"]::view-transition-old(*),html[data-motion="paused"]::view-transition-new(*) { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .motion-toggle { display:none; } }

/* The frame moves independently from the image entrance. */
@media(prefers-reduced-motion:no-preference) {
  .hero-picture,.guide-hero-art { transform:translate3d(0,var(--scene-depth,0px),0); }
  .story-preview.is-visible img { animation:gallery-enter .65s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes gallery-enter { from { opacity:.25;transform:scale(1.025); } to { opacity:1;transform:scale(1); } }
}
html[data-motion="paused"] .hero-picture,html[data-motion="paused"] .guide-hero-art { transform:none; }
.guide-toc a[aria-current="location"] { color:#a51c32;border-left-color:#d72c43; }
.chapter-dock { position:fixed;z-index:35;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;background:#091523ed;color:#f3f0e9;border:1px solid #ffffff26;box-shadow:0 8px 30px #0002;backdrop-filter:blur(12px);transition:opacity .3s,translate .3s; }
.chapter-dock[hidden] { display:none; }
.chapter-dock.is-away { opacity:0;translate:0 12px;pointer-events:none;visibility:hidden; }
.chapter-dock a { min-height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;color:#adb5c0!important;font:10px "DM Sans",sans-serif;white-space:nowrap; }
.chapter-dock a[aria-current] { color:#f3f0e9!important;background:#ffffff10; }
.chapter-dock a[aria-current]>span:first-child { color:#ff7889; }
.dock-label { display:none; }.chapter-dock a[aria-current] .dock-label { display:block; }
.chapter-dock a:hover { background:#ffffff18; }
.story-preview { position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none; }
.story-preview.is-visible { opacity:1; }
.story-preview img { width:100%;height:100%;object-fit:cover;object-position:50% 40%;--art-exposure:.48; }
.scene-caption { position:absolute;z-index:2;bottom:28px;right:5%;font:8px "DM Sans",sans-serif;letter-spacing:.12em;color:#d0d3d9;pointer-events:none; }
.gallery-open { background:none;border:0;border-bottom:1px solid var(--ink);cursor:pointer;padding-inline:0; }
.gallery-open[hidden] { display:none; }
.gallery-open span { margin-left:14px; }
.gallery-is-open { overflow:hidden; }
.art-gallery { width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#091523;color:#f3f0e9;overscroll-behavior:contain; }
.art-gallery[open] { display:grid;grid-template-rows:auto minmax(0,1fr) auto; }
.art-gallery::backdrop { background:#091523; }
.gallery-header,.gallery-bottom { display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 48px; }
.gallery-header p { font:9px "DM Sans",sans-serif;letter-spacing:.12em;color:#b8c0cc; }
.gallery-close,.gallery-actions button { background:none;color:inherit;border:1px solid #ffffff40;min-width:48px;min-height:48px;cursor:pointer;font:12px "DM Sans",sans-serif; }
.gallery-close { border:0; }.gallery-close span { margin-left:12px;font-size:24px;vertical-align:middle; }
.gallery-stage { min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x pinch-zoom; }
.gallery-stage::-webkit-scrollbar { display:none; }
.gallery-slide { display:grid;place-items:center;container-type:size;flex:0 0 100%;min-width:0;height:100%;margin:0;padding:16px 48px;scroll-snap-align:center;scroll-snap-stop:always; }
.gallery-stage.is-dragging { cursor:grabbing;scroll-snap-type:none;user-select:none; }
.gallery-stage img { display:block;width:100%;height:100%;object-fit:contain; }
.gallery-bottom { border-top:1px solid #ffffff20;margin-inline:48px;padding:26px 0 32px; }
.gallery-count { font:9px "DM Sans",sans-serif;letter-spacing:.14em;color:#ff7889; }
.gallery-description h2 { font:400 30px "Source Serif 4",Georgia,serif;letter-spacing:-.03em;margin:8px 0; }
.gallery-description p { font:10px/1.7 "DM Sans",sans-serif;color:#adb5c0;margin:0; }
.gallery-actions { display:flex;align-items:center;gap:8px; }
.gallery-actions button { font-size:20px; }.gallery-actions button:hover { background:#ffffff15; }
.gallery-download { margin-left:24px;padding:14px 0;border-bottom:1px solid #ffffff50;font:11px "DM Sans",sans-serif;color:#f3f0e9!important; }
@media(max-width:800px) {
  .chapter-dock { bottom:max(12px,env(safe-area-inset-bottom));padding:4px; }
  .chapter-dock a { padding:8px;min-height:40px; }
  .gallery-header { padding:16px 20px; }.gallery-header p { max-width:170px;font-size:8px;line-height:1.8; }
  .gallery-slide { padding:12px 20px; }
  .gallery-bottom { margin-inline:20px;padding:20px 0 max(24px,env(safe-area-inset-bottom));align-items:flex-start;flex-direction:column;gap:18px; }
  .gallery-description h2 { font-size:28px; }.gallery-actions { width:100%; }.gallery-download { margin-left:auto; }
  .scene-caption { bottom:22px;right:24px; }
}
.story-preview { z-index:1; }.story-copy { z-index:2; }.scene-caption { z-index:3; }

/* A soft dissolve for controls; native swipes stay under the user's finger. */
.story-preview img { position:absolute;inset:0; }
.gallery-stage.is-switching { scroll-snap-type:none; }
.gallery-art { opacity:calc(.32 + .68 * var(--gallery-focus,1));transform:translateY(calc(5px * (1 - var(--gallery-focus,1)))) scale(calc(.975 + .025 * var(--gallery-focus,1))); }
.gallery-art img { opacity:0;transition:opacity 380ms ease-out; }
.gallery-art.is-ready img { opacity:1; }
.gallery-description { min-width:0; }
.gallery-description h2 { line-height:1.15;min-height:1.15em; }
@media(max-width:800px) { .gallery-description h2 { min-height:2.3em; } }
@media(prefers-reduced-motion:reduce) { .gallery-art { opacity:1;transform:none; } }
html[data-motion="paused"] .gallery-art { opacity:1;transform:none; }
