@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;800&family=Playfair+Display:ital,wght@1,700&display=swap');
:root{--bg:#f4eee8;--ink:#111014;--muted:#756d75;--pink:#ff8db8;--blue:#9ddcff}
*{box-sizing:border-box}html{scroll-behavior:auto}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}body{min-height:100vh;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.9),transparent 28%),linear-gradient(135deg,#f6f0ea 0%,#eee4de 48%,#f6f1ec 100%)}
#world,#milkuCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#world{z-index:0}#milkuCanvas{z-index:3;filter:drop-shadow(0 35px 65px rgba(42,25,37,.16))}.vignette{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 56% 44%,transparent 42%,rgba(35,18,30,.09) 100%),linear-gradient(90deg,rgba(245,238,231,.18),transparent 28%,transparent 70%,rgba(245,238,231,.14))}
main{position:relative;z-index:2}.scene{min-height:130vh;position:relative;display:flex;align-items:center;padding:8vw}.scene--hero{min-height:150vh}.scene--one,.scene--three{background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 38%)}.scene--two{background:radial-gradient(circle at 70% 48%,rgba(255,141,184,.06),transparent 30%)}.scene--final{min-height:120vh;justify-content:center;text-align:center}
.nav{position:fixed;z-index:12;left:0;right:0;top:0;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;mix-blend-mode:multiply}.brand{color:inherit;text-decoration:none;font-weight:800;letter-spacing:.13em}.brand span{color:var(--pink);margin-left:5px}.nav__hint{font-size:10px;letter-spacing:.18em;font-weight:800;color:#6f6870}
.copy{position:relative;z-index:5;width:min(610px,86vw)}.copy--left{max-width:560px}.copy--right{margin-left:auto;max-width:520px}.copy--center{margin:auto}.eyebrow{font-size:11px!important;letter-spacing:.19em;font-weight:800;color:#6e666e;text-transform:uppercase}.copy h1,.copy h2{font-size:clamp(58px,8vw,128px);line-height:.87;letter-spacing:-.07em;margin:16px 0 24px;font-weight:800}.copy h1 em,.copy h2 em{font-family:'Playfair Display',serif;font-weight:700}.copy>p:last-child{font-size:clamp(17px,1.5vw,23px);line-height:1.55;color:#5d565e;max-width:520px}.copy--center>p:last-child{margin-inline:auto}
.depth{position:absolute;font-weight:800;letter-spacing:-.08em;line-height:.72;white-space:nowrap;user-select:none;pointer-events:none}.depth--back{z-index:1;font-size:clamp(150px,28vw,430px);left:-2vw;top:13vh;color:rgba(255,255,255,.66);text-shadow:0 40px 100px rgba(44,27,41,.08)}.depth--mid{z-index:2;font-size:clamp(100px,20vw,310px);right:-2vw;top:15vh;color:rgba(17,16,20,.05)}.depth--front{z-index:6;font-size:clamp(180px,34vw,520px);right:-3vw;bottom:6vh;color:rgba(255,255,255,.30);text-shadow:0 18px 50px rgba(60,30,50,.08);mix-blend-mode:screen}.depth--outline{color:transparent;-webkit-text-stroke:2px rgba(16,14,18,.09);left:-6vw;top:25vh;right:auto}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.48}.orb--pink{width:34vw;height:34vw;right:4vw;top:14vh;background:radial-gradient(circle at 30% 30%,#fff,#ffb2d0 45%,transparent 70%)}.orb--blue{width:26vw;height:26vw;left:12vw;bottom:10vh;background:radial-gradient(circle at 40% 40%,#fff,#a9e2ff 45%,transparent 72%)}
.scrollCue{position:absolute;left:8vw;bottom:14vh;display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:800;color:#6d666e}.scrollCue span{width:1px;height:54px;background:#363136;display:block;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scaleY(.35);opacity:.35}}
.progress{position:fixed;z-index:13;right:17px;top:50%;transform:translateY(-50%);height:160px;width:2px;background:rgba(0,0,0,.1);overflow:hidden}.progress i{display:block;width:100%;height:0;background:#181519}
.loader{position:fixed;z-index:99;inset:0;background:#f5eee7;display:grid;place-content:center;text-align:center;transition:opacity .45s ease,visibility .45s}.loader.is-done{opacity:0;visibility:hidden}.loader__mark{font-size:clamp(58px,10vw,120px);font-weight:800;letter-spacing:-.08em}.loader__bar{width:min(320px,70vw);height:2px;background:rgba(0,0,0,.09);margin:24px auto 12px;overflow:hidden}.loader__bar i{display:block;width:0;height:100%;background:#151216}.loader p{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#777078}
@media(min-width:761px){.scene--hero .copy{transform:translateY(6vh)}.scene--one .copy--right,.scene--three .copy--right{padding-right:3vw}.scene--two .copy--left{padding-left:1vw}}
@media(max-width:760px){body{background:#f4eee8}.scene{min-height:115vh;padding:24px}.scene--hero{min-height:135vh}.copy--right{margin-left:0;margin-top:55vh}.depth--back{top:16vh}.nav{padding:16px}.nav__hint{display:none}.progress{right:8px}.copy h1,.copy h2{font-size:clamp(52px,15vw,78px)}.copy>p:last-child{font-size:17px}.depth--front{bottom:18vh}#milkuCanvas{filter:none}.vignette{background:linear-gradient(to bottom,rgba(245,238,231,.05),rgba(245,238,231,.15))}}
@media(prefers-reduced-motion:reduce){.scrollCue span{animation:none}}