:root {
  --forest:#071b15;
  --forest-soft:#173b30;
  --cream:#f5efe3;
  --sage:#dce6b5;
  --leaf:#c8d982;
  --rose:#cf315f;
  --rose-soft:#dc688b;
  --ink:var(--forest);
  --lime:var(--leaf);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#06100d; }
body { color:var(--cream); font-family:"Be Vietnam Pro",sans-serif; overflow:hidden; }
button { color:inherit; font:inherit; }
.portrait-stage { position:relative; width:100vw; height:100svh; margin:auto; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; scrollbar-width:none; background:var(--ink); container-type:inline-size; }
.portrait-stage.is-scroll-locked { overflow:hidden; touch-action:none; overscroll-behavior:none; }
.portrait-stage::-webkit-scrollbar { display:none; }
.site-loader { --load-progress:0%; position:fixed; z-index:9999; inset:0; display:grid; place-content:center; justify-items:center; gap:11px; color:var(--cream); background:var(--ink); opacity:1; transition:opacity .6s cubic-bezier(.22,1,.36,1),visibility .6s; }
.site-loader p { margin:0; font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.site-loader-track { position:relative; width:min(58vw,250px); height:1px; overflow:hidden; background:rgba(245,239,227,.18); }
.site-loader-track i { display:block; width:var(--load-progress); height:100%; background:var(--rose-soft); transition:width .25s ease; }
.site-loader.is-complete { visibility:hidden; opacity:0; pointer-events:none; }
.scroll-cue { position:fixed; z-index:40; left:50%; bottom:max(18px,calc(12px + env(safe-area-inset-bottom))); display:grid; justify-items:center; gap:7px; min-width:92px; padding:8px 12px; border:0; color:var(--cream); background:transparent; font-size:8px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:0; visibility:hidden; transform:translate(-50%,10px); transition:opacity .45s ease,transform .45s ease,visibility .45s; cursor:pointer; }
.scroll-cue.is-visible { opacity:.82; visibility:visible; transform:translate(-50%,0); }
.scroll-cue.is-visible.is-ending { opacity:0; visibility:hidden; transform:translate(-50%,8px); pointer-events:none; }
.scroll-cue span { grid-area:1 / 1; transition:opacity .25s ease,transform .25s ease; }
.scroll-cue i { display:block; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); animation:scrollCueBounce 1.25s ease-in-out infinite; transition:transform .3s ease; }
@keyframes scrollCueBounce { 0%,100% { translate:0 -2px; } 50% { translate:0 3px; } }
.scene { position:relative; width:100%; height:100svh; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; }
.scene h1,.scene h2 { font-family:"DM Serif Display",serif; font-weight:400; letter-spacing:-.04em; margin:0; line-height:.91; }
.scene em { color:var(--lime); font-weight:400; }
.eyebrow,.chapter-no { display:block; font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.grain { position:absolute; inset:0; z-index:7; opacity:.18; pointer-events:none; 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='.35'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }

.scene--intro { background:#071b15; }
.photo-mask { position:absolute; inset:0; clip-path:inset(50% 50% 50% 50%); will-change:clip-path; }
.intro-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 47%; transform:scale(1.18); filter:saturate(.94); will-change:transform,object-position; }
.scene--intro::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(3,17,12,.1) 35%,rgba(3,17,12,.86) 100%); pointer-events:none; }
.curtain { position:absolute; z-index:5; left:0; width:100%; height:51%; background:var(--ink); }
.curtain--top { top:0; transform-origin:top; }
.curtain--bottom { bottom:0; transform-origin:bottom; }
.reveal-frame { position:absolute; z-index:6; left:50%; top:50%; width:24%; aspect-ratio:3/4; border:1px solid rgba(255,255,255,.85); transform:translate(-50%,-50%); }
.light-sweep { position:absolute; z-index:6; top:-20%; bottom:-20%; left:-65%; width:35%; opacity:0; transform:skewX(-14deg); background:linear-gradient(90deg,transparent,rgba(255,255,225,.22),transparent); mix-blend-mode:screen; pointer-events:none; }
.intro-card { position:absolute; z-index:8; left:50%; bottom:var(--intro-card-bottom,35.5%); width:var(--intro-card-width,min(78%,43.5svh)); height:var(--intro-card-height,auto); aspect-ratio:3 / 2; overflow:hidden; border:1px solid rgba(245,239,227,.8); background:rgba(7,27,21,.58); box-shadow:0 22px 60px rgba(0,0,0,.24); backdrop-filter:blur(8px); opacity:0; transform:translateX(-50%); transform-origin:center bottom; will-change:width,height,bottom,opacity; container-type:inline-size; }
.intro-card::before { content:""; position:absolute; inset:8px; border:1px solid rgba(245,239,227,.18); pointer-events:none; }
.intro-copy { position:absolute; z-index:9; left:50%; top:50%; width:min(78%,43.5svh); aspect-ratio:3 / 2; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:9%; opacity:0; transform:translate(-50%,calc(-50% + 28px)); pointer-events:none; container-type:inline-size; }
.intro-copy .eyebrow { margin-bottom:5cqw; font-size:3.1cqw; opacity:1; letter-spacing:.26em; transform:none; }
.intro-copy h1 { font-family:"Noto Serif",serif; font-size:11.5cqw; white-space:nowrap; }
.title-line { display:block; overflow:hidden; opacity:1; transform:none; }
.scene--intro.intro-ready .photo-mask { animation:maskReveal 2.4s cubic-bezier(.76,0,.24,1) forwards; }
.scene--intro.intro-ready .intro-photo { animation:imageMotion 2.4s cubic-bezier(.76,0,.24,1) forwards; }
.scene--intro.intro-ready .intro-card { animation:introCardIn .85s 2.75s cubic-bezier(.22,1,.36,1) forwards; }
.scene--intro .intro-copy.typing-visible { opacity:1; transform:translate(-50%,-50%); }
.type-target.is-typing::after,.type-target.is-erasing-cursor::after { content:""; display:inline-block; width:2px; height:.82em; margin-left:.08em; background:currentColor; vertical-align:.03em; animation:caretBlink .7s steps(1,end) infinite; }

