@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{--paper:#f7f4eb;--ink:#292d27;--accent:#b82e3f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{position:fixed;z-index:10;top:0;left:0;right:0;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:20px;background:#f7f4ebba;backdrop-filter:blur(14px);border-bottom:1px solid #292d2712}.brand{font-size:33px;letter-spacing:-2px}.brand span{color:var(--accent)}.edition{font-size:9px;letter-spacing:2px}.back{display:flex;align-items:center;gap:20px;font-size:12px}.back svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.5}.journey{height:540svh}.pinned{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden}.ambient{position:absolute;inset:0;background:#d8e6e2;opacity:var(--cold,0)}.content{position:relative;height:100%;max-width:1500px;margin:auto;display:grid;grid-template-columns:1fr 1fr;padding:120px 6% 110px;align-items:center;gap:3%}.scene-copy{z-index:5;max-width:570px;transition:opacity .2s,transform .3s}.eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 30px;color:var(--accent)}h1{font:600 clamp(52px,6.4vw,92px)/1.02 Manrope,sans-serif;letter-spacing:-.065em;margin:0 0 30px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.description{font-size:15px;line-height:1.85;max-width:350px;color:#555e52}.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.facts span{border-top:1px solid #292d2730;padding:14px 15px 0 0;font-size:9px;letter-spacing:.7px}.visual{position:relative;height:min(65vh,620px);min-height:430px;isolation:isolate}.orbit{position:absolute;left:50%;top:50%;width:95%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #b82e3f25}.orbit-a{background:radial-gradient(circle,#edd6d6aa,transparent 70%)}.orbit-b{width:111%;border-style:dashed;opacity:.4}.background-word{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);font:700 100px Manrope,sans-serif;color:var(--accent);opacity:.055;letter-spacing:-6px;white-space:nowrap}.berry{position:absolute;z-index:3;left:50%;top:45%;width:310px;height:350px;transform:translate(-50%,-50%);will-change:transform,opacity;filter:drop-shadow(10px 25px 18px #4d172622)}.berry img,.berry svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.dry{opacity:var(--dry,0)}.fresh{opacity:calc(1 - var(--dry,0));filter:saturate(1.12)}.frost{position:absolute;inset:12% 15%;border-radius:42% 45% 48% 40%;opacity:var(--frost,0);background:radial-gradient(ellipse at 20% 30%,#fff9,transparent 50%),repeating-conic-gradient(from 20deg,#e3f3ff66 0 2deg,transparent 3deg 18deg);filter:blur(1px);pointer-events:none}.vapour{position:absolute;inset:0;z-index:2;opacity:var(--vapour,0)}.vapour i{position:absolute;left:50%;top:45%;width:4px;height:4px;border:1px solid #688f96;border-radius:50%;transform:translate(var(--x),var(--y));opacity:var(--o)}.pack-shell{position:absolute;z-index:4;left:50%;bottom:-15px;width:360px;height:430px;transform:translateX(-50%);opacity:0;will-change:transform,opacity}.pack-shell img{width:100%;height:100%;object-fit:contain;mask:url('assets/pack-cilek-mask.svg') center/contain no-repeat}.annotation{position:absolute;right:0;bottom:15%;font:italic 23px Georgia,serif;color:var(--accent);transform:rotate(-12deg)}.finish-seal{position:absolute;z-index:6;right:0;top:23%;border-radius:50%;width:100px;height:100px;display:grid;place-content:center;text-align:center;background:#d6e480;font-size:12px;line-height:1.5;transform:rotate(12deg);opacity:0}.end-link{display:none;font-size:13px;margin-top:28px;border-bottom:1px solid;padding-bottom:12px;width:max-content}.end-link span{margin-left:20px}.bottom{position:absolute;left:5%;right:5%;bottom:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}.scroll-cue{display:flex;align-items:center;gap:14px;font-size:8px;letter-spacing:1.2px}.scroll-line{height:35px;width:1px;background:linear-gradient(transparent,var(--accent));display:block}.chapters{display:flex;gap:20px}.chapters button{background:none;border:0;border-top:2px solid #292d2720;padding:13px 5px;min-width:80px;min-height:44px;text-align:left;font-size:10px}.chapters button span{margin-left:7px}.chapters button[aria-current=true]{color:var(--accent);border-color:var(--accent)}.progress-number{font-size:10px;letter-spacing:2px}.progress-bar{position:absolute;bottom:0;left:0;height:3px;background:var(--accent);width:0}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:800px){header{height:72px;padding:0 6%}.brand{font-size:27px}.edition{display:none}.back{font-size:11px;gap:10px}.journey{height:480svh}.pinned{min-height:600px}.content{padding:95px 7% 95px;display:flex;flex-direction:column;gap:8px;align-items:stretch}.scene-copy{min-height:230px}.eyebrow{font-size:8px;margin-bottom:14px;letter-spacing:1.5px}h1{font-size:clamp(40px,12vw,58px);margin-bottom:14px}.description{font-size:12px;line-height:1.7;max-width:310px;margin:0}.facts{margin-top:13px;gap:8px}.facts span{font-size:8px;padding-top:8px}.visual{min-height:0;flex:1;height:auto;max-height:370px}.berry{width:210px;height:235px;top:43%}.orbit{width:72%;max-width:280px}.orbit-b{width:84%;max-width:320px}.background-word{font-size:70px}.pack-shell{width:245px;height:285px;bottom:-14px}.annotation{font-size:18px;bottom:16%;right:1%}.finish-seal{width:73px;height:73px;font-size:9px;right:3%;top:5%}.bottom{bottom:20px;left:6%;right:6%;gap:12px;flex-wrap:wrap}.scroll-cue{font-size:7px;gap:6px;position:absolute;top:-22px;left:0}.scroll-line{height:13px}.chapters{gap:6px;flex:1}.chapters button{min-width:0;flex:1;padding:9px 2px;font-size:8px}.chapters button span{margin-left:4px}.progress-number{font-size:8px;letter-spacing:0}.end-link{font-size:11px;margin-top:12px;padding-bottom:6px}.end-link span{margin-left:10px}}
@media(max-height:720px) and (max-width:800px){.content{padding-top:86px}.scene-copy{min-height:215px}h1{font-size:41px}.berry{width:175px;height:195px}.facts{display:none}.pack-shell{height:245px;width:215px}}
@media(prefers-reduced-motion:reduce){.scene-copy{transition:none}.berry{will-change:auto}}

/* Six scroll-driven stages: intact fruit, slices, ice, drying, small pieces, pouch. */
.journey{height:680svh}.whole{opacity:1}.fresh{opacity:calc(var(--slice,0) * (1 - var(--dry,0)))}
.frost{inset:0;border-radius:0;mask:url('assets/strawberry-fresh.png') center/contain no-repeat;background:radial-gradient(ellipse at 30% 40%,#e2f8ffcc,transparent 70%),repeating-conic-gradient(from 20deg,#fff9 0 2deg,transparent 3deg 18deg);filter:none}
.ice-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse,transparent 30%,#c5ecf488 65%,transparent 72%);box-shadow:inset 0 0 60px #e3f7ff;opacity:var(--snow,0);transform:scale(calc(.7 + var(--snow,0) * .3))}.snow{position:absolute;inset:-5% 0;opacity:var(--snow,0);z-index:5;pointer-events:none}.snow svg{position:absolute;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 2px #729daa88)}.slice-fan{position:absolute;inset:0;z-index:2}.slice-fan img{position:absolute;left:50%;top:45%;width:310px;height:350px;object-fit:contain;opacity:0;filter:drop-shadow(8px 15px 12px #4d172622)}.pour{position:absolute;inset:0;z-index:3;pointer-events:none}.pour svg{position:absolute;left:50%;top:0;width:170px;height:220px;opacity:0;filter:drop-shadow(3px 7px 5px #4d172622);will-change:transform,opacity}.pack-shell{z-index:4}.chapters{gap:12px}.chapters button{min-width:68px}
@media(max-width:800px){.journey{height:620svh}.slice-fan img{width:210px;height:235px;top:43%}.chapters{gap:4px}.chapters button{min-width:0;font-size:7px;padding:9px 0}.chapters button span{display:block;margin:5px 0 0}.bottom{gap:7px}.snow svg{width:16px;height:16px}.pour svg{width:150px;height:195px}}
@media(max-height:720px) and (max-width:800px){.slice-fan img{width:175px;height:195px}}

/* Keep the fruit name beside the silhouette, inside the visual bounds. */
.background-word{left:auto;right:-3%;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:clamp(48px,5.5vw,76px);line-height:1;letter-spacing:-4px;opacity:.105;pointer-events:none}
@media(max-width:800px){.background-word{right:0;font-size:clamp(29px,7.8vw,38px);letter-spacing:-1.5px;opacity:.12}.finish-seal{right:10%}}