:root {
    --paper: #FFF3DF;
    --coral: #FF6B7A;
    --violet: #4E46B4;
    --mint: #8FE3B5;
    --cocoa: #3B2726;
    --butter: #FFD66E;
    --blush: #FFD2DF;
    --fraunces: "Fraunces", serif;
    --nunito: "Nunito Sans", sans-serif;
    --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--cocoa);
    font-family: var(--nunito);
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 210, 223, .95), transparent 30%),
        radial-gradient(circle at 88% 22%, rgba(255, 214, 110, .65), transparent 24%),
        linear-gradient(125deg, var(--paper), #ffe9d2 45%, var(--blush));
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: radial-gradient(rgba(59, 39, 38, .12) 1px, transparent 1px);
    background-size: 18px 18px;
    mix-blend-mode: multiply;
    z-index: 5;
}

.affection-workshop { position: relative; min-height: 500vh; isolation: isolate; }

.scene {
    position: relative;
    min-height: 100vh;
    padding: clamp(28px, 5vw, 78px);
    display: grid;
    overflow: hidden;
}

.care-thread-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.care-thread, .care-thread-shadow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.care-thread {
    stroke: var(--coral);
    stroke-width: 10;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 7px 0 rgba(78,70,180,.16));
}

.care-thread-shadow { stroke: rgba(59, 39, 38, .10); stroke-width: 18; transform: translate(10px, 18px); }

h1, h2 { font-family: var(--fraunces); font-weight: 900; line-height: .88; letter-spacing: -.055em; margin: 0; }
p { font-size: clamp(18px, 2vw, 25px); line-height: 1.28; margin: 0; }

.mono-label, .protocol-tags span, .spool-label, .release-stamps span {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: lowercase;
}

.first-spark { align-items: center; background: radial-gradient(circle at 62% 43%, rgba(255,214,110,.42), transparent 26%); }
.wordmark { font-size: clamp(62px, 16vw, 230px); z-index: 4; max-width: 94vw; transform: rotate(-2deg); text-shadow: 10px 16px 0 rgba(78,70,180,.12); }
.domain-dot { position: relative; display: inline-block; color: var(--coral); }
.wind-key {
    position: absolute;
    width: .24em; height: .24em;
    border: .035em solid var(--cocoa);
    border-radius: 50%;
    left: .08em; top: .54em;
    transform-origin: 50% 50%;
    animation: wind 5s linear infinite;
}
.wind-key::before { content: ""; position: absolute; width: .38em; height: .045em; background: var(--cocoa); top: 48%; left: 70%; border-radius: 99px; }
.wake-copy { z-index: 4; max-width: 530px; margin: -8vh 0 0 48vw; transform: rotate(2deg); }
.lamp-pool { position: absolute; width: 48vw; height: 48vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,110,.62), transparent 66%); right: 2vw; top: 9vh; animation: breathe 4.8s ease-in-out infinite; }

.thread-spool { position: absolute; left: -7vw; bottom: 4vh; width: clamp(190px, 28vw, 380px); aspect-ratio: 1; border: 7px solid var(--cocoa); border-radius: 50%; background: repeating-radial-gradient(circle, var(--blush) 0 18px, var(--paper) 19px 34px); box-shadow: 20px 26px 0 rgba(78,70,180,.16); z-index: 2; }
.spool-core { position: absolute; inset: 35%; border-radius: 50%; background: var(--butter); border: 5px solid var(--cocoa); }
.spool-ring { position: absolute; inset: 15%; border: 3px dashed var(--coral); border-radius: 50%; }
.spool-label { position: absolute; right: -42px; bottom: 30%; background: var(--paper); padding: 8px 12px; border: 2px solid var(--cocoa); transform: rotate(-10deg); }

.vellum-note, .stage-card, .blueprint-vellum, .keepsake-envelope, .folding-note, .stitched-sample {
    background: rgba(255,243,223,.78);
    border: 2px solid rgba(59,39,38,.78);
    box-shadow: 12px 16px 0 rgba(78,70,180,.14), inset 0 0 34px rgba(255,210,223,.38);
    backdrop-filter: blur(6px);
}

.opening-note { position: absolute; top: 13vh; right: 12vw; width: 260px; padding: 22px; transform: rotate(6deg); z-index: 4; }
.paper-mobile { position: absolute; inset: 10vh auto auto 12vw; z-index: 4; }
.paper-charm { display: block; width: max-content; margin: 20px; padding: 12px 18px; background: var(--paper); border: 2px solid var(--cocoa); border-radius: 18px 18px 24px 12px; box-shadow: 8px 10px 0 rgba(255,107,122,.22); transform: rotate(var(--tilt, -6deg)); animation: bob 3.8s ease-in-out infinite; }
.charm-two { --tilt: 9deg; margin-left: 88px; animation-delay: -.8s; }
.charm-three { --tilt: -2deg; margin-left: 36px; animation-delay: -1.7s; }

