/* 04 · How OLMORA Works — four Figma compositions, scroll-driven story. */
.dog-story{max-width:1440px;margin:auto;padding:60px 20px;display:flex;flex-direction:column;gap:40px;color:var(--ink);scroll-margin-top:20px}
.story-intro{max-width:694px;width:100%;align-self:center;display:flex;flex-direction:column;gap:20px;text-align:center}
.story-label{font-size:20px;font-weight:600;line-height:1.1;letter-spacing:-.4px;color:var(--green)}
.story-intro h2{margin:0;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.88px}
.story-intro>p:last-child,.routine-copy>p{font-size:16px;font-weight:400;line-height:1.3;letter-spacing:-.32px}
.story-intro>p:last-child{color:var(--muted)}
.story-scroll{width:100%;--story-height:min(760px,calc(100svh - 48px))}
.story-stage{display:flex;flex-direction:column;gap:10px;width:100%}
.routine-card{position:relative;isolation:isolate;min-height:760px;padding:40px;overflow:hidden;border-radius:30px;background:var(--ink);--panel-bg:#08a76d;--panel-glow:#65d39a;--panel-ink:#fff}
.routine-slide-2,.routine-slide-4{--panel-bg:#fddb8a;--panel-glow:#fdc78a;--panel-ink:#0e2f2d}
.routine-slide-3{--panel-bg:#154744;--panel-glow:rgb(7 155 97 / .8)}
.routine-art{position:absolute;inset:0;z-index:-1}
.routine-art img{display:block;width:100%;height:100%;object-fit:cover}
.routine-panel{position:relative;width:463px;max-width:calc(50% - 60px);min-height:680px;padding:40px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:30px;background:var(--panel-bg);box-shadow:inset 0 -32px 140px var(--panel-glow);text-align:center;color:var(--panel-ink)}
.routine-copy{display:flex;flex-direction:column;gap:20px;width:100%}
.routine-copy h3{margin:0;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.88px}
.routine-opening{white-space:nowrap}
.routine-note{display:block;margin-top:6px}
.routine-step{position:absolute;bottom:40px;font-size:16px;line-height:1.3;letter-spacing:-.32px}
.story-scroll.is-scroll-slider{position:relative;height:var(--story-track-height)}
.story-sticky{display:contents}
.is-scroll-slider.is-intro-pinned .story-sticky{position:sticky;top:var(--story-top);display:flex;flex-direction:column;gap:40px;width:100%}
.is-scroll-slider.is-intro-pinned .story-stage{position:relative;top:auto;flex:none}
.is-scroll-slider .story-stage{position:sticky;top:var(--story-top);height:var(--story-height);display:block;isolation:isolate;border-radius:30px;background:var(--ink)}
.story-stage:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.is-scroll-slider .routine-card{position:absolute;inset:0;min-height:0;height:100%;opacity:0;visibility:hidden;pointer-events:none}
.is-scroll-slider .routine-card.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.is-scroll-slider .routine-panel{min-height:0;height:100%}
@media(prefers-reduced-motion:no-preference){.is-scroll-slider .routine-card{transition:opacity .35s ease,visibility .35s}.is-scroll-slider .routine-card.is-active{transition:opacity .35s ease,visibility 0s}}
@media(min-width:1000px) and (max-width:1199px){.routine-card{min-height:680px;padding:32px}.routine-panel{min-height:616px;padding:32px;max-width:calc(50% - 32px)}.routine-copy h3{font-size:36px;letter-spacing:-.72px}}
@media(min-width:1000px) and (max-height:720px){.is-scroll-slider .routine-copy h3{font-size:36px;letter-spacing:-.72px}.is-scroll-slider .routine-panel{padding:32px}.is-scroll-slider .routine-step{bottom:20px}}
@media(max-width:999px){
 .dog-story{padding:40px 28px;gap:32px}
 .story-intro h2{font-size:36px;letter-spacing:-.72px}
 .story-scroll{--story-height:min(700px,calc(100svh - 32px))}
 .routine-card{min-height:0;padding:0;border-radius:20px;background:var(--panel-bg);display:flex;flex-direction:column}
 .routine-panel{width:100%;max-width:none;min-height:0;padding:24px 30px 54px;border-radius:0;box-shadow:none;flex-shrink:0}
 .routine-copy{max-width:540px;gap:12px}
 .routine-copy h3{font-size:30px;letter-spacing:-.6px}
 .routine-step{bottom:16px;font-size:14px;letter-spacing:-.14px}
 .routine-art{position:relative;inset:auto;z-index:auto;display:block;height:400px;width:100%;overflow:hidden}
 .routine-art img{object-position:center top}
 .is-scroll-slider .story-stage{border-radius:20px}
 .is-scroll-slider .routine-panel{height:auto;flex:0 0 auto}
 .is-scroll-slider .routine-art{height:auto;min-height:0;flex:1}
}
@media(max-width:599px){
 .dog-story{padding:32px 20px}
 .story-intro{gap:12px}
 .story-label{font-size:16px;line-height:1.2;letter-spacing:0}
 .story-intro h2{font-size:26px;letter-spacing:-.52px}
 .story-scroll{--story-height:min(650px,calc(100svh - 24px))}
 .routine-panel{padding:20px 30px 50px}
 .routine-copy h3{font-size:26px;letter-spacing:-.52px}
 .routine-art{height:363px}
}

/* One persistent text panel for the pinned story; original slides remain the fallback. */
.story-shared[hidden]{display:none!important}
.is-scroll-slider .routine-card.story-shared{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.story-art-layer{position:absolute;inset:0;display:block;opacity:0}
.story-art-layer.is-active{opacity:1}
@media(prefers-reduced-motion:no-preference){
 .is-scroll-slider .routine-card.story-shared,.story-shared .routine-panel{transition:background-color 800ms cubic-bezier(.45,0,.55,1),box-shadow 800ms cubic-bezier(.45,0,.55,1),color 800ms cubic-bezier(.45,0,.55,1)}
 .story-art-layer{transition:opacity 800ms cubic-bezier(.45,0,.55,1)}
}
@media(max-width:999px){
 .is-scroll-slider .story-shared .routine-panel{height:var(--shared-panel-height);flex:0 0 var(--shared-panel-height)}
}

/* First step: supplied image layers in the PDF's 1400 × 760 composition. */
.routine-layer-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.routine-layer-canvas>img{position:absolute;display:block;object-fit:contain;height:auto;max-width:none}
.routine-layer-canvas>.routine-layer-bg{inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.routine-layer-canvas>.routine-layer-phone{left:38.785714%;top:5.263158%;width:22.428571%;height:auto;z-index:1}
.routine-layer-canvas>.routine-layer-profile{left:38.142857%;top:11.710526%;width:17.285714%;height:auto;z-index:2}
.routine-layer-canvas>.routine-layer-dog{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:3}
.routine-layer-canvas>.routine-layer-main{left:38.142857%;top:49.228773%;width:23.714286%;height:auto;z-index:4}
.story-background-layer{position:absolute;inset:0;opacity:0;z-index:0}
.story-background-layer.is-active{opacity:1}
.story-phone-canvas{z-index:2}
.story-art-layer.routine-layered{z-index:3}
@media(prefers-reduced-motion:no-preference){.story-background-layer{transition:opacity 800ms cubic-bezier(.45,0,.55,1)}}
@media(max-width:999px){
 .routine-layered,.shared-art{container-type:size}
 .routine-layer-canvas{inset:0 auto 0 50%;width:184.210526cqh;height:100%;transform:translateX(-50%)}
}

/* Match the fixed phone frame to the text panel's top and bottom edges. */
@media(min-width:1000px){
 .routine-layer-canvas>.routine-layer-phone{top:40px;height:calc(100% - 80px);object-fit:fill}
}
@media(min-width:1000px) and (max-width:1199px){
 .routine-layer-canvas>.routine-layer-phone{top:32px;height:calc(100% - 64px)}
}

/* Second step: supplied update card sits above the aligned dog mask. */
.routine-layered-2 .routine-layer-canvas>.routine-layer-main{top:47.763158%}

/* Third step: score image in front, with the dog's head overlapping the panel. */
.routine-layered-3 .routine-layer-canvas>.routine-layer-main{left:49.642857%;top:45.723684%;width:23.071429%}
.routine-layered-3{container-type:size}
.routine-layered-3 .routine-layer-canvas>.routine-layer-dog{transform:translateY(max(2.294922cqw,4.230423cqh))}
.story-shared>.story-over-panel{pointer-events:none}
@media(max-width:999px){
 .story-shared>.story-over-panel{top:var(--shared-panel-height);height:calc(100% - var(--shared-panel-height));overflow:hidden}
}

/* Fourth step: microbiome result inside the persistent phone frame. */
.routine-layered-4 .routine-layer-canvas>.routine-layer-dog{mask-image:url("assets/routine-4-dog-masked.webp");mask-size:cover;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:url("assets/routine-4-dog-masked.webp");-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.routine-layered-4 .routine-layer-canvas>.routine-layer-main{left:40.214286%;top:54.605263%;width:19.642857%}

/* Lift the main interface images; retain the original profile card position. */
.routine-layer-canvas>.routine-layer-main{transform:translateY(-20px)}

/* Mobile reference: larger compositions cropped below, anchored at the top. */
@media(max-width:599px){
 .story-stage{gap:20px}
 .routine-step{display:none}
 .routine-panel{padding-bottom:20px}
 .routine-art{height:auto;aspect-ratio:9/10;flex-shrink:0}
 .routine-layer-canvas{inset:0 auto auto 50%;width:226.947368cqh;height:123.2%}
 /* Match the supplied mobile crop for steps 1, 2 and 4 only. */
 .routine-layered:not(.routine-layered-3) .routine-layer-canvas{width:212.422737cqh;height:115.3152%}
 .routine-slide-1 .routine-layer-canvas>.routine-layer-main{top:48.77%;transform:none}
 .routine-layered-2 .routine-layer-canvas>.routine-layer-main{top:48.5%;transform:none}
 .routine-layered-4 .routine-layer-canvas>.routine-layer-main{top:50.96%;transform:none}
 /* Move the photo and its dog mask together to expose the box on mobile. */
 .routine-layered-4 .routine-layer-canvas>.routine-layer-bg,
 .routine-layered-4 .routine-layer-canvas>.routine-layer-dog{transform:translateX(calc(-26% + 140px)) scale(.87);transform-origin:center top}
 .routine-layered-3 .routine-layer-canvas>.routine-layer-dog{transform:translateY(4.230423%)}
 .routine-layered-3 .routine-layer-canvas>.routine-layer-main{left:49.675325%;width:18.636364%;top:auto;bottom:calc(23.2cqh + 3.824562cqw);transform:none}
}

/* Tablets: four normal-flow cards, with the composition centred in the right half. */
@media(min-width:600px) and (max-width:1199px){
 .story-stage{gap:20px}
 .routine-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,52vw,600px);padding:0;border-radius:20px;background:var(--panel-bg)}
 .routine-panel{width:100%;max-width:none;min-height:0;padding:32px 24px 64px;border-radius:0;box-shadow:inset 0 -32px 140px var(--panel-glow)}
 .routine-copy{max-width:360px;gap:20px}
 .routine-copy h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.6px}
 .routine-step{bottom:24px;font-size:14px}
 .routine-art{position:relative;inset:auto;z-index:auto;width:100%;height:auto;min-width:0;overflow:hidden;container-type:size}
 .routine-layer-canvas{inset:0 auto 0 50%;width:200%;height:100%;transform:translateX(-50%)}
 .routine-layer-canvas>.routine-layer-phone{top:24px;height:calc(100% - 48px);object-fit:fill}
 /* Keep the complete update images inside the right-hand frame, including shadows. */
 .routine-slide-1 .routine-layer-canvas>.routine-layer-main,
 .routine-layered-2 .routine-layer-canvas>.routine-layer-main{left:39.25%;width:21.5%}
 .routine-layered-3 .routine-layer-canvas>.routine-layer-main{width:22%}
 /* Align visible card edges, compensating for the baked-in shadows in steps 1–2. */
 .routine-slide .routine-layer-canvas>.routine-layer-main{top:auto;transform:none}
 .routine-slide-1 .routine-layer-canvas>.routine-layer-main{bottom:calc(24px - 8.332272cqw)}
 .routine-layered-2 .routine-layer-canvas>.routine-layer-main{bottom:calc(24px - 8.267513cqw)}
 .routine-layered-3 .routine-layer-canvas>.routine-layer-main{bottom:6.714286cqw}
 .routine-layered-4 .routine-layer-canvas>.routine-layer-main{left:40.178571%;bottom:calc(24px + 2.785714cqw)}
}