@import url("assets/fonts.css");
:root{--cream:#fcfaf7;--plum:#342655;--coral:#eb6975;--ink:#29243d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:86px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:fixed;inset:0 0 auto;z-index:20;background:#fcfaf7ec;backdrop-filter:blur(16px);border-bottom:1px solid #34265512}header img{display:block}nav{display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--plum);color:#fff;border-radius:50px;padding:17px 24px;font-weight:600;font-size:14px;transition:background .2s,transform .2s}.button:hover{background:#594280;transform:translateY(-2px)}.small{padding:13px 21px}#story{height:897.5vh}.stage{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden}.story-copy{position:absolute;top:23%;left:7%;width:35%;z-index:2;pointer-events:none}.story-copy a{pointer-events:auto}.eyebrow{text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:.19em;color:#a95866}#chapters{position:relative;height:360px;margin-top:39px}#chapters article{position:absolute;inset:0;opacity:0;transform:translateY(15px);transition:opacity .35s,transform .35s;pointer-events:none}#chapters article.active{opacity:1;transform:translateY(0);pointer-events:auto}.chapter{font-size:11px;color:#81758e;letter-spacing:.05em}h1,h2{font-family:'Fraunces',Georgia,serif;letter-spacing:-.055em;font-weight:500;line-height:1.03;font-size:clamp(46px,5.2vw,80px);margin:20px 0}em{font-style:normal;color:var(--coral)}p{font-size:15px;line-height:1.8;color:#6c6275;max-width:390px}#chapters .button{margin-top:6px}.scroll-cue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.06em;color:#82768b;margin-top:30px}.mouse{border:1px solid #d8cedf;border-radius:20px;padding:10px 8px;color:var(--plum)}#scene{position:absolute;left:40%;width:60%;top:12%;height:79%}canvas{display:block;width:100%;height:100%;outline:none}.scene-label{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;gap:8px;align-items:center;font-size:11px;color:#776982;padding:10px 15px;border:1px solid #fff;border-radius:30px;background:#ffffff9c}.dot{width:6px;height:6px;border-radius:50%;background:#eb6975}.story-bottom{position:absolute;bottom:26px;left:7%;right:5%;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;letter-spacing:.13em;color:#8a7d94}#steps{display:flex;gap:8px}#steps button{border:0;border-bottom:2px solid #ded7e6;background:none;padding:12px 14px;color:#8b7c95;font-size:11px}#steps .selected{border-color:var(--coral);color:var(--plum)}#motion{border:0;background:none;font-size:10px;color:#81758e}#loading{position:absolute;inset:45% 0 auto;text-align:center;font-size:14px}.ribbon{background:var(--plum);color:white;display:flex;gap:45px;justify-content:center;padding:25px;font-size:13px;letter-spacing:.04em}.ribbon span{color:#ffcb68}.transformation{max-width:1400px;margin:auto;padding:110px 7%;display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:center}.transformation h2,.start h2{font-size:clamp(38px,3.8vw,58px)}.examples{display:flex;gap:15px;align-items:center}.examples figure{margin:0;width:50%}.examples img{width:100%;border-radius:100px 100px 16px 16px;aspect-ratio:1/1.2;object-fit:cover;background:#eee9f1}.examples figcaption{font-size:11px;margin:18px 0;line-height:1.5}.examples figcaption span{color:var(--coral);margin-right:7px}.arrow{color:var(--coral);font-size:26px}.start{background:#f0edf7;padding:90px 12%;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.upload{border:1px dashed #bdb0cc;border-radius:16px;padding:22px;margin:25px 0;max-width:430px}.upload button{background:white;border:0;border-radius:25px;padding:13px 20px;color:var(--plum);font-weight:600}.upload p{font-size:11px;margin:10px 0 0}.upload .privacy{font-size:10px;line-height:1.5}.upload img{max-height:150px;max-width:100%;border-radius:8px;margin-top:15px}.email{display:block;font-size:12px;margin-top:20px;text-decoration:underline;text-underline-offset:4px}aside{background:#fcfaf7;padding:35px;border-radius:24px}h3{font:500 34px/1.1 'Fraunces',Georgia,serif;letter-spacing:-.04em}aside p{font-size:13px}table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}caption{text-align:left;font-weight:600;margin:25px 0 16px}th,td{padding:15px 5px;border-bottom:1px solid #e7dfe9}thead th{font-size:11px;color:#8b7d95}.delivery{margin-top:25px}aside .fine{font-size:10px;line-height:1.7}footer{padding:40px 7%;display:flex;align-items:center;gap:32px}footer p{margin-right:auto;font-size:12px}footer a{font-size:12px}a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:5px}@media(min-width:1600px){.story-copy{top:26%}}@media(max-width:850px){header{height:72px;padding:0 6%}header img{width:125px}nav>a:not(.button){display:none}nav .button{font-size:10px;padding:12px 16px}.stage{min-height:700px}.story-copy{top:15%;left:7%;width:86%}.eyebrow{font-size:9px}#chapters{margin-top:20px;height:210px}h1,h2{font-size:46px;margin:13px 0}#chapters h2 br:nth-child(2){display:none}#chapters p{max-width:320px;font-size:12px;line-height:1.6}#chapters .button{position:absolute;right:0;bottom:0;font-size:11px;padding:13px 16px}.scroll-cue{display:none}#scene{top:43%;left:0;width:100%;height:49%}.scene-label{bottom:3%;font-size:9px}.story-bottom{bottom:13px;left:6%;right:6%}.story-bottom>span{display:none}#steps button{padding:10px 12px}#motion{font-size:9px}.ribbon{gap:15px;font-size:10px;padding:22px 10px}.transformation{grid-template-columns:1fr;gap:30px;padding:65px 7%}.transformation p{max-width:500px}.start{grid-template-columns:1fr;gap:45px;padding:65px 7%}footer{flex-wrap:wrap;gap:20px}footer p{width:50%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#chapters article{transition:none}}
.story-copy:has(article:last-child.active) .scroll-cue{visibility:hidden}

#chapters article{transition:opacity .65s ease,transform .75s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){#chapters article{transition:none}}

/* The chapter container and canvas share a fade-through-empty timeline. */
#chapters article{transition:none;transform:none}
#scene,#chapters{will-change:opacity}

/* Dialogue follows the speaker's projected head position inside the fading scene. */
.speech-cloud{position:absolute;z-index:4;transform:translate(-50%,-100%);width:260px;padding:22px 26px;background:#fffdf9;border:2px solid #e9dde8;border-radius:48% 45% 46% 43%;box-shadow:0 8px 25px #34265512;text-align:center;font:500 23px/1.18 'Fraunces',Georgia,serif;color:#342655;pointer-events:none}
.speech-cloud::before,.speech-cloud::after{content:'';position:absolute;background:#fffdf9;border:2px solid #e9dde8;border-radius:50%;left:46%;bottom:-15px;width:16px;height:12px}
.speech-cloud::after{left:49%;bottom:-25px;width:7px;height:6px}
#chapters article:nth-child(-n+3) h1,#chapters article:nth-child(-n+3) h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#chapters article:nth-child(-n+3) p{margin-top:30px}
@media(max-width:850px){.speech-cloud{width:195px;font-size:17px;padding:15px 21px}}

#chapters article:nth-child(5) h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#chapters article:nth-child(5) p{margin-top:30px}
.speech-cloud.child-celebration::before{left:78%}.speech-cloud.child-celebration::after{left:84%}

/* The scroll story is now an animation-only stage. */
.story-copy,.story-bottom>span,.scene-label{display:none}
#scene{left:20%;width:60%}
.story-bottom{justify-content:center}
#motion{position:absolute;right:0}
@media(max-width:850px){#scene{left:0;width:100%;top:24%;height:65%}}

/* Persistent scroll guidance above every animated chapter. */
.stage>.scroll-cue{display:flex;position:absolute;top:105px;left:50%;transform:translateX(-50%);margin:0;z-index:5;white-space:nowrap;gap:12px;font-size:11px;color:var(--plum)}
@media(max-width:850px){.stage>.scroll-cue{top:88px;font-size:10px;gap:9px}.stage>.scroll-cue .mouse{padding:8px 7px}}