.workbench-gestures { grid-template-columns: .86fr 1.14fr; align-items: center; gap: 5vw; background: linear-gradient(156deg, transparent, rgba(143,227,181,.24)); }
.ribbon-title { position: absolute; top: 11vh; left: 9vw; padding: 14px 36px; background: var(--coral); color: var(--paper); font-family: var(--mono); transform: rotate(-8deg); box-shadow: 9px 11px 0 rgba(59,39,38,.22); }
.circular-mat { min-height: 55vw; max-height: 640px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,110,.48), var(--paper) 58%, rgba(255,210,223,.9)); border: 3px dashed var(--cocoa); display: flex; flex-direction: column; justify-content: center; padding: 8vw; transform: translateX(-7vw) rotate(-6deg); position: relative; }
.circular-mat h2, .stage-card h2, .blueprint-vellum h2, .keepsake-envelope h2 { font-size: clamp(52px, 9vw, 128px); }
.circular-mat p { margin-top: 24px; }
.mat-pin { position: absolute; width: 22px; height: 22px; background: var(--butter); border: 3px solid var(--cocoa); border-radius: 50%; }
.pin-a { top: 20%; left: 23%; } .pin-b { right: 17%; bottom: 24%; }
.gesture-board { display: grid; gap: 28px; z-index: 4; transform: rotate(3deg); }
.stitched-sample { padding: 24px; border-style: dashed; border-radius: 24px; max-width: 460px; }
.stitched-sample.lifted { margin-left: 8vw; transform: rotate(-5deg); background: rgba(255,210,223,.8); }
.mint-solved { margin-left: 2vw; background: rgba(143,227,181,.62); }
.soft-button { margin-top: 14px; border: 2px solid var(--cocoa); background: var(--butter); color: var(--cocoa); border-radius: 999px; padding: 14px 22px; font: 800 18px var(--nunito); box-shadow: 0 7px 0 var(--cocoa); }

.bug-apology-theater { align-items: center; justify-items: center; background: radial-gradient(circle at 50% 72%, rgba(78,70,180,.20), transparent 38%); }
.theater-curtain { position: absolute; top: 0; width: 78vw; height: 24vh; background: repeating-linear-gradient(90deg, var(--blush) 0 44px, #ffc3d4 45px 82px); border: 3px solid var(--cocoa); border-top: 0; border-radius: 0 0 38px 38px; box-shadow: 0 22px 0 rgba(78,70,180,.12); }
.stage-card { width: min(760px, 82vw); padding: clamp(26px, 5vw, 58px); border-radius: 30px; transform: rotate(-2deg); z-index: 4; }
.bug-cast { position: absolute; bottom: 9vh; left: 12vw; right: 12vw; display: flex; justify-content: space-around; z-index: 4; }
.bug-sprite { width: 92px; height: 76px; background: var(--violet); border: 3px solid var(--cocoa); border-radius: 48% 48% 42% 42%; position: relative; animation: bow 4s ease-in-out infinite; box-shadow: 9px 10px 0 rgba(59,39,38,.18); }
.bug-sprite::before, .bug-sprite::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); top: 26px; }
.bug-sprite::before { left: 25px; } .bug-sprite::after { right: 25px; }
.bug-sprite span { position: absolute; left: 58px; top: -32px; padding: 6px 10px; background: var(--paper); border: 2px solid var(--cocoa); font-family: var(--mono); font-size: 11px; transform: rotate(8deg); }
.bug-two { background: var(--coral); animation-delay: -.9s; } .bug-three { background: var(--mint); animation-delay: -1.8s; }
.folding-note { position: absolute; right: 9vw; bottom: 15vh; width: 320px; padding: 24px; border-radius: 8px 28px 18px 18px; transform-origin: top; transform: rotate(8deg) scaleY(.86); transition: transform .6s ease; z-index: 5; }
.folding-note.open { transform: rotate(3deg) scaleY(1); }

