/* Carousel slide scenes. Scene markup carries the hidden attribute, so if this file fails to load the scenes simply do not show. */
/* ---------- Slide scenes: layered art behind each carousel book (decorative, aria-hidden) ---------- */
.slide{position:relative;overflow:hidden}
.slide-inner{position:relative;z-index:2}
.scene,.scene[hidden]{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene img{max-height:100%}
.scene img{position:absolute;height:auto;max-width:none}
.theme-milo-holiday{background:linear-gradient(180deg,#0B5E86 0%,#0A4468 55%,#072C47 100%);color:#F4FBFF;--s-btn:#FFD166;--s-btn-text:#072C47}
.theme-milo-holiday .slide-kicker{color:#FFD166}
.theme-milo-holiday .slide-title{font-style:italic;font-weight:500}
/* library */
.scene-imprint .shelves{position:absolute;right:0;top:0;bottom:0;width:48%;opacity:.22;
  background:repeating-linear-gradient(90deg,#7A2E2E 0 18px,#A8823B 18px 30px,#2E4A6B 30px 52px,#5A3A22 52px 62px,#3D5B3A 62px 84px,transparent 84px 90px) 0 0/100% 33.3% repeat-y,
  repeating-linear-gradient(180deg,transparent 0 calc(33.3% - 10px),#3B2A18 calc(33.3% - 10px) 33.3%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
.scene-imprint .lamp{position:absolute;left:8%;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(232,196,120,.22),transparent 65%);animation:lamp 7s ease-in-out infinite}
@keyframes lamp{50%{opacity:.6}}
/* snowy night */
.scene-xmas .snowfall i{position:absolute;inset:-100% 0 0;background:radial-gradient(2px 2px at 10% 10%,#fff 60%,transparent),radial-gradient(3px 3px at 30% 40%,#fffd 60%,transparent),radial-gradient(2px 2px at 55% 20%,#fff 60%,transparent),radial-gradient(2.5px 2.5px at 75% 60%,#fffc 60%,transparent),radial-gradient(2px 2px at 90% 30%,#fff 60%,transparent) 0 0/260px 260px;animation:snowbg 16s linear infinite;opacity:.8}
.scene-xmas .snowfall i+i{background-size:180px 180px;animation-duration:24s;opacity:.5}
@keyframes snowbg{to{transform:translateY(50%)}}
.scene-xmas .hills{left:0;bottom:-2px;width:100%}
.scene-xmas .pine{bottom:24px;width:90px;filter:drop-shadow(0 0 8px rgba(242,201,76,.35))}
.scene-xmas .p1{left:4%;width:70px}.scene-xmas .p2{right:30%;width:110px}.scene-xmas .p3{right:4%;width:84px;bottom:10px}
/* sea */
.scene-sea .rays{position:absolute;inset:0;background:repeating-linear-gradient(105deg,rgba(255,255,255,.07) 0 40px,transparent 40px 120px);transform-origin:top;animation:rays 9s ease-in-out infinite alternate}
@keyframes rays{to{transform:skewX(6deg)}}
.scene-sea .bubbles i{position:absolute;bottom:-20px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:rise 9s linear infinite}
.scene-sea .bubbles i:nth-child(1){left:6%}.scene-sea .bubbles i:nth-child(2){left:18%;animation-delay:-3s;width:8px;height:8px}.scene-sea .bubbles i:nth-child(3){left:31%;animation-delay:-6s}
.scene-sea .bubbles i:nth-child(4){left:46%;animation-delay:-1s;width:16px;height:16px}.scene-sea .bubbles i:nth-child(5){left:60%;animation-delay:-5s}.scene-sea .bubbles i:nth-child(6){left:72%;animation-delay:-7s;width:9px;height:9px}
.scene-sea .bubbles i:nth-child(7){left:84%;animation-delay:-2s}.scene-sea .bubbles i:nth-child(8){left:94%;animation-delay:-4s;width:14px;height:14px}
@keyframes rise{to{transform:translateY(-560px)}}
.scene-sea .sand{position:absolute;left:0;right:0;bottom:0;height:40px;background:#C9A86A;border-radius:60% 60% 0 0/100% 100% 0 0;opacity:.8}
.scene-sea .coral-tree{right:2%;bottom:12px;width:230px}
.scene-sea .sc-lumi{left:44%;top:12%;width:110px;animation:swim 12s ease-in-out infinite;opacity:.9}
.scene-sea .sc-panni{left:3%;bottom:10px;width:90px}
@keyframes swim{50%{transform:translate(-60px,24px)}}
/* building site */
.scene-build .sun{position:absolute;right:12%;top:30px;width:120px;height:120px;border-radius:50%;background:#F5C861;opacity:.55}
.scene-build .skyline{left:0;bottom:0;width:100%;opacity:.5}
.scene-build .sc-excavator{left:-10px;bottom:-6px;width:230px;opacity:.95;transform-origin:70% 90%;animation:dig 5s ease-in-out infinite}
@keyframes dig{50%{transform:rotate(-3deg) translateX(8px)}}
/* space */
.scene-space .stars i{position:absolute;inset:0;background:radial-gradient(2px 2px at 20% 30%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 60% 70%,#fff 60%,transparent),radial-gradient(2px 2px at 85% 15%,#fffa 60%,transparent) 0 0/220px 220px;animation:twinkle 4s ease-in-out infinite}
.scene-space .stars i+i{background-size:150px 150px;animation-delay:-2s}
@keyframes twinkle{50%{opacity:.4}}
.scene-space .planet{position:absolute;border-radius:50%}
.scene-space .pl1{right:6%;bottom:-140px;width:300px;height:300px;background:radial-gradient(circle at 35% 30%,#4F7BC0,#1C2F5C 70%);opacity:.75}
.scene-space .pl2{left:42%;top:26px;width:46px;height:46px;background:radial-gradient(circle at 35% 30%,#F2B36B,#9E4F1E);box-shadow:0 0 0 7px rgba(242,179,107,.18)}
.scene-space .sc-station{right:3%;top:20px;width:150px;opacity:.85;animation:floaty 10s ease-in-out infinite}
.scene-space .sc-rocket{left:2%;bottom:20px;width:80px;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-14px)}}
/* dirt arena */
.scene-arena .beam{position:absolute;top:-40px;width:180px;height:520px;background:linear-gradient(180deg,rgba(255,228,160,.22),transparent);transform-origin:top;animation:beam 6s ease-in-out infinite alternate}
.scene-arena .b1{left:12%;transform:rotate(18deg)}.scene-arena .b2{right:18%;transform:rotate(-18deg);animation-delay:-3s}
@keyframes beam{from{opacity:.4}to{opacity:1}}
.scene-arena .mounds{left:0;bottom:-2px;width:100%;opacity:.9}
.scene-arena .sc-truck{left:2%;bottom:6px;width:190px;animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-10px) rotate(-2deg)}}
.slide-series{display:inline-flex;align-items:center;gap:.3em;flex-basis:100%;margin-top:4px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.slide-series:hover{text-decoration-thickness:2px;color:inherit}
@media (max-width:700px){.scene-imprint .shelves{width:100%;opacity:.12}.scene-sea .coral-tree{width:140px}.scene-sea .sc-lumi{display:none}
  .scene-build .sc-excavator,.scene-arena .sc-truck,.scene-space .sc-rocket{width:110px}.scene-space .sc-station{width:90px}.scene-xmas .p2{display:none}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}}
@media print{.scene{display:none}}

/* Round 10: sleeper train at night (mystery slide) */
.scene-sleeper .sl-lamp{position:absolute;right:6%;top:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(228,201,140,.18),transparent 65%);animation:lamp 8s ease-in-out infinite}
.scene-sleeper .sl-fog{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,rgba(217,209,189,.06) 60%,rgba(217,209,189,.1))}
.scene-sleeper .sl-train{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:45%;opacity:.85}
.scene-sleeper .sl-rule{position:absolute;left:0;right:0;top:10px;height:5px;border-top:1px solid rgba(201,164,92,.45);border-bottom:1px solid rgba(201,164,92,.22)}
@media (prefers-reduced-motion:reduce){.scene-sleeper .sl-lamp{animation:none}}