@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{color-scheme:dark;--cream:#fff9e9;--p:0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#28352b;color:var(--cream);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:7px}.experience{position:fixed;inset:0;overflow:hidden;isolation:isolate}.scene{position:absolute;inset:0;z-index:-2;background:#435440}.landscape,.foreground{position:absolute;inset:-3%;background-image:url('cereal-world.webp');background-size:cover;background-position:center;will-change:transform}.landscape{filter:saturate(.9)}.foreground{z-index:1;pointer-events:none}.foreground.left{clip-path:polygon(0 0,20% 0,27% 28%,23% 51%,33% 100%,0 100%);mask-image:linear-gradient(90deg,#000 3%,transparent 34%)}.foreground.right{clip-path:polygon(80% 0,100% 0,100% 100%,67% 100%,77% 51%,73% 28%);mask-image:linear-gradient(270deg,#000 3%,transparent 34%)}.shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(16,34,26,.49),rgba(24,36,24,.17) 30%,rgba(25,37,25,.05) 65%,rgba(14,32,23,.62)),radial-gradient(ellipse at 50% 28%,rgba(29,36,27,.28),transparent 60%)}canvas{position:absolute;inset:0;z-index:3;pointer-events:none}header{position:absolute;top:32px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:10;animation:arrive 1.5s .15s both}.wordmark{font-weight:700;font-size:42px;letter-spacing:-3px;line-height:1}.wordmark span{font-size:13px;letter-spacing:0;vertical-align:top;margin-left:5px}nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;padding:6px;border:1px solid #ffffff40;border-radius:40px;background:#ffffff14;backdrop-filter:blur(22px);box-shadow:0 10px 30px #102c2317;gap:4px}nav a{font-size:14px;padding:13px 22px;white-space:nowrap;border-radius:30px;transition:background .3s}nav a.active{background:var(--cream);color:#354133}nav a:hover{background:#ffffff30}nav a.active:hover{background:white}nav a span{margin-left:14px}.motion{border:1px solid #ffffff40;background:#ffffff10;color:var(--cream);border-radius:30px;padding:13px 17px;backdrop-filter:blur(20px);font-size:13px;display:flex;gap:9px;align-items:center}.motion-icon{font-size:16px}main{position:absolute;inset:0;pointer-events:none}.hero-copy,.inner-copy{position:absolute;left:0;right:0;top:23%;text-align:center;will-change:transform,opacity;padding:0 20px;pointer-events:auto}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;animation:arrive 1.5s .35s both}.eyebrow>span{width:5px;height:5px;background:#ffe4a6;border-radius:50%;box-shadow:0 0 12px #ffdfa5}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(66px,7.5vw,118px);line-height:1.03;letter-spacing:-5px;margin:25px 0 20px;text-shadow:0 3px 30px #1b38243b;animation:arrive 1.8s .45s both}h1 em,h2 em{font-weight:500;color:#fff1c9}main p{font-size:17px;letter-spacing:.3px;margin:0 0 29px;animation:arrive 1.7s .65s both}.enter,.return{border:1px solid #fff9e999;border-radius:40px;padding:17px 22px 17px 28px;background:var(--cream);color:#334030;font-size:14px;box-shadow:0 8px 36px #28351f20;transition:background .3s,box-shadow .3s;animation:arrive 1.7s .8s both}.enter:hover,.return:hover{background:#fff;box-shadow:0 8px 40px #ffefb65a}.enter span,.return span{display:inline-block;margin-left:24px;font-size:21px;vertical-align:-1px}.inner-copy{opacity:0;pointer-events:none;top:29%;transform:translateY(40px)}h2{font-size:clamp(58px,6.3vw,98px)}footer{position:absolute;bottom:31px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end;font-size:11px;letter-spacing:1.5px;animation:arrive 1.5s 1s both}.coordinate i{font-style:normal;margin:0 9px;opacity:.5}.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;letter-spacing:.7px}.mouse{width:18px;height:28px;border:1px solid #ffffff70;border-radius:12px;position:relative}.mouse:after{content:'';position:absolute;left:7px;top:6px;width:2px;height:6px;background:white;border-radius:3px;animation:scroll 2s infinite}.depth span{margin-left:18px}.progress-track{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#ffffff15}.progress-track div{height:100%;width:100%;transform:scaleX(var(--p));transform-origin:left;background:#ffe7ad}.journey{height:280vh}.paused *{animation-play-state:paused!important}@keyframes arrive{from{opacity:0;translate:0 24px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}@keyframes scroll{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}@media(min-aspect-ratio:2/1){.hero-copy{top:20%}h1{font-size:13vh}}@media(max-width:700px){header{top:23px;left:6%;right:6%}.wordmark{font-size:33px}nav{left:auto;right:0;transform:none}nav a{font-size:12px;padding:11px 14px}.motion{position:fixed;bottom:90px;right:6%;width:38px;height:38px;padding:0;justify-content:center}.motion-label{display:none}.hero-copy{top:27%}.eyebrow{font-size:10px;letter-spacing:1.8px}h1,h2{font-size:clamp(56px,12vw,82px);letter-spacing:-2.5px;line-height:1.08;margin-top:22px}main p{font-size:15px}footer{bottom:26px;left:6%;right:6%}.coordinate{font-size:10px;max-width:100px;line-height:1.8}.coordinate i{display:none}.depth{font-size:10px;max-width:78px;text-align:right;line-height:1.8}.depth span{margin-left:0}.scroll-cue{font-size:11px;white-space:nowrap}.landscape,.foreground{background-position:50% 50%}.inner-copy{top:31%}.enter,.return{padding:14px 20px 14px 24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.river-flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* A second landscape opens through the sunlit ring, then becomes the world. */
.natural-window{position:absolute;inset:-3%;z-index:2;pointer-events:none;clip-path:circle(0px at 50% 45%);visibility:hidden;will-change:clip-path}
.natural-landscape{position:absolute;inset:0;background:url('cereal-factory.webp') center/cover;transform-origin:50% 48%;will-change:transform;filter:saturate(.95)}
.landscape{transform-origin:50% 45%}.foreground{z-index:3}.shade{z-index:4}#dust{z-index:5}
.journey{height:540vh}.inner-copy{top:25%;text-shadow:0 2px 26px #143323b0}.inner-copy p{line-height:1.6}
@media(max-width:700px){.journey{height:490vh}.inner-copy{top:28%}.inner-copy p{max-width:280px;margin-left:auto;margin-right:auto}.inner-copy .eyebrow{font-size:11px;letter-spacing:1.7px}}

/* Keep the arrival skyline open; the welcome sits beside the city. */
.inner-copy{top:auto;bottom:15%;left:5%;right:auto;text-align:left;padding:24px;max-width:560px;background:radial-gradient(ellipse at 30% 60%,#062e2480,transparent 72%);text-shadow:0 2px 18px #052820}
.inner-copy .eyebrow{justify-content:flex-start}.inner-copy h2{font-size:clamp(38px,3.8vw,58px);letter-spacing:-2px;margin:17px 0}.inner-copy p{font-size:16px;margin-bottom:22px}
@media(max-width:700px){.inner-copy{left:0;right:0;bottom:17%;top:auto;max-width:none;text-align:center;padding:16px}.inner-copy .eyebrow{justify-content:center}.inner-copy h2{font-size:38px;letter-spacing:-1px}.inner-copy p{font-size:15px;margin-bottom:16px}}

.workshop-window{position:absolute;inset:-3%;z-index:3;visibility:hidden;overflow:hidden;will-change:transform,opacity}
.workshop-landscape{position:absolute;inset:0;background:url('cereal-workshop.webp') center/cover;will-change:transform}
.chute-ride{position:absolute;inset:-10%;z-index:4;background:url('cereal-chute.webp') center/cover;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}.shade{z-index:5}#dust{z-index:6}
.workshop-copy{position:absolute;left:5%;bottom:15%;padding:24px;opacity:0;pointer-events:none;text-shadow:0 2px 18px #14232b;max-width:600px}.workshop-copy .eyebrow{justify-content:flex-start}.workshop-copy h2{font-size:clamp(38px,3.8vw,58px);letter-spacing:-2px;margin:17px 0}.workshop-copy p{font-size:16px;margin-bottom:22px}
.descend,.back-factory{border:1px solid #fff9e999;border-radius:40px;padding:17px 22px;background:var(--cream);color:#334030;font-size:14px;cursor:pointer}.descend span,.back-factory span{margin-left:12px}.inner-copy .return{display:block;margin-top:14px;padding:0;background:none;border:0;box-shadow:none;color:var(--cream);font-size:13px}.journey{height:850vh}
@media(max-width:700px){.journey{height:800vh}.workshop-copy{left:0;right:0;bottom:17%;text-align:center;padding:16px}.workshop-copy .eyebrow{justify-content:center}.workshop-copy h2{font-size:38px}.inner-copy .return{margin:14px auto 0}.descend,.back-factory{padding:14px 20px}}

.computer-window{position:absolute;inset:-3%;z-index:5;visibility:hidden;opacity:0;overflow:hidden}.computer-landscape{position:absolute;inset:0;background:url('cereal-control-room.webp') center/cover;will-change:transform}
.cable-passage{position:absolute;inset:-8%;z-index:6;background:url('cereal-cable-workshop.webp') center/cover;visibility:hidden;opacity:0;will-change:transform,opacity;transform-origin:50% 60%;pointer-events:none}.shade{z-index:7}#dust{z-index:8}
.computer-copy{position:absolute;left:5%;bottom:15%;padding:24px;opacity:0;pointer-events:none;text-shadow:0 2px 24px #050e32}.computer-copy .eyebrow{justify-content:flex-start}.computer-copy h2{font-size:clamp(38px,3.8vw,58px);letter-spacing:-2px;margin:17px 0 24px}
.enter-computer,.back-workshop{border:1px solid #fff9e999;border-radius:40px;padding:17px 22px;background:var(--cream);color:#334030;font-size:14px;cursor:pointer}.enter-computer span,.back-workshop span{margin-left:12px}.workshop-copy .back-factory{display:block;margin-top:14px;padding:0;background:none;border:0;color:var(--cream);font-size:13px}.journey{height:1150vh}
@media(max-width:700px){.journey{height:1100vh}.computer-copy{left:0;right:0;bottom:17%;text-align:center;padding:16px}.computer-copy .eyebrow{justify-content:center}.computer-copy h2{font-size:38px}.workshop-copy .back-factory{margin:14px auto 0}.enter-computer,.back-workshop{padding:14px 20px}}
.computer-copy{bottom:12%;max-width:430px}.computer-copy h2{font-size:clamp(34px,3.1vw,48px)}.read-record{display:inline-block;border:1px solid #b8ffd4;border-radius:40px;padding:15px 22px;color:#0f2f23;background:#d9ffe5;font-size:14px}.read-record span{margin-left:12px}.computer-copy .back-workshop{display:block;margin-top:14px;padding:0;background:none;border:0;color:var(--cream);font-size:13px}.cable-passage{transform-origin:50% 52%}.terminal-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.computer-copy{left:0;right:0;bottom:15%;max-width:none}.computer-copy h2{font-size:32px;margin-bottom:16px}.computer-copy .back-workshop{margin:14px auto 0}}
/* Final access screen shares the terminal's existing artwork. */
.access-screen{position:absolute;top:17%;left:50%;transform:translateX(-50%);width:min(410px,calc(100% - 48px));max-height:65vh;overflow:auto;padding:14px 20px 18px;background:#07170eef;color:#b0ffce;font-family:monospace;border-radius:14px;box-shadow:0 0 32px #1df67a12;opacity:0;pointer-events:none;text-shadow:0 0 5px #40ff8055;scrollbar-width:thin;scrollbar-color:#285b39 #07170e}
.access-heading{font-size:14px;letter-spacing:2px;text-align:center}.access-screen h2{font:600 21px/1.25 monospace;letter-spacing:1px;margin:10px 0 18px;text-align:center;animation:none;text-shadow:inherit}.access-screen label{display:block;font:14px/1.4 monospace;margin:12px 0 5px}.access-screen input{width:100%;min-height:43px;border:1px solid #589b6d;border-radius:3px;background:#0c2317;color:#d5ffe4;font:16px/1.4 monospace;padding:9px 12px;outline-offset:3px}.access-screen input:focus-visible{outline:2px solid #adffd0}.access-screen .formkit-submit{width:100%;margin-top:18px;min-height:44px;border:1px solid #95f9b8;border-radius:3px;background:#a6f9c0;color:#0b2815;font:700 15px monospace;padding:12px}.access-screen .formkit-submit:disabled{opacity:.6;cursor:wait}.access-screen .access-consent{font:12px/1.5 monospace;margin:12px 0 0;animation:none;color:#a5c7b0;text-align:center;letter-spacing:0}.kit-credit{display:block;text-align:center;font:12px monospace;color:#8cba9d;margin:10px 0}.back-terminal{display:block;margin:12px auto 0;background:none;border:0;color:#a6e8bc;font:13px monospace;padding:5px}.access-screen .formkit-alert:empty{display:none}.access-screen .formkit-alert{padding:12px;margin:12px 0;font:14px/1.5 monospace;list-style:none}.access-screen .formkit-alert-error{color:#ffd6ad;border:1px solid #b97649}.access-screen .formkit-alert-success{color:#c6ffdb;border:1px solid #70b38a;padding:24px 15px}.request-access{display:inline-block;border:1px solid #b8ffd4;border-radius:40px;padding:15px 22px;background:#d9ffe5;color:#0f2f23;font-size:14px;margin:0 10px 10px 0}.computer-copy .read-record{background:none;color:#d9ffe5;padding:12px 18px}.access-mode #dust{opacity:.2}.journey{height:1320vh}
@media(max-width:700px){.journey{height:1250vh}.access-screen{top:16%;padding:12px 16px;max-height:68dvh}.access-screen h2{font-size:19px;margin-bottom:12px}.request-access{margin-right:0}.computer-copy .read-record{display:block;max-width:190px;margin:0 auto}}
@media(max-height:650px){.access-screen{top:15%;max-height:70dvh}.access-screen label{margin-top:7px}.access-screen .access-consent{margin-top:7px}}

/* Keep scene artwork from intercepting terminal links and form controls. */
main{z-index:9}.shade,.workshop-window,.computer-window{pointer-events:none}footer{pointer-events:none}

/* JavaScript owns scene travel; native smooth scrolling must not restart each frame. */
html{scroll-behavior:auto}
.access-screen{transform-origin:0 0}
.access-screen.compact{padding:8px 14px 10px}.access-screen.compact h2{font-size:17px;margin:6px 0 8px}.access-screen.compact .access-heading{font-size:12px}.access-screen.compact label{margin:7px 0 3px;font-size:13px}.access-screen.compact input{min-height:38px;padding:6px 10px}.access-screen.compact .formkit-submit{margin-top:10px;min-height:38px;padding:8px}.access-screen.compact .access-consent{margin-top:6px;font-size:11px}