*{box-sizing:border-box}
:root{--ink:#1d1d1f;--muted:#86868b;--soft:#f5f5f7;--blue:#0071e3}
html{background:#fff}
body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;overflow-x:hidden}
body::-webkit-scrollbar{width:8px}body::-webkit-scrollbar-thumb{background:#c7c7cc;border-radius:10px}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;background:transparent}.progress i{display:block;height:100%;width:0;background:#1d1d1f}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:90;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.stage{position:relative;min-height:100svh;overflow:hidden}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:650;color:var(--muted);margin:0 0 24px}

/* HERO */
.hero-stage{height:160svh;min-height:100svh;background:#fff}
.hero-stage>*{position:sticky;top:0;height:100svh}
.hero-bg{display:flex;align-items:flex-end;justify-content:center;font-size:min(47vw,720px);line-height:.7;font-weight:750;letter-spacing:-.11em;color:#f5f5f7;transform:scale(1);will-change:transform}
.hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:-100svh;z-index:2;will-change:transform,opacity}
.hero-center h1{margin:0;font-size:clamp(60px,12vw,180px);line-height:.86;letter-spacing:-.08em}.hero-center h1 em{font-style:normal;color:#86868b}
.hero-center .sub{font-size:clamp(17px,2vw,24px);color:var(--muted);margin:30px 0 0}
.scroll-hint{margin-top:-100svh;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;font-size:10px;letter-spacing:.16em;color:#86868b;z-index:3}.scroll-hint span{margin-left:7px}

/* MERGE */
.merge-stage{height:170svh;background:#000;color:#fff}
.merge-stage>*{position:sticky;top:0;height:100svh}
.merge-copy{position:absolute;top:0;width:50%;display:flex;align-items:center;font-size:clamp(62px,13vw,210px);line-height:.82;font-weight:720;letter-spacing:-.09em;will-change:transform}
.merge-copy.left{left:0;justify-content:flex-end;text-align:right;padding-right:3vw;transform:translateX(-18vw)}
.merge-copy.right{right:0;justify-content:flex-start;padding-left:3vw;color:#8e8e93;transform:translateX(18vw)}
.merge-core{
    display:grid;
    place-items:center;
    font-size:clamp(100px,22vw,340px);
    color:#fff;
    opacity:0;
    transform:scale(.4);
    will-change:transform,opacity;
}

.merge-title{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:clamp(70px,14vw,210px);
    font-weight:720;
    letter-spacing:-.09em;
    opacity:0;
    transform:scale(.8);
    pointer-events:none;
    white-space:nowrap;
    will-change:transform,opacity;
}
}/* PHOTO */
.photo-stage{height:180svh;background:#fff}
.photo-frame{position:sticky;top:14svh;margin:0 auto;width:24vw;height:72svh;min-width:220px;min-height:420px;max-width:680px;max-height:760px;overflow:hidden;background:#e8e8ed;will-change:width,height,top}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.18em;color:#86868b;pointer-events:none}
.photo-caption{position:absolute;left:8vw;bottom:12svh;z-index:3;opacity:0;transform:translateY(40px);will-change:opacity,transform}.photo-caption span{font-size:11px;letter-spacing:.16em;color:#86868b}.photo-caption h2{font-size:clamp(44px,7vw,100px);letter-spacing:-.07em;line-height:.9;margin:20px 0 0}

/* STORY */
.story-stage{height:210svh;background:#f5f5f7}
.story-big{position:sticky;top:0;height:100svh;display:grid;place-items:center;font-size:min(58vw,850px);font-weight:750;letter-spacing:-.15em;color:#e7e7ec;will-change:transform}
.story-card{position:absolute;width:24vw;max-width:360px;aspect-ratio:4/5;background:#ddd;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.08);will-change:transform,opacity}
.story-card img{width:100%;height:100%;object-fit:cover;display:block}.story-card span{position:absolute;left:16px;top:14px;z-index:2;font-size:10px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.card-a{left:8vw;top:25svh;transform:translate(-15vw,20svh) rotate(-9deg);opacity:0}.card-b{right:9vw;top:13svh;transform:translate(18vw,28svh) rotate(10deg);opacity:0}.card-c{left:38vw;top:43svh;transform:translateY(20svh) rotate(-4deg);opacity:0}
.story-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:min(90vw,920px);text-align:center;opacity:0;will-change:opacity,transform}.story-copy h2{font-size:clamp(42px,7vw,110px);line-height:.92;letter-spacing:-.075em;margin:0}

/* FILM */
.film-stage{height:150svh;background:#000;color:#fff}
.film-glow{position:sticky;top:0;height:100svh;background:radial-gradient(circle at 50% 50%,#252525 0, #000 52%);transform:scale(.7);opacity:.2;will-change:transform,opacity}
.film-copy{position:absolute;left:8vw;top:22svh;z-index:2}.film-copy h2{font-size:clamp(48px,8vw,115px);letter-spacing:-.075em;line-height:.9;margin:0}
.film-window{position:absolute;left:50%;top:52svh;transform:translate(-50%,-50%) scale(.55);width:min(78vw,980px);aspect-ratio:16/9;background:#111;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.45);will-change:transform}.film-window video{width:100%;height:100%;object-fit:cover;display:block}.film-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.18em;color:#666;pointer-events:none}

/* DAY */
.day-stage{height:240svh;background:#fff;text-align:center}
.day-label{position:absolute;top:12svh;left:50%;transform:translateX(-50%);opacity:0}
.day-word,.day-number,.day-year,.day-time,.day-note{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;pointer-events:none}
.day-word span{font-size:clamp(55px,13vw,190px);font-weight:720;letter-spacing:-.08em;transform:translateY(35px);opacity:0}
.day-number{margin-top:-100svh}.day-number span{font-size:clamp(130px,33vw,520px);line-height:.7;font-weight:760;letter-spacing:-.12em;color:#86868b;transform:scale(.5);opacity:0}
.day-year{margin-top:-100svh;font-size:clamp(40px,8vw,110px);letter-spacing:-.06em;transform:scale(1.5);opacity:0}
.day-time{margin-top:-100svh;font-size:clamp(100px,24vw,360px);font-weight:750;letter-spacing:-.1em;opacity:0;transform:scale(.6)}.day-time b{font-weight:350;color:#86868b;padding:0 .06em}
.day-note{margin-top:-100svh;align-items:flex-end;padding-bottom:14svh;font-size:18px;color:#86868b;opacity:0}

/* PLACE */
.place-stage{height:160svh;background:#f5f5f7}
.place-orbit{position:sticky;top:0;height:100svh;background:radial-gradient(ellipse at center,transparent 0 28%,rgba(29,29,31,.04) 28.1% 28.5%,transparent 28.6% 48%,rgba(29,29,31,.035) 48.1% 48.4%,transparent 48.5%);transform:scale(.5) rotate(-20deg);opacity:0;will-change:transform,opacity}
.place-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:translateY(60px);opacity:0;will-change:transform,opacity}.place-copy h2{font-size:clamp(50px,8.5vw,125px);line-height:.88;letter-spacing:-.08em;margin:0;}.place-copy>p:not(.eyebrow){color:#86868b;font-size:17px;margin:34px 20px}.place-copy a{background:#0071e3;color:#fff;border-radius:999px;padding:14px 20px;font-size:12px;letter-spacing:.05em;text-decoration:none}.place-copy a span{padding-left:8px}

/* FINAL */
.final-stage{height:120svh;background:#fff;display:grid;place-items:center;text-align:center}.final-date{position:absolute;font-size:min(42vw,600px);line-height:.7;font-weight:760;letter-spacing:-.12em;color:#f5f5f7;transform:scale(.8)}.final-copy{position:relative;z-index:2;opacity:0;transform:translateY(40px)}.final-copy h2{font-size:clamp(62px,12vw,180px);line-height:.86;letter-spacing:-.085em;margin:0}.final-copy>p:last-child{font-size:20px;color:#86868b;margin-top:36px}

@media(max-width:760px){
.hero-stage{height:145svh}.hero-center h1{font-size:17vw}.hero-bg{font-size:50vw;bottom:-2svh}.merge-stage{height:150svh}.merge-copy{font-size:20vw}.photo-stage{height:165svh}.photo-frame{width:62vw;height:62svh;top:18svh}.photo-caption{left:7vw;bottom:9svh}.story-stage{height:180svh}.story-card{width:42vw}.card-a{left:4vw}.card-b{right:4vw}.card-c{left:29vw;top:48svh}.story-copy{width:94vw}.film-stage{height:135svh}.film-copy{left:7vw;top:15svh}.film-window{width:90vw;top:55svh}.day-stage{height:220svh}.place-stage{height:140svh}.place-copy h2{font-size:11vw}.final-copy h2{font-size:17vw}
}