/* A small living scrapbook around the machine. All photo layers remain clear
   of the crank and capsule hit areas; only the two controls receive input. */
.play-area{isolation:isolate}
html[data-market-preview=true]:not([data-market-ready=true]) body{visibility:hidden}
html[data-market=ru] .region-control{display:none}
.memory-showcase{position:absolute;inset:0;z-index:1;pointer-events:none}
.showcase-deck,.memory-scene{position:absolute;inset:0}
.showcase-controls{position:absolute;right:22px;top:14px;display:flex;align-items:center;gap:3px;pointer-events:auto;z-index:6;padding:2px 4px 2px 12px;border:1px solid var(--line);border-radius:30px;background:var(--stage);color:var(--muted)}
.showcase-count{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:1.3px;margin-right:5px}
.showcase-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;font-size:18px}
.showcase-controls button:hover{background:var(--accent-soft);color:var(--ink)}
.showcase-eyebrow{position:absolute;top:58px;left:10%;max-width:240px;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0}
.story-print{position:absolute;margin:0;padding:7px 7px 20px;background:#fffaf3;border-radius:3px;color:#55413f;box-shadow:0 10px 23px #32202a1c,0 1px 2px #32202a17;width:clamp(98px,11vw,148px);transform:translate(-50%,-50%) rotate(var(--tilt));overflow:hidden}
/* Keep decoded photos in their own paint layer inside rotated, drifting cards. */
.story-print img{width:100%;height:auto;aspect-ratio:1.12;object-fit:cover;display:block;border-radius:1px;transform:translateZ(0)}
.story-print figcaption{font-family:Georgia,serif;font-size:11px;line-height:1.25;padding-top:7px;max-height:35px;overflow:hidden}
.print-0{left:13%;top:35%;--tilt:-13deg;--drift:4px;--delay:0s}
.print-1{left:85%;top:25%;--tilt:12deg;--drift:-4px;--delay:.13s}
.print-2{left:86%;top:59%;--tilt:-8deg;--drift:3px;--delay:.24s;width:clamp(89px,10vw,132px)}
.story-paper-note{position:absolute;left:1%;top:61%;width:139px;margin:0;color:var(--accent-ink);font-family:Georgia,serif;font-style:italic;font-size:16px;line-height:1.3;transform:rotate(-9deg);text-align:center}
.story-tape{position:absolute;width:56px;height:17px;left:11%;top:20%;background:var(--accent-soft);opacity:.65;transform:rotate(-23deg);clip-path:polygon(2% 0,100% 2%,97% 17%,100% 38%,98% 100%,0 96%,3% 73%,0 50%)}
.story-spark{position:absolute;left:78%;top:44%;color:var(--accent-ink);font-size:28px;opacity:.5}



.memory-scene.is-current{animation:scene-appear .85s ease both}
.memory-scene.is-current .story-print{animation:print-appear 1s cubic-bezier(.2,.7,.25,1) var(--delay) both,print-drift 7s ease-in-out calc(1s + var(--delay)) infinite alternate}
.memory-scene.is-leaving{animation:scene-dissolve .85s ease both;pointer-events:none}
.memory-scene.is-leaving .story-print{animation:none}
.play-area::before{content:'';position:absolute;left:16%;right:16%;top:17%;height:55%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent-soft),transparent 38%),transparent 69%);border-radius:50%;z-index:0;pointer-events:none;animation:stage-glow 8s ease-in-out infinite alternate}
.machine::after{content:'';position:absolute;z-index:2;left:26%;top:18%;width:13%;height:22%;border-radius:50%;background:linear-gradient(110deg,transparent,#fff7,transparent);transform:rotate(26deg);opacity:0;pointer-events:none;animation:glass-light 9s ease-in-out infinite}
.play-area .machine{animation:machine-breathe 6s ease-in-out infinite;translate:0 0}
.play-controls,.sound-button{position:relative;z-index:4}
.sound-button{position:absolute}
.play-area[data-ambient=paused] .memory-scene,.play-area[data-ambient=paused] .story-print,.play-area[data-ambient=paused] .machine,.play-area[data-ambient=paused] .machine::after,.play-area[data-ambient=paused]::before{animation-play-state:paused}
body[data-busy=true] .play-area .machine{animation:none;translate:0 0}
body[data-view=gift] .memory-showcase{display:none}
body[data-view=gift] .play-area .machine{animation:none}
body[data-view=gift] .machine::after{animation:none;opacity:.14}
body[data-view=gift] .play-area::before{animation:none;opacity:.4}
@keyframes scene-appear{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes scene-dissolve{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(5px);translate:0 -9px}}
@keyframes print-appear{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) rotate(calc(var(--tilt) - 4deg)) scale(.93)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--tilt)) scale(1)}}
@keyframes print-drift{to{translate:0 var(--drift)}}
@keyframes machine-breathe{50%{translate:0 -3px}}
@keyframes stage-glow{to{opacity:.5;scale:1.06}}
@keyframes glass-light{0%,55%,100%{opacity:0}65%,74%{opacity:.55}84%{opacity:0;translate:8px 0}}
body[data-theme=afterparty] .story-print{background:#f5edff;color:#514360;box-shadow:0 12px 24px #08050f35}
body[data-theme=afterparty] .story-tape{background:var(--accent)}
body[data-theme=air] .story-print{background:#fcffff}
@media(min-width:681px) and (max-width:1100px){
 .showcase-eyebrow{left:3%;top:56px;max-width:175px}.story-print{width:101px;padding:5px 5px 10px}.story-print figcaption{font-size:10px}.print-0{left:11%;top:30%}.print-1{left:88%;top:22%}.print-2{left:88%;top:59%;width:94px}.story-paper-note{left:0;top:57%;width:100px;font-size:13px}.story-tape{left:4%;top:17%}
}
@media(max-width:680px){
 .play-area{padding-top:56px;padding-bottom:50px;margin-top:8px}
 .showcase-controls{top:1px;right:9px;background:transparent;gap:0}.showcase-controls button{width:40px;height:40px}.showcase-count{font-size:9px}
 .showcase-eyebrow{top:13px;left:12px;font-size:9px;max-width:145px;line-height:1.45;letter-spacing:.6px}
 .story-print{width:99px;padding:5px 5px 13px}.story-print img{aspect-ratio:1}.story-print figcaption{font-size:9px;padding-top:5px;max-height:29px}
 .print-0{left:12%;top:34%}.print-1{left:87%;top:27%}.print-2{left:87%;top:60%;width:85px}
 .story-paper-note{left:0;top:56%;width:90px;font-size:12px}.story-tape{left:4%;top:22%;width:39px;height:12px}.story-spark{left:89%;top:45%;font-size:23px}
 
 .memory-scene.is-current .story-print{animation-duration:1s,8s}
 body[data-view=gift] .play-area{padding:0;margin-top:0}
}
@media(max-width:360px){.story-print{width:83px}.print-2{width:76px}.story-paper-note{width:70px;font-size:11px}.showcase-eyebrow{max-width:115px}.showcase-controls{right:5px}}
@media(prefers-reduced-motion:reduce){.memory-scene,.story-print,.play-area .machine,.machine::after,.play-area::before{animation:none!important;transition:none!important}.memory-scene.is-leaving{display:none}.memory-scene{filter:none}.machine::after{opacity:.12}}

/* The caption sits in normal flow so it cannot collide with the crank controls. */
.showcase-live-caption{position:relative;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:10px;max-width:90%;min-height:24px;margin:12px 0 8px;color:var(--muted);text-align:center}
.showcase-live-caption>span{font-size:9px;letter-spacing:1px}.showcase-live-caption>p{font:italic 15px/1.35 Georgia,serif;margin:0}
.play-controls{margin-top:0}
body[data-view=gift] .showcase-live-caption{display:none}
@media(max-width:680px){.showcase-live-caption{margin-top:14px;min-height:20px}.showcase-live-caption>p{font-size:12px}.play-controls{margin-top:0}}

/* Manual navigation also reveals the next composition when playback is paused. */
.memory-showcase[data-playing=false] .memory-scene.is-current,.memory-showcase[data-playing=false] .memory-scene.is-current .story-print{animation:none}

.photo-status{color:var(--accent-ink)!important;font-weight:650}
.memory-scene.is-initial{animation:none}
.memory-scene.is-initial .story-print{animation:print-drift 7s ease-in-out var(--delay) infinite alternate}
.memory-showcase[data-playing=false] .memory-scene.is-initial .story-print{animation:none}