.component-heartbeat { grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; background: linear-gradient(35deg, rgba(78,70,180,.16), transparent 45%, rgba(255,214,110,.3)); }
.blueprint-vellum { padding: clamp(26px, 5vw, 60px); border-radius: 42px 12px 42px 22px; transform: rotate(3deg); z-index: 4; }
.heart-machine { width: min(460px, 78vw); aspect-ratio: 1; border: 5px solid var(--cocoa); border-radius: 42% 48% 44% 50%; background: radial-gradient(circle, var(--paper), var(--blush)); position: relative; box-shadow: 18px 22px 0 rgba(78,70,180,.18); z-index: 4; }
.gear { position: absolute; border: 4px solid var(--cocoa); border-radius: 50%; background: repeating-conic-gradient(var(--butter) 0 16deg, var(--paper) 17deg 31deg); animation: spin 9s linear infinite; }
.gear-a { width: 140px; height: 140px; left: 54px; top: 76px; }
.gear-b { width: 108px; height: 108px; right: 54px; bottom: 78px; animation-direction: reverse; }
.machine-heart { position: absolute; width: 118px; height: 104px; left: calc(50% - 59px); top: calc(50% - 52px); background: var(--coral); clip-path: polygon(50% 96%, 8% 50%, 8% 18%, 30% 4%, 50% 22%, 70% 4%, 92% 18%, 92% 50%); filter: drop-shadow(0 9px 0 rgba(59,39,38,.22)); animation: pulse 1.4s ease-in-out infinite; }
.heartbeat-line { position: absolute; width: 76%; height: 4px; background: var(--cocoa); left: 12%; top: 72%; box-shadow: 0 0 0 6px rgba(255,243,223,.76); }
.protocol-tags { position: absolute; right: 6vw; bottom: 10vh; display: grid; gap: 10px; z-index: 5; }
.protocol-tags span { padding: 9px 12px; background: var(--paper); border: 2px solid var(--cocoa); transform: rotate(var(--r, 4deg)); }
.protocol-tags span:nth-child(2) { --r: -7deg; } .protocol-tags span:nth-child(3) { --r: 2deg; }

.keepsake-release { align-items: center; justify-items: center; background: radial-gradient(circle at 36% 44%, rgba(255,210,223,.7), transparent 30%), radial-gradient(circle at 68% 55%, rgba(143,227,181,.5), transparent 25%); }
.keepsake-envelope { width: min(820px, 86vw); padding: clamp(30px, 6vw, 70px); border-radius: 22px; transform: rotate(-3deg); position: relative; z-index: 4; }
.keepsake-envelope::before { content: ""; position: absolute; inset: 18px; border-top: 3px solid rgba(59,39,38,.38); transform: skewY(-12deg); transform-origin: left; pointer-events: none; }
.keepsake-envelope p { margin-top: 26px; }
.release-stamps { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.release-stamps span { border: 2px solid var(--coral); color: var(--coral); padding: 10px 14px; border-radius: 50%; transform: rotate(-8deg); }
.final-mobile { position: absolute; right: 15vw; top: 12vh; z-index: 5; }
.star-sticker { display: block; width: 84px; height: 84px; background: var(--butter); clip-path: polygon(50% 0, 61% 33%, 96% 24%, 72% 52%, 94% 82%, 59% 72%, 50% 100%, 39% 72%, 6% 82%, 28% 52%, 4% 24%, 39% 33%); filter: drop-shadow(7px 9px 0 rgba(78,70,180,.18)); animation: bob 4s ease-in-out infinite; }
.thread-knot { display: block; width: 54px; height: 54px; margin: 34px; border: 9px solid var(--coral); border-radius: 50% 42% 50% 42%; transform: rotate(24deg); }

.scene.is-awake .paper-charm, .scene.in-view .paper-charm { transform: translateY(-18px) rotate(var(--tilt, -6deg)); }
.scene.in-view .vellum-note, .scene.in-view .stitched-sample, .scene.in-view .blueprint-vellum, .scene.in-view .keepsake-envelope { animation: foldIn .8s ease both; }

@keyframes wind { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .68; } }
@keyframes bob { 50% { translate: 0 -14px; } }
@keyframes bow { 45% { transform: rotate(0deg) translateY(0); } 55% { transform: rotate(8deg) translateY(14px); } 70% { transform: rotate(0deg) translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.12); } }
@keyframes foldIn { from { opacity: .55; transform: translateY(22px) rotate(6deg); } }

@media (max-width: 850px) {
    .scene { min-height: 110vh; padding: 28px; }
    .workbench-gestures, .component-heartbeat { grid-template-columns: 1fr; }
    .wake-copy { margin: 4vh 0 0 0; }
    .opening-note, .folding-note, .protocol-tags { position: relative; inset: auto; margin: 18px; }
    .circular-mat { min-height: 84vw; transform: rotate(-4deg); padding: 14vw; }
    .bug-cast { left: 4vw; right: 4vw; }
}