/* MEMELIFE CINEMATIC — resilient chapter-based layout, October 2026 */
:root{--night:#090b1c;--ink:#130e29;--paper:#f7f3ff;--muted:#c9bedb;--lime:#d8ff63;--cyan:#59e7fa;--pink:#ff79b8;--violet:#b693ff;--glass:rgba(10,12,31,.72)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--night);color:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
button,a{font:inherit}a{color:inherit;text-decoration:none}img{max-width:100%}
::selection{background:#cf8cff;color:#100922}
.top{position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:19px clamp(20px,5vw,80px);background:linear-gradient(180deg,rgba(5,7,21,.92),rgba(5,7,21,0));pointer-events:none}
.top>*{pointer-events:auto}.top .logo{font-size:clamp(20px,2vw,28px);font-weight:950;line-height:1;letter-spacing:-.075em;text-shadow:0 2px 20px #0009}.logo span{color:var(--lime)}
.top nav{display:flex;align-items:center;gap:clamp(12px,2.3vw,35px);font:750 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.top nav a{padding:8px 0;color:#f8f4ff}.top a:hover,.top a:focus-visible,footer a:hover{color:var(--lime)}
.timeline{height:auto!important;position:relative;background:#090b1c}
.viewport{height:auto!important;min-height:0!important;position:relative!important;top:auto!important;display:block;overflow:visible!important;isolation:isolate;background:#080b1b}
/* Each chapter is a real block: no 1500vh blank scroll strip, and meaningful content without JS. */
.viewport>.scene{position:relative!important;display:grid;align-items:center;min-height:100svh;height:auto;isolation:isolate;overflow:hidden;background:#101126;opacity:1!important;visibility:visible!important;pointer-events:auto!important;will-change:auto!important}
.viewport>.scene:nth-of-type(even){background:#10132b}
.viewport>.scene::after{content:"";pointer-events:none;position:absolute;z-index:2;inset:auto 0 0;height:22%;background:linear-gradient(0deg,#0a0c1d,transparent)}
.scene .layers,.scene .claude-layers{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden}
.scene .layer,.scene .claude-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;pointer-events:none;user-select:none;transform:translate3d(0,0,0);will-change:transform;transition:transform .25s linear}
.scene .shade{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,22,.87),rgba(5,8,22,.42) 36%,rgba(5,8,22,.08) 75%),linear-gradient(0deg,rgba(5,8,22,.42),transparent 34%)}
.scene .caption,.scene .claude-caption{position:relative!important;left:auto!important;right:auto!important;top:auto!important;z-index:9;max-width:560px;width:min(560px,90%);padding:36px clamp(20px,5.5vw,95px);background:transparent!important;text-shadow:0 4px 28px rgba(0,0,0,.88)}
.scene .caption.right{margin-left:auto;text-align:right;padding-right:clamp(25px,6vw,95px)}
.scene h2{margin:16px 0 18px;font-size:clamp(45px,6.2vw,100px);font-weight:950;line-height:.97;letter-spacing:-.065em;text-wrap:balance}
.scene h2 em,.pager-title em,.ending em,.after h2 em{font-style:normal;color:var(--lime)}
.scene .caption p,.scene .claude-caption p{color:#f2edf9;font-size:clamp(15px,1.35vw,20px);line-height:1.5;max-width:420px;margin:12px 0}
.eyebrow,.claude-era{font:850 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.19em;color:var(--lime);text-transform:uppercase}
/* Scroll reveal is supplementary; every scene stays readable when JS is blocked. */
.scene .caption,.scene .claude-caption,.scene .ending{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .75s;filter:none}
.scene.is-current .caption,.scene.is-current .claude-caption,.scene.is-current .ending{transform:translate3d(0,-6px,0)}
/* The pager is a 3D object, not a separate image. */
.pager-scene{background:radial-gradient(ellipse at 60% 40%,#38204e 0%,#18142f 40%,#080b1d 100%)!important;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);padding:110px clamp(20px,7vw,120px) 75px}
.pager-scene .stars{position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:radial-gradient(#a7c8ff88 1px,transparent 1px),radial-gradient(#ff74b988 1px,transparent 1px);background-size:99px 111px,165px 187px;background-position:12px 25px,64px 36px}
.page-machine{position:relative;z-index:5;width:min(100%,440px);min-height:310px;justify-self:center;padding:26px;border-radius:34px 34px 55px 55px;background:linear-gradient(150deg,#686479,#26293c 37%,#181c2e 75%,#575361);border:2px solid #a6a8b1;box-shadow:0 38px 90px #03030dba,inset 2px 6px 15px #ffffff32,inset -5px -6px 20px #0007;transform:rotate(-9deg);animation:pagerHover 7s ease-in-out infinite alternate}
.page-machine .brand{display:flex;align-items:center;justify-content:space-between;color:#f6f6fb;font:900 12px/1 monospace;letter-spacing:.12em;margin-bottom:20px}
.page-machine .brand span{font-size:10px;color:#b4afbf}
.page-machine .lcd{background:linear-gradient(140deg,#c5e8af,#94bba2);border:9px solid #202535;border-radius:15px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;padding:17px 16px;color:#142923;box-shadow:inset 0 0 23px #132f1d62,0 0 23px #ccff8e26;font-family:ui-monospace,Consolas,monospace}
.lcd small{font-size:10px;font-weight:700;letter-spacing:.06em}.lcd strong{display:block;font-size:clamp(18px,2.1vw,26px);line-height:1.35;letter-spacing:.035em;overflow-wrap:anywhere}
.page-machine .keys{text-align:center;padding-top:15px;color:#0b0e18;letter-spacing:1.5em;font-size:22px}
.pager-title{position:relative;z-index:6;max-width:650px;justify-self:start;text-shadow:0 7px 40px #0009}
.pager-title h1{font-size:clamp(61px,8vw,132px);font-weight:1000;line-height:.9;letter-spacing:-.085em;margin:22px 0 24px}
.pager-title p:not(.eyebrow){font-size:clamp(16px,1.7vw,24px);color:#e5dbf5;max-width:410px}
.scroll-note{display:inline-block;margin-top:30px;border:1px solid #c2bbde6b;border-radius:40px;padding:10px 18px;font:800 11px monospace;letter-spacing:2px;color:var(--lime)}
@keyframes pagerHover{from{transform:translateY(-5px) rotate(-10deg)}to{transform:translateY(12px) rotate(-6deg)}}
/* Childhood computer / original layered shots. */
.bedroom .monitor-copy{position:absolute;bottom:13%;left:clamp(20px,6vw,110px);z-index:5;font:700 12px monospace;color:#c3ffb5;text-shadow:0 0 15px #29ff56}
/* Classic chat windows, real animated layout rather than empty intermediary. */
.chat{background:radial-gradient(ellipse at 65% 44%,#2b2355,#100e2a 66%,#090b1f)!important}
.chat-windows{position:absolute;z-index:1;inset:10% 5% 7% 25%;perspective:1100px}
.window{position:absolute;width:clamp(235px,30vw,410px);background:#f3f2f7;color:#151429;border:3px solid #afb3d4;box-shadow:0 25px 65px #000a,0 0 50px #bb7cf02c;border-radius:7px;overflow:hidden;transform:rotate(5deg)}
.window.one{right:24%;top:16%;transform:rotate(-11deg)}.window.two{right:1%;top:34%;transform:rotate(8deg)}.window.three{right:19%;bottom:7%;transform:rotate(-3deg)}
.winbar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#3e207a,#3155ac);color:#fff;padding:7px 12px;font:700 12px monospace}.wincontent{padding:20px;min-height:110px;font:14px/1.5 ui-monospace,monospace}.wincontent p{margin:9px 0}.emote,.envelope{font-size:40px;margin:10px 0}.file-progress{background:linear-gradient(90deg,#8fd565 100%,#eee 0);height:12px;border:2px solid #aaa;margin:12px 0}
/* Viral and feed chapters. */
.virals .caption{margin-left:auto;text-align:right}.feed{background:radial-gradient(circle at 54% 50%,#42317f,#120b33 64%,#090a19)!important}
.feed-back{position:absolute;inset:0;background-image:radial-gradient(#ffffff1e 1px,transparent 1px);background-size:34px 34px}
.feedphone{position:absolute;z-index:4;right:13%;top:13%;width:min(30vw,310px);height:min(75vh,680px);border:10px solid #171827;background:#100e1c;border-radius:39px;box-shadow:0 40px 90px #000b,0 0 50px #b493ff5c;overflow:hidden;transform:rotate(6deg)}
.feedphone>img{width:100%;height:80%;object-fit:cover}.reelbar{position:absolute;top:13px;left:0;right:0;text-align:center;font:800 11px monospace;letter-spacing:.1em;text-shadow:0 2px 6px #000}.reelcaption{position:absolute;bottom:15px;left:18px;right:18px;font-weight:850;font-size:15px}.reelcaption small{display:block;font-size:11px;color:#e4dff9}
.floatmemes img{position:absolute;z-index:3;width:clamp(110px,14vw,200px);border:6px solid #f2e6ff;border-radius:10px;box-shadow:0 20px 70px #000a}.floatmemes img:first-child{right:1%;top:10%;transform:rotate(14deg)}.floatmemes img:nth-child(2){right:31%;bottom:7%;transform:rotate(-11deg)}
/* Age 100 finale. */
.future .ending{position:relative;z-index:10;max-width:650px;margin-left:auto;margin-right:6%;padding:30px;text-align:right;text-shadow:0 5px 35px #000d}
.ending h2{font-size:clamp(62px,7vw,118px);line-height:.95;letter-spacing:-.07em;margin:20px 0}.ending p{font-size:clamp(17px,2vw,26px);color:#f0eaff}.ending a{display:inline-block;background:var(--lime);color:#101222;padding:13px 22px;border-radius:99px;margin-top:12px;font:900 12px monospace;letter-spacing:.08em;transition:transform .2s}.ending a:hover{transform:translateY(-3px)}.future-note{position:absolute;z-index:5;left:5%;bottom:10%;font:800 11px monospace;letter-spacing:.16em;color:#d2c4ff}
/* Persistent film position indicator. */
.progress{position:fixed;z-index:90;left:50%;bottom:13px;width:min(440px,calc(100vw - 32px));transform:translateX(-50%);padding:11px 16px 10px;border:1px solid #ffffff28;border-radius:18px;background:rgba(12,15,35,.79);backdrop-filter:blur(18px);box-shadow:0 8px 36px #0009;pointer-events:none}
.progress-years{display:flex;justify-content:space-between;gap:10px;font:700 10px ui-monospace,Consolas,monospace;color:#d6cdea}.track{height:4px;overflow:hidden;margin:8px 0;background:#ffffff2a;border-radius:10px}.track #fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--lime));border-radius:10px;transition:width .15s}.progress #phase{font:700 9px ui-monospace,Consolas,monospace;color:#d9d0e9;letter-spacing:.12em;display:block;text-align:center}
/* Sceneboard loaded from Claude. Additional chapter positioning overrides. */
.claude-scene{background:#0b0d23!important}.claude-scene .claude-layers{z-index:0}.claude-scene .claude-tint{position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,#050819ca,transparent 75%)}
.claude-scene .claude-caption{z-index:9;width:min(600px,94%)}.claude-scene .claude-caption h2{font-size:clamp(44px,5.3vw,82px);line-height:1.0;letter-spacing:-.05em;color:var(--paper)}
.claude-scene .claude-era{display:inline-flex;align-items:center;border:1px solid #88edff66;border-radius:100px;background:#09122799;color:#96f2ff;padding:8px 15px;letter-spacing:.15em}
.claude-scene[data-claude-id="scene_upgrade"] .claude-caption,.claude-scene[data-claude-id="scene_thread"] .claude-caption{margin-left:auto;text-align:right}
.claude-scene[data-claude-id="scene_upgrade"] .claude-tint,.claude-scene[data-claude-id="scene_thread"] .claude-tint{background:linear-gradient(270deg,#050819d9,transparent 80%)}
.claude-scene[data-claude-id="scene_birthdays"] .claude-era{color:#ffe199;border-color:#ffe19977}
.claude-scene[data-claude-id="scene_museum"] .claude-era{color:#c3ff8b;border-color:#c3ff8b77}
/* After the cinematic journey. */
.after{position:relative;z-index:5;min-height:100svh;background:radial-gradient(circle at 50% -10%,#31214b,#0e1027 44%,#090b1b 100%);padding:clamp(100px,12vw,180px) clamp(20px,7vw,110px) 110px;text-align:center}
.after h2{font-size:clamp(42px,6.7vw,105px);line-height:.99;letter-spacing:-.075em;margin:25px auto;max-width:1000px}.after .intro{max-width:710px;margin:30px auto 55px;font-size:clamp(16px,1.8vw,22px);color:#ded7f0;line-height:1.6}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;max-width:1080px;margin:auto}.features article{text-align:left;padding:clamp(24px,3vw,39px);border-radius:25px;border:1px solid #ffffff25;background:linear-gradient(145deg,#ffffff0d,#ffffff04);box-shadow:inset 0 1px #ffffff15}.features article>span{font-size:40px}.features h3{font-size:23px;margin:13px 0}.features p{font-size:15px;color:#cec5e2;line-height:1.6}.coming{max-width:760px;margin:80px auto 0;padding:40px 25px;border:1px solid #d9ff7740;border-radius:25px;background:#d8ff630c}.coming h3{font-size:clamp(25px,3.6vw,42px);margin:13px 0}.coming p{color:#d9d3e9}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px clamp(20px,7vw,110px) 90px;background:#080a19;color:#d4cbe5;font:700 11px/1.5 ui-monospace,monospace;letter-spacing:.07em}footer>div{display:flex;gap:24px;flex-wrap:wrap}
/* Reasonable sizing for tablets and small phones. */
@media(max-width:900px){.scene .caption,.scene .claude-caption{max-width:500px;padding:24px 5vw}.scene h2{font-size:clamp(45px,7vw,76px)}.chat-windows{inset:27% 0% 10% 34%}.window{width:clamp(210px,42vw,340px)}.feedphone{right:5%;width:32vw}}
@media(max-width:680px){.top{padding:16px 20px}.top nav{gap:15px;font-size:10px}.viewport>.scene{min-height:100svh;align-items:start;grid-template-columns:1fr!important}.pager-scene{grid-template-columns:1fr!important;justify-items:center;align-content:center;padding:105px 20px 80px;gap:28px}.page-machine{width:min(75%,305px);min-height:0;padding:18px;border-radius:26px}.page-machine .lcd{min-height:145px;padding:12px;border-width:6px}.page-machine .keys{font-size:14px}.pager-title{justify-self:center;text-align:center}.pager-title h1{font-size:clamp(52px,13vw,75px)}.pager-title p:not(.eyebrow){font-size:15px}.scroll-note{margin-top:8px}.scene:not(.pager-scene) .caption,.scene:not(.pager-scene) .claude-caption{position:relative!important;margin:0!important;top:auto!important;left:auto!important;right:auto!important;align-self:start;padding:110px 23px 35px!important;width:100%;max-width:100%!important;text-align:left!important;background:linear-gradient(180deg,#080a20cd,transparent)!important}.scene .caption h2,.scene .claude-caption h2{font-size:clamp(40px,11vw,65px)!important;max-width:430px;margin:10px 0 14px}.scene .caption p,.scene .claude-caption p{max-width:300px;font-size:15px;margin:8px 0}.scene .shade,.claude-scene .claude-tint{background:linear-gradient(180deg,#030718cf,transparent 78%)!important}.scene .layers,.scene .claude-layers{height:100%;width:100%}.layer{object-position:center}.bedroom .monitor-copy{bottom:10%;font-size:9px;left:20px}.chat-windows{inset:35% 0 15% 12%;opacity:.9}.window{width:65vw}.window.one{top:12%;right:23%}.window.two{right:0;top:35%}.window.three{right:12%;bottom:4%}.wincontent{font-size:11px;padding:10px;min-height:60px}.emote,.envelope{font-size:24px}.feedphone{top:38%;right:12%;height:53svh;width:54vw;border-width:7px;border-radius:30px}.floatmemes img{width:27vw}.floatmemes img:first-child{top:43%;right:-6%}.floatmemes img:nth-child(2){bottom:12%;right:58%}.future .ending{padding:110px 23px 35px!important;margin:0!important;text-align:left}.future .ending h2{font-size:clamp(50px,12vw,70px)}.future-note{font-size:9px;bottom:14%}.progress{bottom:8px;padding:8px 12px}.progress-years{font-size:8px}.features{grid-template-columns:1fr}.after{padding:100px 22px 80px}.after .intro{font-size:16px}.features article{padding:25px}.coming{margin-top:50px}footer{padding:25px 22px 75px;display:block;font-size:10px}footer>div{margin-top:15px;gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene .layer,.scene .claude-layer{transform:none!important}}