/* A thought, a pencil line, a little world. Decoration only; content is never gated. */
[data-world-scene]{--world-p:1}
[data-world-steady].reveal.is-visible,
[data-world-scene].reveal.is-visible{animation:none}
.world-scroll-invitation{display:flex;justify-content:center;align-items:center;gap:14px;padding:0 20px 25px;font:500 12px/1.6 var(--body);color:#8a708e;text-align:center}
.world-scroll-invitation>span:first-child{font:24px/1 var(--display);color:#c6a761}
.world-scroll-invitation>span:last-child{font-size:17px;color:#987f9e}
.world-hero-drawing,.world-how-thread,.world-sample-orbit,.world-play-orbit,.world-constellation{position:absolute;pointer-events:none;overflow:visible;user-select:none}
.world-stroke{fill:none;stroke:#b392ae;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.world-hero-drawing{inset:0;width:100%;height:100%;z-index:1}
.world-hero-arch{stroke:#fffdf3;stroke-width:2;opacity:.86}
.world-hero-echo{stroke:#fffcf0;stroke-width:1;opacity:.6}
.world-cloud{fill:#fff9f5;opacity:.8;transform-box:fill-box;transform-origin:center}
.world-cloud-left{transform:translate(-17px,4px)}
.world-cloud-right{fill:#f7effb;transform:translate(17px,7px)}
.world-hero-star{fill:#ffe9ab;stroke:#fff7df;stroke-width:1;transform-box:fill-box;transform-origin:center}
.how-section{position:relative}
.how-grid{position:relative}
.world-how-thread{width:100%;height:70px;left:0;top:-35px;z-index:1}
.world-how-thread .world-stroke{stroke:#bca1ba;stroke-width:1.1}
.world-thread-stars{fill:#eacb7d;stroke:#fff8e9;stroke-width:1.5}
.how-card{--paper-lean:-2.4deg;--paper-x:-8px}
.how-card:nth-of-type(2){--paper-lean:2deg;--paper-x:7px}
.how-card:nth-of-type(3){--paper-lean:-1.2deg;--paper-x:3px}
.how-art{background:#fffdf8;padding:6px;border:1px solid #e8dbe6;border-radius:27px;box-shadow:0 8px 0 -4px #eadfe44d,0 16px 30px -22px #775e7957;transform-origin:50% 85%}
.how-art img{border-radius:20px}
.how-art:after{content:'';position:absolute;right:17px;top:-7px;width:50px;height:16px;background:#e2cddb99;transform:rotate(5deg);clip-path:polygon(0 8%,98% 0,95% 28%,100% 56%,96% 100%,0 94%,4% 59%);pointer-events:none}
.how-number{z-index:2}
.world-sample-orbit{inset:6% 5%;width:90%;height:88%;z-index:1;opacity:.65}
.world-sample-orbit .world-stroke{stroke:#fff8ed;stroke-width:1.2}
.world-finish-star{fill:#ead08e;stroke:#fffaeb;stroke-width:1}
.play-section[data-world-scene]{isolation:isolate;background:var(--cream)}
.play-section[data-world-scene]:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 82% 7%,#f9e9e8 0,transparent 38%),linear-gradient(145deg,#ede4f4,#e9e1f0 58%,#e5eadf);border-radius:50% 50% 0 0/25px 25px 0 0;pointer-events:none}
.world-play-orbit{top:26px;right:4%;width:260px;height:125px;z-index:-1;opacity:.7}
.world-play-orbit .world-stroke{stroke:#b095bd;stroke-width:1}
#everyday-heading em{position:relative;display:inline-block}
#everyday-heading em:after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:10px;border-top:2px solid #d7b5c8;border-radius:50%;transform:rotate(-2deg);transform-origin:left;pointer-events:none}
.moment-card[data-world-scene]{--paper-lean:1.2deg}
.moment-card[data-world-scene]>img{transform-origin:50% 85%}
.moment-large[data-world-scene]{--paper-lean:-1.1deg}
.cuddle-card[data-world-scene]{--paper-lean:-.8deg}
.world-constellation{right:0;top:0;width:62%;height:100%;z-index:-1;opacity:.76}
.world-constellation .world-stroke{stroke:#f7dec6;stroke-width:1;opacity:.66}
.world-constellation-stars{fill:#ffedbd;stroke:#fff5df;stroke-width:.6}

/* Progress is driven only while a scene forms. Completed scenes never rewind. */
html.world-motion-ready[data-motion=on] .world-stroke{stroke-dashoffset:calc(1 - var(--world-p))}
html.world-motion-ready[data-motion=on] .world-cloud-left{transform:translate(calc(var(--world-p) * -17px),calc(var(--world-p) * 4px))}
html.world-motion-ready[data-motion=on] .world-cloud-right{transform:translate(calc(var(--world-p) * 17px),calc(var(--world-p) * 7px))}
html.world-motion-ready[data-motion=on] .world-hero-star{transform:translate(calc((1 - var(--world-p)) * -38px),calc((1 - var(--world-p)) * -14px)) rotate(calc((1 - var(--world-p)) * -27deg)) scale(calc(.55 + var(--world-p) * .45));opacity:calc(.35 + var(--world-p) * .65)}
html.world-motion-ready[data-motion=on] .world-thread-stars,
html.world-motion-ready[data-motion=on] .world-finish-star{opacity:clamp(0,calc((var(--world-p) - .3) * 1.5),1);transform:scale(calc(.7 + var(--world-p) * .3));transform-box:fill-box;transform-origin:center}
html.world-motion-ready[data-motion=on] .how-card .how-art{transform:translate3d(calc((1 - var(--world-p)) * var(--paper-x)),calc((1 - var(--world-p)) * 22px),0) rotate(calc((1 - var(--world-p)) * var(--paper-lean)));box-shadow:0 8px 0 -4px #eadfe44d,0 calc(16px + (1 - var(--world-p)) * 14px) 30px -22px #775e7957}
html.world-motion-ready[data-motion=on] .how-card .how-art img{clip-path:inset(0 calc((1 - var(--world-p)) * 20%) calc((1 - var(--world-p)) * 9%) 0 round 20px)}
html.world-motion-ready[data-motion=on] .how-art:after{transform:translateY(calc((1 - var(--world-p)) * -10px)) rotate(calc(5deg + (1 - var(--world-p)) * 10deg));opacity:calc(.5 + var(--world-p) * .5)}
html.world-motion-ready[data-motion=on] .play-section[data-world-scene]:before{clip-path:ellipse(calc(40% + var(--world-p) * 70%) calc(28% + var(--world-p) * 72%) at 50% 35%)}
html.world-motion-ready[data-motion=on] #everyday-heading em:after{transform:rotate(-2deg) scaleX(var(--world-p))}
html.world-motion-ready[data-motion=on] .moment-card[data-world-scene]>img{transform:translateY(calc((1 - var(--world-p)) * 10px)) rotate(calc((1 - var(--world-p)) * var(--paper-lean))) scale(calc(1 + (1 - var(--world-p)) * .06))}
html.world-motion-ready[data-motion=on] .arcade-door-art .arcade-door-wompy{transform:translate(calc((1 - var(--world-p)) * -38px),calc((1 - var(--world-p)) * -26px)) rotate(calc(-14deg - (1 - var(--world-p)) * 13deg))}
html.world-motion-ready[data-motion=on] .arcade-door-art .arcade-door-basket{transform:translateY(calc((1 - var(--world-p)) * 22px))}
html.world-motion-ready[data-motion=on] .arcade-door-art .arcade-door-flight{transform:rotate(22deg) scale(calc(.5 + var(--world-p) * .5));opacity:calc(.4 + var(--world-p) * .6)}
html.world-motion-ready[data-motion=on] .club-cards .card-back{transform:translateX(calc((1 - var(--world-p)) * 36px)) rotate(calc(-12deg + (1 - var(--world-p)) * 16deg))}
html.world-motion-ready[data-motion=on] .club-cards .card-front{transform:translateY(calc((1 - var(--world-p)) * 20px)) rotate(calc(7deg - (1 - var(--world-p)) * 7deg))}
html.world-motion-ready[data-motion=on] .world-constellation-stars{opacity:calc(.2 + var(--world-p) * .8)}
html.world-motion-ready[data-motion=on] .hello-paper-wrap{transform:translateY(calc((1 - var(--world-p)) * 17px)) rotate(calc((1 - var(--world-p)) * -2deg));transform-origin:50% 0}
html.world-motion-ready[data-motion=on] .hello-paper-tape{translate:0 calc((1 - var(--world-p)) * -13px)}

@media(max-width:680px){
 .world-scroll-invitation{font-size:10px;gap:9px;padding:0 23px 21px}
 .world-hero-arch{stroke-width:1.4}
 .world-hero-star{opacity:.8}
 .world-how-thread{display:none}
 .how-card{position:relative}
 .how-card:not(:last-child):after{content:'';position:absolute;left:50%;bottom:-29px;height:24px;width:1px;background:repeating-linear-gradient(#c6a5bc 0 3px,transparent 3px 7px);transform-origin:top;pointer-events:none}
 html.world-motion-ready[data-motion=on] .how-card:not(:last-child):after{transform:scaleY(var(--world-p))}
 .world-play-orbit{top:10px;right:9px;width:126px;height:77px;opacity:.4}
 .world-sample-orbit{inset:6%;width:88%;height:88%;opacity:.5}
 .world-constellation{width:100%;right:-10%;opacity:.55}
 html.world-motion-ready[data-motion=on] .moment-card[data-world-scene]>img{transform:translateY(calc((1 - var(--world-p)) * 7px)) scale(calc(1 + (1 - var(--world-p)) * .04))}
 .how-art{padding:5px;border-radius:24px}
}

/* These rules also protect the page if motion settings change before the JS runs. */
html[data-motion=off] [data-world-scene]{--world-p:1!important}
@media(prefers-reduced-motion:reduce){[data-world-scene]{--world-p:1!important}}
@media print{[data-world-scene]{--world-p:1!important}.world-scroll-invitation{display:none}}