.scene--chapter { background:#d8e4a6; color:var(--ink); }
.slice { position:absolute; background-image:url("cover.jpg"); background-size:cover; background-position:center; box-shadow:0 18px 50px rgba(5,24,18,.2); opacity:0; transition:1s cubic-bezier(.2,.8,.2,1); }
.slice--a { width:66%; height:52%; left:7%; top:8%; background-position:50% 70%; transform:translateX(-35%) rotate(-4deg); }
.slice--b { width:50%; height:38%; right:5%; top:27%; background-position:50% 35%; transform:translateX(35%) rotate(5deg); }
.slice--c { width:32%; height:26%; left:14%; bottom:7%; background-position:25% 79%; transform:translateY(35%) rotate(3deg); }
.scene--chapter.is-active .slice { opacity:1; transform:translate(0) rotate(0); }
.scene--chapter.is-active .slice--b { transition-delay:.16s; }
.scene--chapter.is-active .slice--c { transition-delay:.32s; }
.chapter-card { position:absolute; z-index:3; right:6%; bottom:10%; width:64%; padding:27px 22px; background:rgba(247,242,229,.92); backdrop-filter:blur(8px); transform:translateY(35px); opacity:0; transition:.8s .45s ease; }
.scene--chapter.is-active .chapter-card { transform:none; opacity:1; }
.chapter-card p { margin:15px 0 5px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.chapter-card h2 { font-size:clamp(40px,11.5vw,62px); }
.chapter-card em { color:var(--rose); }
.vertical-note { position:absolute; right:3%; top:8%; writing-mode:vertical-rl; font-size:8px; letter-spacing:.3em; }

.scene--focus { background:#921d43; }
.focus-photo { position:absolute; inset:7% 8% 30%; background:url("cover.jpg") center 53%/cover; clip-path:inset(50% 50% 50% 50% round 50%); transition:1.25s cubic-bezier(.7,0,.2,1); }
.scene--focus.is-active .focus-photo { clip-path:inset(0 0 0 0 round 48% 48% 7% 7%); }
.focus-orbit { position:absolute; width:82vw; height:82vw; max-width:430px; max-height:430px; border:1px solid rgba(245,239,227,.5); border-radius:50%; right:-37%; top:2%; transform:scale(.55); opacity:0; transition:1s .25s ease; }
.scene--focus.is-active .focus-orbit { transform:scale(1); opacity:1; }
.focus-copy { position:absolute; z-index:2; left:8%; right:8%; bottom:7%; opacity:0; transform:translateY(24px); transition:.8s .55s ease; }
.scene--focus.is-active .focus-copy { opacity:1; transform:none; }
.focus-copy h2 { margin-top:14px; font-size:clamp(43px,12.4vw,68px); }
.focus-copy p { width:76%; margin:18px 0 0; font-size:11px; line-height:1.8; opacity:.8; }

.scene--final img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.12); transition:1.8s ease; }
.scene--final.is-active img { transform:scale(1); }
.final-wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,24,17,.05),rgba(6,24,17,.88)); }
.final-card { position:absolute; z-index:2; left:7%; right:7%; bottom:9%; padding:28px 25px; border:1px solid rgba(255,255,255,.55); background:rgba(6,24,17,.62); backdrop-filter:blur(12px); opacity:0; transform:scale(.9); transition:.9s .3s cubic-bezier(.2,.8,.2,1); }
.scene--final.is-active .final-card { opacity:1; transform:none; }
.final-card h2 { font-size:clamp(48px,13vw,72px); margin:14px 0 18px; }
.final-card p { margin:14px 0 0; font-size:11px; letter-spacing:.04em; }
.final-card time { position:absolute; right:22px; top:26px; font-family:"DM Serif Display"; font-size:19px; }
.rule { width:42px; height:1px; background:var(--lime); }
.replay { position:absolute; z-index:3; right:7%; bottom:3.2%; border:0; background:none; padding:5px; font-size:9px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
.replay span { font-size:14px; margin-left:5px; }

.scene-dots { position:fixed; z-index:30; right:max(14px,calc((100vw - 56.25svh)/2 + 14px)); top:50%; transform:translateY(-50%); display:grid; gap:9px; }
.scene-dots button { width:5px; height:5px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.3s; }
.scene-dots button.is-active { height:25px; border-radius:6px; background:#fff; }

@keyframes curtainOpen { to { transform:scaleY(0); } }
@keyframes frameExpand { 0%{width:20%;} 55%{width:76%;} 100%{width:100%;height:100%;border-color:rgba(255,255,255,.2);} }
@keyframes frameFade { to{opacity:0;} }
@keyframes photoReveal { to{transform:scale(1);filter:blur(0) saturate(.94) brightness(1);} }
@keyframes photoBreathe { from{transform:scale(1);} to{transform:scale(1.015);} }
@keyframes lightSweep { 0%{left:-65%;opacity:0;} 20%{opacity:1;} 100%{left:125%;opacity:0;} }
@keyframes eyebrowIn { to{opacity:1;letter-spacing:.26em;transform:none;} }
@keyframes titleIn { to{opacity:1;transform:none;} }
@keyframes rise { to{opacity:1;transform:none;} }
@keyframes scaleUp { from{transform:scale(0);} to{transform:scale(1);} }
@keyframes showButton { to{opacity:1;} }
@keyframes caretBlink { 50%{opacity:0;} }
@keyframes maskReveal {
  0% { clip-path:inset(50% 50% 50% 50%); }
  32% { clip-path:inset(39% 10% 39% 10%); }
  58% { clip-path:inset(39% 10% 39% 10%); }
  100% { clip-path:inset(0 0 0 0); }
}
@keyframes imageMotion {
  0% { transform:scale(1.18); object-position:50% 47%; }
  24% { transform:scale(1.18); object-position:50% 47%; }
  58% { transform:scale(1.06); object-position:50% 50%; }
  100% { transform:scale(1); object-position:50% 52%; }
}
@keyframes outlineReveal {
  0% { width:0; height:2px; opacity:0; }
  5% { opacity:1; }
  32% { width:80%; height:22%; opacity:1; }
  58% { width:80%; height:22%; opacity:1; }
  92% { width:100%; height:100%; opacity:.45; }
  100% { width:100%; height:100%; opacity:0; }
}
@keyframes textEnter {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes introCardIn {
  from { height:0; opacity:1; }
  to { height:var(--intro-card-height); opacity:1; }
}

/* Page 2 — editorial parallax poster */
.profile-scroll { position:relative; height:220svh; background:#a9daf2; scroll-snap-align:start; }
.profile-sticky { --p:0; position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; background:#a9daf2; }
.parallax { will-change:transform; }
.profile-sky { position:absolute; inset:-8%; z-index:0; background:radial-gradient(circle at 78% 12%,rgba(255,255,255,.7) 0 4%,transparent 4.3%),linear-gradient(160deg,#c6ecfa 0%,#8dcced 72%); transform:translate3d(0,var(--shift,0px),0) scale(1.08); }
.profile-sun { position:absolute; z-index:1; width:54vw; max-width:300px; aspect-ratio:1; border-radius:50%; right:-16%; top:12%; border:1px solid rgba(255,255,255,.65); box-shadow:0 0 0 22px rgba(255,255,255,.08),0 0 0 50px rgba(255,255,255,.05); transform:translate3d(0,var(--shift,0px),0); }
.profile-pink { position:absolute; z-index:2; left:-8%; right:-8%; top:49%; bottom:-10%; background:#ef6fa4; clip-path:polygon(0 8%,18% 3%,38% 8%,61% 1%,82% 6%,100% 0,100% 100%,0 100%); transform:translate3d(0,var(--shift,0px),0) scale(1.06); }
.profile-title { position:absolute; z-index:3; left:4%; right:4%; top:3.5%; display:flex; justify-content:space-between; font-family:"DM Serif Display",serif; font-size:clamp(80px,24vw,132px); line-height:.76; letter-spacing:-.08em; color:#f8f3e9; text-shadow:5px 5px 0 #1483bd; transform:translate3d(0,var(--shift,0px),0); }
.profile-title span:last-child { margin-top:12%; }
.profile-person { position:absolute; z-index:7; width:118%; max-width:none; height:88%; left:50%; bottom:-5%; object-fit:contain; object-position:center bottom; transform:translate3d(-50%,var(--shift,0px),0) scale(var(--person-scale,1)); filter:drop-shadow(0 18px 18px rgba(16,54,72,.2)); }
.profile-meta { position:absolute; z-index:9; text-transform:uppercase; text-shadow:0 1px 10px rgba(31,80,102,.14); }
.profile-meta--left { left:6%; top:29%; width:38%; transform:translate3d(0,var(--shift,0px),0); }
.meta-kicker { display:block; margin-bottom:8px; color:#ec3f82; font-size:8px; font-weight:600; letter-spacing:.18em; }
.profile-meta strong { font-family:"DM Serif Display",serif; color:#fff; font-size:clamp(23px,7vw,39px); font-weight:400; line-height:.88; }
.profile-meta--left p { color:#124d69; font-size:7px; font-weight:600; line-height:1.6; letter-spacing:.05em; }
.profile-meta--right { right:5%; top:27%; text-align:right; color:#fff; transform:translate3d(0,var(--shift,0px),0); }
.profile-meta--right span { display:block; color:#ec3f82; font-family:"DM Serif Display",serif; font-size:23px; }
.profile-meta--right p { font-size:7px; font-weight:600; line-height:1.45; letter-spacing:.12em; }
.profile-sticker { position:absolute; z-index:10; color:#fff; line-height:1; }
.profile-sticker--flower { right:6%; top:47%; font-size:50px; transform:translate3d(0,var(--shift,0px),0) rotate(var(--rotate,0deg)); }
.profile-sticker--spark { left:8%; top:50%; color:#ffe1a1; font-size:38px; transform:translate3d(0,var(--shift,0px),0) rotate(var(--rotate,0deg)); }
.profile-bottom { position:absolute; z-index:11; left:6%; right:6%; bottom:3%; display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:10px; color:#fff; transform:translate3d(0,var(--shift,0px),0); }
.profile-bottom span,.profile-bottom p { font-size:7px; font-weight:600; letter-spacing:.18em; line-height:1.4; margin:0; }
.profile-bottom strong { font-family:"DM Serif Display",serif; font-size:64px; line-height:.7; color:#a9daf2; -webkit-text-stroke:1px #fff; }
.profile-bottom p { text-align:right; }
.profile-progress { position:absolute; z-index:20; right:3%; top:42%; width:2px; height:16%; background:rgba(255,255,255,.3); }
.profile-progress i { display:block; width:100%; height:var(--progress-height,0%); background:#fff; }

/* Continuous handoff from page 1 to page 2 */
.story-scroll { position:relative; height:650svh; scroll-snap-align:start; }
.story-sticky { position:sticky; top:0; width:100%; height:100svh; overflow:hidden; background:var(--ink); isolation:isolate; }
.story-sticky .scene--intro { position:absolute; inset:0; z-index:1; height:100%; }
.story-sticky .scene--intro { opacity:var(--intro-scene-opacity,1); }
.story-sticky .intro-card { border-color:rgba(245,239,227,var(--intro-card-border,.8)); background:rgba(7,27,21,var(--intro-card-bg,.58)); }
.story-sticky.is-transitioning .intro-card { animation:none; opacity:1; }
.story-sticky .intro-card.has-revealed { animation:none; opacity:1; }
.story-sticky .intro-copy.typing-visible { opacity:var(--intro-text-opacity,1); transform:translate(-50%,calc(-50% + var(--intro-text-y,0px))); }
.profile-layer { position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.page-two-backdrop { position:absolute; inset:0; background:var(--forest); opacity:var(--backdrop-opacity,0); }
.page-two-frame {
  position:absolute; z-index:3; left:50%; top:50%;
  width:min(90%,51.75svh); aspect-ratio:9 / 16;
  transform:translate(-50%,-50%);
}
.page-two-scale {
  position:absolute; inset:0 auto auto 0; width:360px; height:640px;
  zoom:var(--p2-fit-scale,1);
}
.p2-crumple-sequence { position:absolute; z-index:2; inset:0; pointer-events:none; }
.p2-crumple { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.3)); }
.p2-crumple--one { opacity:var(--p2-crumple-one,0); transform:scale(var(--p2-crumple-one-scale,.86)) rotate(var(--p2-crumple-one-rotate,-5deg)); }
.p2-crumple--two { opacity:var(--p2-crumple-two,0); transform:scale(var(--p2-crumple-two-scale,.91)) rotate(var(--p2-crumple-two-rotate,3deg)); }
.p2-crumple--three { opacity:var(--p2-crumple-three,0); transform:scale(var(--p2-crumple-three-scale,.96)) rotate(var(--p2-crumple-three-rotate,-1deg)); }
.p2-crumple--four { opacity:var(--p2-crumple-four,0); transform:scale(var(--p2-crumple-four-scale,.98)); }
.page-two-sheet {
  position:absolute; z-index:1; inset:0; width:360px; height:640px; overflow:hidden; container-type:inline-size;
  color:#17211d; background:transparent;
  box-shadow:none; opacity:var(--p2-sheet-opacity,0);
  transform:translateY(var(--p2-sheet-y,34px)) rotate(var(--p2-sheet-rotate,-2deg)) scale(var(--p2-sheet-scale,.92));
  transform-origin:center;
}
.page-two-sheet::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("assets/paper-crumple-seq-04-fitted.png?v=2") center / 100% 100% no-repeat; filter:drop-shadow(0 26px 32px rgba(0,0,0,.38)); }
.page-two-sheet::after { display:none; }
.p2-reveal { opacity:var(--p2-item-opacity,0); }
.p2-topline { position:absolute; z-index:20; left:6%; right:6%; top:3.5%; display:flex; justify-content:flex-end; font-size:7px; font-weight:600; letter-spacing:.2em; transform:translateY(var(--p2-meta-y,-12px)); opacity:var(--p2-meta-opacity,0); }
.p2-campus { position:absolute; z-index:2; overflow:visible; background:transparent; }
.p2-campus::after { display:none; }
.p2-campus img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(20,30,26,.2)) saturate(.82) contrast(1.04); }
.p2-campus--left img { object-position:48% 50%; }
.p2-campus--right img { object-position:50% 67%; }
.p2-campus--left { left:-5%; top:17%; width:61%; height:36%; transform:translateX(var(--p2-scrap-left,-34px)) rotate(-5deg); opacity:var(--p2-scraps-opacity,0); }
.p2-campus--right { right:-8%; top:21%; width:58%; height:34%; transform:translateX(var(--p2-scrap-right,34px)) rotate(7deg); opacity:var(--p2-scraps-opacity,0); }
.p2-sign { position:absolute; z-index:13; left:50%; top:6%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:59%; min-height:11.5%; box-sizing:border-box; padding:13px 16px 12px; color:#fff; background:#2f76aa; border:5px solid #f8f5ed; box-shadow:-2px 2px 0 #286a9b,-5px 5px 0 #215a86,-9px 10px 16px rgba(25,67,98,.28); text-align:center; transform-origin:50% 100%; transform:perspective(520px) translate(-50%,var(--p2-sign-y,-24px)) rotateX(9deg) rotateY(-8deg) rotateZ(var(--p2-sign-rotate,-7deg)); opacity:var(--p2-sign-opacity,0); }
.p2-sign::after { content:""; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.28); pointer-events:none; }
.p2-sign strong,.p2-sign span { position:relative; z-index:1; display:block; text-shadow:-1px 1px 0 rgba(24,73,108,.72),-2px 2px 0 rgba(24,73,108,.45); }
.p2-sign strong { font-size:clamp(23px,7cqw,37px); line-height:.9; letter-spacing:-.04em; white-space:nowrap; transform:scaleX(.94); }
.p2-sign span { margin-top:8px; font-size:8px; font-weight:600; line-height:1; letter-spacing:.18em; white-space:nowrap; }
.p2-portrait { position:absolute; z-index:11; left:50%; top:14%; width:84%; height:54%; transform:translate(-50%,var(--p2-portrait-y,28px)) scale(var(--p2-portrait-scale,.88)); transform-origin:50% 100%; opacity:var(--p2-portrait-opacity,0); filter:drop-shadow(10px 18px 12px rgba(15,25,21,.52)); will-change:rotate; animation:p2PortraitSway 4.4s ease-in-out infinite alternate; }
.p2-portrait > img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.p2-name-tag { position:absolute; z-index:17; right:-1.5%; top:56%; display:grid; place-items:center; width:36%; height:7%; box-sizing:border-box; padding:3px 18px 4px; background:url("assets/stickers/name-capsule-le-thi-tho.png") center / 100% 100% no-repeat; filter:drop-shadow(0 3px 3px rgba(20,30,26,.16)); opacity:var(--p2-decor-opacity,0); transform:rotate(-3deg) scale(var(--p2-decor-scale,.7)); transform-origin:center; }
.p2-name-tag strong { color:#2f76aa; font-family:"Noto Serif",serif; font-size:clamp(18px,5.3cqw,27px); font-style:italic; font-weight:500; line-height:1; letter-spacing:-.035em; white-space:nowrap; text-shadow:1px 1px 0 rgba(217,108,143,.35); }
.p2-title-card { position:absolute; z-index:24; left:1%; right:1%; top:61.5%; height:11.5%; display:grid; place-items:center; box-sizing:border-box; padding:10px 36px 11px; overflow:visible; background:url("assets/stickers/graduation-title-banner-v3.png") center / 100% 100% no-repeat; filter:drop-shadow(0 8px 9px rgba(20,30,26,.2)); text-align:center; transform:translateY(var(--p2-title-y,20px)) rotate(-.6deg); opacity:var(--p2-title-opacity,0); isolation:isolate; }
.p2-title-card::before { display:none; }
.p2-title-card h2 { position:relative; z-index:1; display:block; max-width:100%; margin:0; color:var(--cream); font-family:"Be Vietnam Pro",sans-serif; font-size:clamp(19px,5.7cqw,29px); font-weight:700; line-height:1; letter-spacing:-.025em; white-space:nowrap; text-shadow:1.5px 1.5px 0 rgba(32,80,118,.72); }
.p2-info { position:absolute; z-index:16; left:6%; right:6%; top:76%; display:grid; grid-template-columns:.86fr 1.42fr .92fr; align-items:start; color:#17211d; transform:translateY(var(--p2-info-y,18px)); opacity:var(--p2-info-opacity,0); }
.p2-info > div { min-width:0; padding:0 8px; text-align:center; border-right:1px solid rgba(23,33,29,.28); }
.p2-info > div:last-child { border:0; }
.p2-info span,.p2-info strong,.p2-info p { display:block; }
.p2-info span { margin-bottom:6px; color:rgba(23,33,29,.7); font-size:6px; font-weight:700; letter-spacing:.14em; }
.p2-info strong { display:flex; align-items:center; justify-content:center; min-height:24px; font-size:8.5px; line-height:1.25; }
.p2-info p { margin:4px 0 0; color:rgba(23,33,29,.72); font-size:6px; line-height:1.35; }
.p2-message { position:absolute; z-index:16; left:9%; right:9%; bottom:3.4%; margin:0; font-family:"Noto Serif",serif; font-size:clamp(9px,2.35cqw,12.5px); font-style:italic; line-height:1.48; text-align:center; transform:translateY(var(--p2-message-y,12px)); opacity:var(--p2-message-opacity,0); }
.p2-tape { position:absolute; width:23%; height:4.4%; background:url("assets/stickers/masking-tape-v2.png") center / contain no-repeat; filter:drop-shadow(0 2px 2px rgba(20,30,26,.12)); opacity:var(--p2-decor-opacity,0); }
.p2-tape--one { z-index:8; left:10%; top:15%; transform:rotate(-11deg) scale(var(--p2-decor-scale,.7)); }
.p2-flower { position:absolute; z-index:9; right:3%; top:14%; display:block; width:17%; height:auto; filter:drop-shadow(0 3px 3px rgba(20,30,26,.13)); transform:rotate(var(--p2-decor-rotate,-20deg)) scale(var(--p2-decor-scale,.7)); opacity:var(--p2-decor-opacity,0); }
.p2-plane { position:absolute; z-index:18; left:3%; top:44%; display:block; width:25%; height:auto; filter:drop-shadow(0 3px 3px rgba(20,30,26,.16)); transform:rotate(8deg) scale(var(--p2-decor-scale,.7)); transform-origin:center; opacity:var(--p2-decor-opacity,0); }
.p2-plane { will-change:translate,rotate; animation:p2PlaneDrift 3.7s ease-in-out infinite; }
.p2-flower { will-change:filter,scale; animation:p2SparklePulse 3s ease-in-out infinite; }
.p2-tape--one { will-change:translate,rotate; animation:p2TapeBreathe 5s ease-in-out infinite alternate; }
@keyframes p2PlaneDrift {
  0%,100% { translate:0 0; rotate:0deg; }
  30% { translate:-5px -7px; rotate:-1.5deg; }
  65% { translate:2px -3px; rotate:1deg; }
}
@keyframes p2SparklePulse {
  0%,100% { scale:1; filter:drop-shadow(0 3px 3px rgba(20,30,26,.16)) brightness(1); }
  48% { scale:1.05; filter:drop-shadow(0 4px 5px rgba(190,72,103,.22)) brightness(1.1); }
}
@keyframes p2TapeBreathe {
  from { translate:0 0; rotate:0deg; }
  to { translate:2px -3px; rotate:1deg; }
}
@keyframes p2PortraitSway {
  from { rotate:-.75deg; }
  to { rotate:.75deg; }
}
.profile-layer .profile-sky { position:absolute; z-index:2; inset:0 0 auto; height:var(--blue-height,0%); opacity:1; clip-path:none; transform:none; background:#a9daf2; }
.profile-layer .profile-pink { position:absolute; z-index:2; inset:auto 0 0; height:var(--pink-height,0%); opacity:1; clip-path:none; transform:none; background:#ef6fa4; }
.profile-layer .profile-person { position:absolute; z-index:7; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52%; transform:scale(1); opacity:var(--person-opacity,0); filter:none; }
.page-three-wipe { position:absolute; z-index:30; left:50%; top:50%; width:var(--wipe-width,0%); height:var(--wipe-height,0%); border-radius:var(--wipe-radius,18px); overflow:hidden; transform:translate(-50%,-50%); opacity:var(--wipe-opacity,0); background:#123e56; box-shadow:0 20px 70px rgba(5,25,36,.28); pointer-events:none; }
.page-three-wipe i { position:absolute; inset:0; opacity:var(--wipe-glow,0); background:radial-gradient(circle at 70% 30%,rgba(169,218,242,.16),transparent 38%),radial-gradient(circle at 15% 85%,rgba(239,111,164,.14),transparent 35%); }
.page-three-panels { position:absolute; z-index:30; inset:0; overflow:hidden; background:transparent; pointer-events:none; }
.page-three-panels i { position:absolute; top:50%; width:26.36svh; height:140svh; overflow:hidden; background:transparent; filter:drop-shadow(7px 0 11px rgba(0,0,0,.38)); transform-origin:center; will-change:transform; }
.page-three-panels i::after { content:""; position:absolute; z-index:3; left:50%; top:50%; width:140svh; aspect-ratio:2050/386; background:url("assets/film-strip-35mm-realistic.png") center / 100% 100% no-repeat; transform:translate(-50%,-50%) rotate(90deg); pointer-events:none; }
.page-three-panels i > span { position:absolute; z-index:1; inset:0; display:block; }
.film-photo-frame { position:absolute; left:17%; width:64%; display:block; overflow:hidden; background:#0c0d0c; }
.film-photo-frame:nth-child(1) { top:1.3%; height:18.15%; }
.film-photo-frame:nth-child(2) { top:20.78%; height:18.05%; }
.film-photo-frame:nth-child(3) { top:40%; height:18%; }
.film-photo-frame:nth-child(4) { top:59.17%; height:18.55%; }
.film-photo-frame:nth-child(5) { top:78.98%; height:19.55%; }
.page-three-panels img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.06) sepia(.08); }
.page-three-panels img[src$="album-04.jpg"],
.page-three-panels img[src$="album-07.jpg"],
.page-three-panels img[src$="album-08.jpg"] { left:-25%; top:16.667%; width:150%; height:66.667%; transform:rotate(90deg); object-fit:cover; }
.page-three-panels i:nth-child(1) { left:15%; transform:translate(-50%,calc(-50% + var(--panel-one,150svh))) rotate(-1.2deg); }
.page-three-panels i:nth-child(2) { left:50%; transform:translate(-50%,calc(-50% + var(--panel-two,-150svh))) rotate(1deg); }
.page-three-panels i:nth-child(3) { left:85%; transform:translate(-50%,calc(-50% + var(--panel-three,150svh))) rotate(-.8deg); }
.profile-pink-tint { position:absolute; z-index:8; left:0; right:0; bottom:0; height:34%; opacity:var(--tint-opacity,0); pointer-events:none; background:linear-gradient(180deg,rgba(239,111,164,0) 0%,rgba(239,111,164,.2) 22%,rgba(239,111,164,.7) 100%); }
.page-two-content { opacity:var(--content-opacity,0); }
.profile-header { position:absolute; z-index:12; top:calc(3.5% + env(safe-area-inset-top)); left:5%; right:5%; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; color:#092f45; font-size:clamp(11px,2.8cqw,15px); font-weight:600; line-height:1.4; letter-spacing:.1em; transform:translateY(var(--content-up,18px)); }
.profile-header span:last-child { text-align:right; }
.header-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid currentColor; border-radius:50%; color:#e93f82; font-size:14px; }
.profile-display { position:absolute; z-index:5; top:9%; left:50%; width:max-content; color:#fff8ed; font-family:"DM Serif Display",serif; font-size:clamp(65px,18.5cqw,105px); line-height:.78; letter-spacing:-.07em; text-shadow:5px 5px 0 #197dac; transform:translate(-50%,var(--title-shift,26px)); }
.profile-note { position:absolute; z-index:10; text-transform:uppercase; transform:translateY(var(--content-up,18px)); }
.profile-note--left { left:4%; top:28%; width:37%; color:#103b51; }
.profile-note > span { display:block; margin-bottom:8px; color:#d8276b; font-size:clamp(10px,2.4cqw,13px); font-weight:600; letter-spacing:.1em; }
.profile-note strong { display:block; color:#fff; font-family:"DM Serif Display",serif; font-size:clamp(24px,6.4cqw,35px); font-weight:400; line-height:.95; text-transform:none; text-shadow:0 2px 10px rgba(16,59,81,.3); }
.profile-note--left p { margin:9px 0 0; font-size:clamp(10px,2.6cqw,14px); font-weight:600; line-height:1.5; letter-spacing:.025em; text-shadow:0 1px 8px rgba(255,255,255,.25); }
.profile-note i { display:block; width:34px; height:2px; margin-top:12px; background:#e8397c; }
.profile-note--right { right:4%; top:30%; width:38%; color:#fff; text-align:right; }
.profile-note--right p { margin:0; font-size:clamp(10px,2.6cqw,14px); font-weight:600; line-height:1.5; letter-spacing:.025em; text-shadow:0 2px 9px rgba(18,62,86,.38); }
.sticker { position:absolute; z-index:11; display:grid; place-items:center; transform:translateY(var(--sticker-shift,26px)) rotate(var(--sticker-rotate,0deg)); }
.sticker--round { right:5%; top:48%; width:62px; height:62px; border-radius:50%; color:#fff; background:#123e56; box-shadow:0 0 0 5px #fff8ed,0 0 0 7px #123e56; }
.sticker--round span { font-size:8px; font-weight:600; line-height:1.1; letter-spacing:.12em; text-align:center; }
.sticker--spark { left:8%; top:52%; color:#fff2a8; font-size:42px; }
.sticker--flower { right:14%; top:67%; color:#fff; font-size:37px; }
.profile-hearts { position:absolute; z-index:9; right:7%; top:20%; display:flex; align-items:end; gap:5px; color:#e8397c; transform:translateY(var(--content-up,18px)) rotate(-8deg); }
.profile-hearts i { font-style:normal; font-size:15px; }
.profile-hearts i:nth-child(2) { font-size:27px; transform:translateY(8px); }
.profile-hearts i:nth-child(3) { font-size:20px; transform:translateY(-3px); }
.profile-icons { position:absolute; z-index:11; left:5%; bottom:23%; display:grid; gap:5px; color:#fff; font-size:23px; line-height:1; transform:translateY(var(--content-up,18px)); }
.profile-badge { position:absolute; z-index:11; right:5%; bottom:22%; color:#fff; font-size:13px; font-weight:600; line-height:.8; text-align:right; transform:translateY(var(--content-up,18px)); }
.profile-badge strong { color:#a9daf2; font-family:"DM Serif Display",serif; font-size:35px; font-weight:400; -webkit-text-stroke:1px #fff; }
.profile-event { position:absolute; z-index:12; bottom:20%; color:#fff; text-shadow:0 2px 10px rgba(18,62,86,.3); opacity:var(--card-opacity,0); transform:translateY(var(--card-y,24px)); }
.profile-event--time { left:5%; text-align:left; }
.profile-event--place { right:5%; max-width:34%; text-align:right; }
.profile-event span { display:block; margin-bottom:3px; color:#123e56; font-size:clamp(9px,2.3cqw,12px); font-weight:600; letter-spacing:.14em; }
.profile-event strong { display:block; font-family:"DM Serif Display",serif; font-size:clamp(22px,5.5cqw,30px); font-weight:400; line-height:.95; }
.profile-event p { margin:5px 0 0; font-size:clamp(9px,2.3cqw,12px); font-weight:600; letter-spacing:.06em; }
.profile-marquee { position:absolute; z-index:13; left:0; right:0; bottom:0; overflow:hidden; padding:8px 0 9px; color:#fff; background:#123e56; border-top:1px solid rgba(255,255,255,.7); white-space:nowrap; }
.profile-marquee div { width:max-content; font-size:8px; font-weight:600; letter-spacing:.22em; animation:marqueeMove 9s linear infinite; }
@keyframes marqueeMove { to{transform:translateX(-50%);} }
.invite-card { position:absolute; z-index:12; left:6%; right:6%; bottom:6.5%; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; padding:13px 14px; color:#123e56; background:rgba(255,248,237,.92); border:1px solid rgba(18,62,86,.22); box-shadow:0 12px 35px rgba(18,62,86,.18); backdrop-filter:blur(8px); transform:translateY(var(--content-up,18px)); }
.invite-card div { min-width:0; }
.invite-card span { display:block; margin-bottom:5px; color:#d8276b; font-size:9px; font-weight:600; letter-spacing:.1em; }
.invite-card strong { display:block; font-family:"DM Serif Display",serif; font-size:17px; font-weight:400; line-height:1.08; }
.invite-card a { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid rgba(18,62,86,.18); color:#123e56; font-size:10px; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.invite-card b { font-size:14px; font-weight:400; }

/* Staggered page 2 entrance */
.profile-display { opacity:var(--title-opacity,0); transform:translate(-50%,var(--title-y,28px)) scale(var(--title-scale,.92)); }
.profile-header { opacity:var(--header-opacity,0); transform:translateY(var(--header-y,-14px)); }
.profile-note--left { opacity:var(--left-opacity,0); transform:translateX(var(--left-x,-28px)); }
.profile-note--right { opacity:var(--right-opacity,0); transform:translateX(var(--right-x,28px)); }
.profile-hearts,.sticker,.profile-icons,.profile-badge { opacity:var(--decor-opacity,0); }
.profile-hearts { transform:translateY(var(--decor-y,20px)) rotate(-8deg); }
.sticker { transform:translateY(var(--decor-y,20px)) rotate(var(--sticker-rotate,-12deg)) scale(var(--decor-scale,.75)); }
.profile-icons,.profile-badge { transform:translateY(var(--decor-y,20px)); }
.profile-marquee { opacity:var(--card-opacity,0); }

/* Page 3 — invitation details */
.details-page { position:relative; width:100%; height:100svh; padding:calc(5% + env(safe-area-inset-top)) 7% calc(4% + env(safe-area-inset-bottom)); overflow:hidden; scroll-snap-align:start; color:#123e56; background:#fff8ed; isolation:isolate; }
.details-page::before { content:""; position:absolute; z-index:-2; width:72%; aspect-ratio:1; right:-35%; top:20%; border-radius:50%; background:#a9daf2; opacity:.55; }
.details-page::after { content:""; position:absolute; z-index:-1; left:-14%; right:-14%; height:34%; bottom:-11%; border-radius:50% 50% 0 0; background:#ef6fa4; }
.details-orbit { position:absolute; z-index:-1; width:66vw; max-width:360px; aspect-ratio:1; border:1px solid rgba(18,62,86,.2); border-radius:50%; right:-31%; top:16%; transform:scale(.55); opacity:0; transition:1.1s .25s cubic-bezier(.22,1,.36,1); }
.details-page.is-active .details-orbit { transform:scale(1); opacity:1; }
.details-header { display:flex; justify-content:space-between; font-size:8px; font-weight:600; letter-spacing:.22em; opacity:0; transform:translateY(-14px); transition:.65s .08s ease; }
.details-page.is-active .details-header { opacity:1; transform:none; }
.details-title { margin-top:7svh; opacity:0; transform:translateY(24px); transition:.8s .18s cubic-bezier(.22,1,.36,1); }
.details-page.is-active .details-title { opacity:1; transform:none; }
.details-title > span { display:block; margin-bottom:8px; color:#e8397c; font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.details-title h2 { margin:0; font-family:"DM Serif Display",serif; font-size:clamp(55px,16vw,88px); font-weight:400; line-height:.78; letter-spacing:-.05em; }
.details-title em { color:#e8397c; font-weight:400; }
.date-lockup { position:absolute; z-index:2; top:20%; right:7%; display:grid; justify-items:center; color:#fff; opacity:0; transform:scale(.72) rotate(7deg); transition:.85s .32s cubic-bezier(.22,1,.36,1); }
.details-page.is-active .date-lockup { opacity:1; transform:scale(1) rotate(0); }
.date-lockup::before { content:""; position:absolute; z-index:-1; width:95px; height:112px; top:-14px; border-radius:48% 52% 44% 56%; background:#123e56; transform:rotate(-5deg); }
.date-lockup span { font-size:8px; font-weight:600; letter-spacing:.2em; }
.date-lockup strong { font-family:"DM Serif Display",serif; font-size:56px; font-weight:400; line-height:.92; }
.details-grid { display:grid; gap:13px; width:72%; margin-top:8svh; }
.detail-item { padding-bottom:12px; border-bottom:1px solid rgba(18,62,86,.18); opacity:0; transform:translateX(-20px); transition:.65s cubic-bezier(.22,1,.36,1); }
.details-page.is-active .detail-item { opacity:1; transform:none; }
.details-page.is-active .detail-item:nth-child(1) { transition-delay:.42s; }
.details-page.is-active .detail-item:nth-child(2) { transition-delay:.52s; }
.details-page.is-active .detail-item:nth-child(3) { transition-delay:.62s; }
.detail-item > span { display:block; margin-bottom:5px; color:#e8397c; font-size:7px; font-weight:600; letter-spacing:.2em; }
.detail-item strong { font-family:"DM Serif Display",serif; font-size:20px; font-weight:400; }
.detail-item p { margin:3px 0 0; font-size:9px; }
.color-dots { display:flex; gap:7px; }
.color-dots i { width:17px; height:17px; border-radius:50%; background:#123e56; border:2px solid #fff; box-shadow:0 0 0 1px rgba(18,62,86,.15); }
.color-dots i:nth-child(2) { background:#69bfe7; }
.color-dots i:nth-child(3) { background:#ef6fa4; }
.details-actions { position:absolute; z-index:3; left:7%; right:7%; bottom:9%; display:grid; grid-template-columns:1.45fr 1fr; gap:8px; opacity:0; transform:translateY(20px); transition:.7s .72s ease; }
.details-page.is-active .details-actions { opacity:1; transform:none; }
.action { display:flex; align-items:center; justify-content:center; min-height:43px; padding:0 14px; border:1px solid #123e56; color:#123e56; font-size:8px; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.action--primary { justify-content:space-between; color:#fff; background:#123e56; }
.action--primary span { font-size:15px; }
.details-footer { position:absolute; left:7%; right:7%; bottom:3.5%; margin:0; color:#fff; font-family:"DM Serif Display",serif; font-size:12px; text-align:center; opacity:0; transition:.6s .9s ease; }
.details-page.is-active .details-footer { opacity:.9; }

/* Page 3 — photo album */
.gallery-page { height:100svh; padding:calc(4% + env(safe-area-inset-top)) 6% calc(4% + env(safe-area-inset-bottom)); color:#fff8ed; background:#123e56; }
.gallery-page.gallery-layer { position:absolute; z-index:29; inset:0; width:100%; height:100%; opacity:var(--gallery-opacity,0); pointer-events:none; scroll-snap-align:none; }
.gallery-page.gallery-layer.is-active { pointer-events:auto; }
.gallery-page::before { width:52%; right:-22%; top:-8%; background:#ef6fa4; opacity:1; }
.gallery-page::after { left:-30%; right:auto; width:65%; height:auto; aspect-ratio:1; bottom:-27%; border-radius:50%; background:#a9daf2; }
.gallery-header { position:relative; z-index:4; display:grid; grid-template-columns:1fr; gap:7px; opacity:0; transform:translateY(20px); transition:.75s .08s cubic-bezier(.22,1,.36,1); }
.gallery-page.is-active .gallery-header { opacity:1; transform:none; }
.gallery-header > span { padding-top:6px; color:#a9daf2; font-size:7px; font-weight:600; letter-spacing:.2em; }
.gallery-header h2 { margin:0; font-family:"Noto Serif",serif; font-size:clamp(43px,12cqw,65px); font-weight:400; line-height:.82; letter-spacing:-.045em; }
.gallery-header h2 em { color:#ef6fa4; font-weight:400; }
.gallery-header p { grid-column:1; width:64%; margin:10px 0 0; font-size:clamp(10px,2.35cqw,13px); line-height:1.55; opacity:.76; }
.gallery-meta { position:absolute; right:calc(-3.5cqw); top:3px; display:block; margin:0; color:var(--leaf); font-size:clamp(7px,1.45cqw,8px); font-weight:600; line-height:1; letter-spacing:.12em; white-space:nowrap; writing-mode:vertical-rl; text-orientation:mixed; opacity:.68; filter:opacity(.68); transform:rotate(180deg); transform-origin:center; }
.gallery-meta i { display:inline; margin:6px 0; color:var(--rose-soft); font-style:normal; }
.gallery-rsvp { position:relative; z-index:8; display:flex; justify-content:center; align-items:center; justify-self:end; width:auto; min-width:158px; padding:9px 34px 9px 14px; border:1px solid rgba(245,239,227,.52); color:var(--cream); background:transparent; box-shadow:none; font-size:clamp(8px,1.75cqw,10px); font-weight:600; letter-spacing:.09em; text-align:center; text-decoration:none; text-transform:uppercase; opacity:0; transform:translateY(14px); transition:.7s .2s cubic-bezier(.22,1,.36,1),transform .25s ease,border-color .25s ease,background-color .25s ease; }
.gallery-page.is-active .gallery-rsvp { opacity:1; transform:none; }
.gallery-rsvp b { position:absolute; right:13px; top:50%; color:var(--rose-soft); font-size:18px; font-weight:500; transform:translateY(-50%); }
.gallery-rsvp:hover { border-color:var(--rose-soft); background:rgba(239,111,164,.08); transform:translateY(-2px); }
.gallery-grid { position:absolute; z-index:3; left:6%; right:6%; top:34%; height:39%; display:grid; grid-template-columns:1.12fr .88fr; grid-template-rows:1fr .72fr; gap:8px; }
.gallery-shot { background-image:url("cover.jpg"); background-size:cover; opacity:0; transform:scale(.88) translateY(20px); transition:.8s cubic-bezier(.22,1,.36,1); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.gallery-page.is-active .gallery-shot { opacity:1; transform:none; }
.gallery-page.is-active .gallery-shot--one { transition-delay:.22s; }
.gallery-page.is-active .gallery-shot--two { transition-delay:.32s; }
.gallery-page.is-active .gallery-shot--three { transition-delay:.42s; }
.gallery-page.is-active .gallery-shot--four { transition-delay:.52s; }
.gallery-shot--one { grid-row:1/3; background-position:50% 54%; }
.gallery-shot--two { background-position:48% 35%; }
.gallery-shot--three { background-position:24% 76%; }
.gallery-shot--four { display:block; position:absolute; z-index:4; left:34%; bottom:-8%; width:31%; height:42%; border:4px solid #fff8ed; background-position:64% 72%; transform:scale(.88) translateY(20px) rotate(-5deg); }
.gallery-page.is-active .gallery-shot--four { transform:rotate(-5deg); }
.gallery-closing { position:absolute; z-index:7; left:7%; right:7%; bottom:4%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0 0; color:var(--cream); background:transparent; border-top:1px solid rgba(245,239,227,.24); box-shadow:none; opacity:0; transform:translateY(18px); transition:.7s .62s ease; }
.gallery-page.is-active .gallery-closing { opacity:1; transform:none; }
.gallery-quote { position:relative; z-index:6; width:auto; margin:0; color:rgba(245,239,227,.76); font-family:"Be Vietnam Pro",sans-serif; font-size:clamp(8px,1.75cqw,10px); font-weight:400; line-height:1.4; letter-spacing:.16em; white-space:nowrap; }

/* Page 3 is fully scrubbed by scroll — no automatic time-based entrance */
.gallery-page.gallery-layer .gallery-header { opacity:1; transform:none; transition:none; }
.gallery-page.gallery-layer .gallery-header > span,
.gallery-page.gallery-layer .gallery-header > p { opacity:var(--g-header-meta,0); transform:translateY(var(--g-header-meta-y,10px)); }
.gallery-page.gallery-layer .gallery-header > .gallery-meta { opacity:var(--g-header-meta,0); transform:translateY(var(--g-header-meta-y,10px)) rotate(180deg); }
.gallery-page.gallery-layer .gallery-rsvp { opacity:var(--g-rsvp,0); clip-path:none; transform:translateY(var(--g-rsvp-y,10px)); transition:none; }
.gallery-page.gallery-layer .gallery-rsvp:hover { transform:translateY(calc(var(--g-rsvp-y,10px) - 2px)); }
.gallery-title-char { display:inline-block; opacity:0; }
.gallery-title-char.is-visible,.gallery-header h2.is-typed .gallery-title-char { opacity:1; }
.gallery-title-char.has-caret::after { content:""; display:inline-block; width:2px; height:.76em; margin-left:.08em; background:var(--cream); vertical-align:.02em; animation:caretBlink .7s steps(1,end) infinite; }
@media (prefers-reduced-motion:reduce) {
  .gallery-title-char.has-caret::after { animation:none; }
}
.gallery-page.gallery-layer .gallery-shot { opacity:var(--g-shot-one,0); transform:scale(var(--g-shot-one-scale,.88)) translateY(var(--g-shot-one-y,20px)); transition:none; }
.gallery-page.gallery-layer .gallery-shot--two { opacity:var(--g-shot-two,0); transform:scale(var(--g-shot-two-scale,.88)) translateY(var(--g-shot-two-y,20px)); }
.gallery-page.gallery-layer .gallery-shot--three { opacity:var(--g-shot-three,0); transform:scale(var(--g-shot-three-scale,.88)) translateY(var(--g-shot-three-y,20px)); }
.gallery-page.gallery-layer .gallery-shot--four { opacity:var(--g-shot-four,0); transform:scale(var(--g-shot-four-scale,.88)) translateY(var(--g-shot-four-y,20px)) rotate(-5deg); }
.gallery-page.gallery-layer .gallery-closing { opacity:var(--g-closing,0); transform:translateY(var(--g-closing-y,18px)); transition:none; }
.album-stage { position:absolute; z-index:5; inset:19% 0 15%; overflow:visible; }
.album-main { position:absolute; z-index:4; left:50%; top:52%; width:29%; height:36%; margin:0; transform:translate(-50%,-50%) scale(0); transform-origin:center; overflow:hidden; border:0; box-shadow:0 14px 36px rgba(0,0,0,.24); }
.album-main div { position:relative; width:100%; height:100%; overflow:hidden; transform:scale(1.35); }
.album-main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.album-satellite { position:absolute; z-index:3; left:50%; top:52%; width:var(--sat-width,28%); aspect-ratio:var(--sat-ratio,3/4); margin:0; overflow:hidden; border:0; background:transparent; box-shadow:0 10px 25px rgba(0,0,0,.2); opacity:0; transform:translate(-50%,-50%) scale(.12); transition:box-shadow .45s ease; will-change:transform,opacity; }
.album-satellite img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.album-p1 { z-index:1; opacity:1; transform:scale(1); transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); }
.album-stage.album-show-p2 .album-p1 { opacity:1; transform:scale(1); }
.album-stage.album-show-p2 .album-main,.album-stage.album-show-p2 .album-satellite { box-shadow:none; }
.album-p2-frame { position:absolute; z-index:5; margin:0; overflow:hidden; opacity:0; transform:translate(-50%,-50%) scale(.82); transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1); box-shadow:0 10px 25px rgba(0,0,0,.2); }
.album-p2-frame img { width:100%; height:100%; object-fit:cover; }
.album-stage.album-show-p2 .album-p2-frame { opacity:1; transform:translate(-50%,-50%) scale(1); }
.album-p2-a { left:19%; top:31%; width:25%; height:30%; }
.album-p2-b { left:51%; top:27%; width:35%; height:23%; }
.album-p2-c { left:82%; top:37%; width:23%; height:31%; }
.album-p2-d { left:29%; top:66%; width:35%; height:24%; }
.album-p2-e { left:66%; top:64%; width:27%; height:36%; }
.album-satellite:nth-of-type(2) { --sat-width:26%; --sat-ratio:3/4; }
.album-satellite:nth-of-type(3) { --sat-width:31%; --sat-ratio:4/3; }
.album-satellite:nth-of-type(4) { --sat-width:23%; --sat-ratio:3/4; }
.album-satellite:nth-of-type(5) { --sat-width:31%; --sat-ratio:4/3; }
.album-stage.album-triggered .album-main { animation:albumMaskIn 1.05s cubic-bezier(.22,1,.36,1) forwards,albumMainFly 1.2s 1.12s cubic-bezier(.22,1,.36,1) forwards,albumFrameFloat 4.6s 2.35s ease-in-out infinite alternate; }
.album-stage.album-triggered .album-main div { animation:albumImageOut 1.05s cubic-bezier(.22,1,.36,1) forwards; }
.album-stage.album-triggered .album-satellite { animation:satelliteFly 1.2s var(--sat-delay,1.02s) cubic-bezier(.22,1,.36,1) forwards,albumFrameFloat 4.8s calc(var(--sat-delay,1.02s) + 1.2s) ease-in-out infinite alternate; }
@keyframes albumMaskIn { to{transform:translate(-50%,-50%) scale(1);} }
@keyframes albumMainFly {
  from { left:50%; top:52%; transform:translate(-50%,-50%) scale(1); }
  to { left:58%; top:35%; transform:translate(-50%,-50%) scale(1); }
}
@keyframes albumImageOut { to{transform:scale(1);} }
@keyframes satelliteFly {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.12) rotate(0); }
  18% { opacity:1; }
  100% { opacity:1; transform:var(--sat-target); }
}
@keyframes albumFrameFloat {
  0%,100% { translate:0 0; rotate:0deg; }
  30% { translate:0 -4px; rotate:-.35deg; }
  72% { translate:0 5px; rotate:.45deg; }
}
@media (orientation:landscape) {
  .portrait-stage { width:56.25svh; box-shadow:0 0 80px rgba(0,0,0,.55); }
  .focus-orbit { width:46svh;height:46svh; }
}

/* Page 3 — a layered editorial collage, with one stable visual anchor. */
.gallery-page { isolation:isolate; }
.gallery-page::before { filter:blur(2px); }
.gallery-page::after { filter:blur(1px); }
.album-stage { inset:22% 0 16%; perspective:900px; }
.album-stage::before {
  content:""; position:absolute; z-index:0; left:18%; right:14%; top:14%; bottom:8%;
  border-radius:50%; background:radial-gradient(ellipse,rgba(239,111,164,.17),rgba(7,27,21,0) 68%);
  filter:blur(22px); opacity:.9; pointer-events:none;
}
.album-main {
  z-index:5; top:51%; width:40%; height:53%; border:3px solid rgba(245,239,227,.92); background:transparent;
  box-shadow:0 28px 55px rgba(0,0,0,.34),0 5px 13px rgba(0,0,0,.2),inset 0 0 0 1px rgba(7,27,21,.18);
}
.album-main::after,.album-satellite::after,.album-p2-frame::after {
  position:absolute; z-index:3; right:7px; bottom:6px; color:rgba(245,239,227,.88);
  font-size:6px; font-weight:700; letter-spacing:.16em; text-shadow:0 1px 4px rgba(0,0,0,.55); pointer-events:none;
}
.album-main::after { content:"01 / MOMENTS"; }
.album-satellite {
  padding:0; border:2px solid rgba(245,239,227,.88); background:transparent;
  box-shadow:0 18px 38px rgba(0,0,0,.3),0 3px 9px rgba(0,0,0,.18),inset 0 0 0 1px rgba(7,27,21,.16);
}
.album-main,.album-satellite {
  scale:1;
  filter:opacity(1);
  transition:scale .72s cubic-bezier(.22,1,.36,1),filter .5s ease,box-shadow .5s ease;
}
.album-main::after,.album-satellite::after { transition:opacity .22s ease; }
.album-stage.album-show-p2 .album-main {
  border-color:rgba(245,239,227,.92);
  background:transparent;
}
.album-stage.album-show-p2 .album-satellite { border-color:rgba(245,239,227,.88); background:transparent; }
.album-stage.album-show-p2 .album-main::after,
.album-stage.album-show-p2 .album-satellite::after { opacity:1; }
.album-stage.album-show-p2 .album-main,
.album-stage.album-show-p2 .album-satellite { scale:.82; filter:opacity(0); pointer-events:none; }
.album-satellite:nth-of-type(2) { z-index:3; --sat-width:23%; --sat-ratio:3/4; }
.album-satellite:nth-of-type(2)::after { content:"02"; }
.album-satellite:nth-of-type(3) { z-index:2; --sat-width:28%; --sat-ratio:4/3; }
.album-satellite:nth-of-type(3)::after { content:"03"; }
.album-satellite:nth-of-type(4) { z-index:6; --sat-width:22%; --sat-ratio:3/4; }
.album-satellite:nth-of-type(4)::after { content:"04"; }
.album-satellite:nth-of-type(5) { z-index:4; --sat-width:28%; --sat-ratio:4/3; }
.album-satellite:nth-of-type(5)::after { content:"05"; }
.album-main img,.album-satellite img,.album-p2-frame img { filter:saturate(.9) contrast(1.02); }
.album-stage.album-triggered .album-satellite:nth-of-type(even) { animation-direction:normal,alternate-reverse; }
.album-stage.album-triggered .album-satellite:nth-of-type(3) { animation-duration:1.2s,5.6s; }
.album-stage.album-triggered .album-satellite:nth-of-type(5) { animation-duration:1.2s,6.2s; }
.album-stage.album-show-p2 .album-p2-frame { animation:albumFrameFloat 5s .35s ease-in-out infinite alternate; }
.album-stage.album-show-p2 .album-p2-b,
.album-stage.album-show-p2 .album-p2-d { animation-direction:alternate-reverse; }
.album-stage.album-show-p2 .album-p2-c { animation-duration:5.8s; }
.album-stage.album-show-p2 .album-p2-e { animation-duration:6.4s; }
.album-stage img { cursor:zoom-in; }
.album-stage.album-show-p2 .album-p1 { pointer-events:none; }
.album-p2-frame { pointer-events:none; }
.album-stage.album-show-p2 .album-p2-frame { pointer-events:auto; }
.album-p2-frame {
  padding:4px; background:var(--cream);
  box-shadow:0 22px 42px rgba(0,0,0,.3),0 3px 9px rgba(0,0,0,.18);
}
.album-p2-a { z-index:3; left:18%; top:28%; width:23%; height:32%; transform:translate(-50%,-50%) scale(.82) rotate(-2.4deg); }
.album-p2-b { z-index:2; left:82%; top:30%; width:28%; height:23%; transform:translate(-50%,-50%) scale(.82) rotate(2.2deg); }
.album-p2-c { z-index:6; left:20%; top:72%; width:22%; height:32%; transform:translate(-50%,-50%) scale(.82) rotate(1.6deg); }
.album-p2-d { z-index:4; left:81%; top:71%; width:28%; height:23%; transform:translate(-50%,-50%) scale(.82) rotate(-1.8deg); }
.album-p2-e { z-index:5; left:50%; top:49%; width:40%; height:53%; transform:translate(-50%,-50%) scale(.82); }
.album-p2-a::after { content:"06"; }
.album-p2-b::after { content:"07"; }
.album-p2-c::after { content:"08"; }
.album-p2-d::after { content:"09"; }
.album-p2-e::after { content:"10 / MEMORIES"; }
.album-stage.album-show-p2 .album-p2-a { transform:translate(-50%,-50%) scale(1) rotate(-2.4deg); }
.album-stage.album-show-p2 .album-p2-b { transform:translate(-50%,-50%) scale(1) rotate(2.2deg); }
.album-stage.album-show-p2 .album-p2-c { transform:translate(-50%,-50%) scale(1) rotate(1.6deg); }
.album-stage.album-show-p2 .album-p2-d { transform:translate(-50%,-50%) scale(1) rotate(-1.8deg); }
.album-stage.album-show-p2 .album-p2-e { transform:translate(-50%,-50%) scale(1); }
@keyframes albumMainFly {
  from { left:50%; top:51%; transform:translate(-50%,-50%) scale(1); }
  to { left:50%; top:49%; transform:translate(-50%,-50%) scale(1); }
}

.album-lightbox { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; color:var(--cream); background:rgba(4,14,11,.9); }
.album-lightbox::backdrop { background:rgba(4,14,11,.82); backdrop-filter:blur(8px); }
.album-lightbox[open] { display:grid; place-items:center; }
.album-lightbox-inner { position:relative; display:grid; grid-template-rows:minmax(0,1fr) 56px; width:min(88vw,480px); height:min(82svh,680px); overflow:hidden; background:rgba(7,27,21,.82); box-shadow:0 24px 70px rgba(0,0,0,.45); }
.album-lightbox img { display:block; width:100%; height:100%; min-height:0; padding:48px 18px 14px; object-fit:contain; box-sizing:border-box; }
.album-lightbox img.is-switching { animation:lightboxImageIn .22s ease-out; }
@keyframes lightboxImageIn { from{opacity:.32;transform:scale(.992);} to{opacity:1;transform:scale(1);} }
.album-lightbox-close { position:absolute; z-index:3; right:10px; top:9px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(245,239,227,.48); border-radius:50%; color:var(--cream); background:rgba(7,27,21,.9); font-size:25px; font-weight:300; line-height:1; cursor:pointer; }
.album-lightbox-controls { display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center; padding:6px 12px; border-top:1px solid rgba(245,239,227,.16); background:rgba(4,18,14,.72); }
.album-lightbox-nav { display:grid; place-items:center; width:44px; height:44px; padding:0 0 3px; border:1px solid rgba(245,239,227,.38); border-radius:50%; color:var(--cream); background:transparent; font-size:30px; font-weight:300; line-height:1; cursor:pointer; transition:background-color .2s ease,border-color .2s ease; }
.album-lightbox-nav:hover { border-color:var(--rose-soft); background:rgba(239,111,164,.09); }
.album-lightbox-count { justify-self:center; color:var(--leaf); font-size:9px; font-weight:600; letter-spacing:.16em; }
.album-lightbox button:focus-visible { outline:2px solid var(--rose-soft); outline-offset:2px; }

/* Shared garden palette: page 1 anchors page 2 and page 3. */
.profile-layer .profile-sky { background:var(--sage); }
.profile-layer .profile-pink { background:var(--rose-soft); }
.profile-pink-tint {
  background:linear-gradient(180deg,rgba(220,104,139,0) 0%,rgba(220,104,139,.18) 22%,rgba(207,49,95,.68) 100%);
}
.profile-header,
.profile-note--left { color:var(--forest); }
.header-mark,
.profile-note > span,
.profile-hearts { color:var(--rose); }
.profile-note i { background:var(--rose); }
.profile-display {
  color:var(--cream);
  text-shadow:5px 5px 0 #6f873c;
}
.sticker--round {
  background:var(--forest-soft);
  box-shadow:0 0 0 5px var(--cream),0 0 0 7px var(--forest-soft);
}
.sticker--spark { color:var(--leaf); }
.profile-event span { color:var(--forest); }
.profile-marquee { background:var(--forest); }
.page-three-panels i { background:transparent; }

.gallery-page {
  color:var(--cream);
  background:var(--forest);
}
.gallery-page::before { background:var(--rose); opacity:.45; transform:translateX(var(--g-rose-x,34%)) scale(var(--g-rose-scale,.35)) rotate(var(--g-rose-rotate,16deg)); transform-origin:100% 0; }
.gallery-page::after { background:var(--leaf); opacity:.32; transform:translateX(var(--g-leaf-x,-30%)) scale(var(--g-leaf-scale,.3)); transform-origin:0 100%; }
.gallery-header > span,
.gallery-header h2 em { color:var(--rose-soft); }
.gallery-rsvp { border-color:rgba(245,239,227,.52); }
.gallery-rsvp b { color:var(--rose-soft); }

/* Page 2: a graduation invitation, presented as a printed card in a dark field. */
.profile-layer { background:transparent; }
.profile-layer .profile-sky { height:100%; opacity:var(--backdrop-opacity,0); background:var(--forest); }
.portrait-poster {
  position:absolute; z-index:4; left:6%; right:6%; top:4%; bottom:4%; overflow:hidden;
  color:var(--forest); background:radial-gradient(circle at 85% 20%,rgba(200,217,130,.22),transparent 25%),var(--cream); border:1px solid rgba(245,239,227,.9);
  box-shadow:0 24px 55px rgba(0,0,0,.38),inset 0 0 0 7px rgba(7,27,21,.07),inset 0 0 0 9px rgba(245,239,227,.75);
  opacity:var(--poster-opacity,0);
  transform:translateY(var(--poster-y,38px)) rotate(var(--poster-rotate,-3.5deg)) scale(var(--poster-scale,.84));
  transform-origin:center 60%;
}
.portrait-poster::before,.portrait-poster::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.portrait-poster::before { width:54%; aspect-ratio:1; right:-26%; top:8%; background:var(--leaf); opacity:.62; }
.portrait-poster::after { width:43%; aspect-ratio:1; left:-27%; bottom:9%; background:var(--rose); opacity:.44; }
.poster-header { position:absolute; z-index:2; top:6.5%; left:8%; right:8%; display:flex; justify-content:space-between; align-items:flex-start; color:var(--forest-soft); font-size:7px; font-weight:600; letter-spacing:.13em; }
.poster-header span:nth-child(2) { color:var(--rose); font-size:14px; line-height:.5; }
.poster-header span:last-child { text-align:right; }
.poster-title { position:absolute; z-index:1; left:8%; top:13%; color:var(--forest); font-family:"DM Serif Display",serif; line-height:.78; letter-spacing:-.055em; }
.poster-title span,.poster-title strong { display:block; font-size:clamp(39px,10.9cqw,61px); font-weight:400; }
.poster-title strong { color:var(--rose); font-style:italic; }
.poster-name { position:absolute; z-index:3; left:8%; bottom:17%; max-width:33%; }
.poster-name span,.poster-invite span { display:block; margin-bottom:6px; color:var(--rose); font-size:8px; font-weight:600; letter-spacing:.14em; }
.poster-name strong { display:block; font-family:"DM Serif Display",serif; font-size:clamp(23px,6.2cqw,34px); font-weight:400; line-height:.9; }
.poster-name i { display:block; width:32px; height:2px; margin:11px 0 8px; background:var(--forest); }
.poster-name p,.poster-invite p { margin:0; font-size:7px; font-weight:600; line-height:1.55; letter-spacing:.06em; }
.poster-invite { position:absolute; z-index:3; right:8%; bottom:20%; max-width:32%; text-align:right; }
.poster-footer { position:absolute; z-index:3; left:8%; right:8%; bottom:6%; display:flex; justify-content:space-between; align-items:center; padding-top:9px; border-top:1px solid rgba(7,27,21,.25); color:var(--forest); font-size:7px; font-weight:600; letter-spacing:.12em; }
.poster-footer i { color:var(--rose); font-size:16px; font-style:normal; }
.profile-cutout {
  position:absolute; z-index:8; left:var(--cutout-left,0%); right:var(--cutout-right,0%); top:var(--cutout-top,0%); bottom:var(--cutout-bottom,0%); opacity:var(--person-opacity,0);
}
.profile-cutout::before {
  content:""; position:absolute; inset:0; background:var(--cream);
  -webkit-mask:url("graduate-cutout.png") 50% 52% / cover no-repeat;
  mask:url("graduate-cutout.png") 50% 52% / cover no-repeat;
  opacity:var(--paper-opacity,0); filter:url(#torn-paper-edge);
}
.profile-cutout .profile-person {
  position:absolute; z-index:auto; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52%; opacity:1; transform:none; filter:none;
}
.paper-filter { position:absolute; width:0; height:0; overflow:hidden; }
.poster-index,.poster-caption,.poster-star { position:absolute; z-index:12; color:var(--cream); font-size:7px; font-weight:600; letter-spacing:.16em; }
.poster-index { left:2.2%; top:17%; writing-mode:vertical-rl; transform:rotate(180deg); }
.poster-caption { right:2.2%; bottom:14%; line-height:1.55; text-align:right; }
.poster-star { right:4.5%; top:20%; color:var(--leaf); font-size:28px; }
.portrait-poster .page-two-content { opacity:var(--content-opacity,0); }
.portrait-poster .poster-title { opacity:var(--title-opacity,0); transform:translateY(var(--title-y,28px)) scale(var(--title-scale,.92)); }
.portrait-poster .poster-header { opacity:var(--header-opacity,0); transform:translateY(var(--header-y,-14px)); }
.portrait-poster .poster-name { opacity:var(--left-opacity,0); transform:translateX(var(--left-x,-28px)); }
.portrait-poster .poster-invite { opacity:var(--right-opacity,0); transform:translateX(var(--right-x,28px)); }
.portrait-poster .poster-footer { opacity:var(--card-opacity,0); transform:translateY(var(--card-y,24px)); }
.poster-index,.poster-caption,.poster-star { opacity:var(--decor-opacity,0); transform:translateY(var(--decor-y,20px)); }