/* ═══════════════════════════════════════════════════════════ HAPPY BIRTHDAY NIGHTLEY · ivory & rose gold ═══════════════════════════════════════════════════════════ */ :root{ --ivory:#fbf7f2; --sand:#f3eae0; --oat:#eadfd1; --white:#fffdfa; --cocoa:#2a211c; --cocoa-2:#4a3c33; --mute:#8a7a6c; --rose:#b23a5b; --rose-lt:#d0708a; --blush:#e8c4c0; --blush-lt:#f6e2de; --gold:#c9a227; --gold-lt:#e3c76a; --gold-pale:#f0e2b8; --wine:#7d2039; --line:rgba(201,162,39,.32); --shadow:0 20px 50px rgba(94,64,44,.13); --shadow-lg:0 34px 80px rgba(94,64,44,.18); --disp:'Bricolage Grotesque',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif; --ui:'Space Grotesk',system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(20px,5vw,72px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} /* nothing may widen the page: aurora blobs sit at negative offsets, the dragon flies to 120vw, and the tilt transforms shove things sideways. Without this iOS shows a dead strip down the right and everything reads as if it's been pushed left. */ /* ONLY on . Putting overflow-x on makes body a scroll container (its overflow-y computes visible -> auto), which creates two nested scrollers and kills wheel/trackpad scrolling. `clip` keeps overflow-y visible, so stays the single normal document scroller. */ html{overflow-x:hidden} @supports (overflow:clip){ html{overflow-x:clip} } body{ margin:0; background:var(--ivory); color:var(--cocoa); font-family:var(--ui); font-size:clamp(15px,1.05vw,17px); line-height:1.65; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } body.locked{overflow:hidden; height:100%} img{max-width:100%; height:auto; display:block} button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent} [hidden]{display:none!important} ::selection{background:var(--blush); color:var(--wine)} /* ── paper grain + soft warm wash ───────────────────────── */ #glow{ position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(42vmax 42vmax at var(--gx,50%) var(--gy,28%), rgba(232,196,192,.38), transparent 64%), radial-gradient(38vmax 30vmax at 82% 78%, rgba(240,226,184,.34), transparent 66%); transition:background .5s linear; } body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); } #fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:90} #progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:80; background:rgba(42,33,28,.07)} #progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--rose))} .chrome-btn{ position:fixed; z-index:82; top:calc(16px + env(safe-area-inset-top)); right:16px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,253,250,.72); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:0 4px 16px rgba(94,64,44,.1); transition:.25s var(--ease); } .chrome-btn:active{transform:scale(.9)} .chrome-btn svg{width:19px; height:19px; fill:var(--rose); stroke:var(--rose); stroke-width:1.9; stroke-linecap:round} .chrome-btn svg .w{fill:none} .chrome-btn .off{display:none} body.muted .chrome-btn .on{display:none} body.muted .chrome-btn .off{display:block} body.muted .chrome-btn svg{fill:var(--mute); stroke:var(--mute)} /* ═══ 0 · GATE ═══════════════════════════════════════════ */ #gate{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:radial-gradient(80vmax 60vmax at 50% 34%,var(--white) 0%,var(--ivory) 42%,var(--sand) 100%); padding:var(--pad); text-align:center; transition:opacity .9s var(--ease), transform 1.1s var(--ease); } #gate.gone{opacity:0; transform:scale(1.06); pointer-events:none} .gate-inner{max-width:560px; animation:fadeUp 1.1s var(--ease) both; position:relative} .gate-candle{position:relative; width:34px; height:96px; margin:0 auto 34px} .gate-candle .stick{position:absolute; bottom:0; left:50%; translate:-50% 0; width:13px; height:58px; border-radius:3px; background:linear-gradient(var(--white),var(--blush-lt) 40%,var(--blush)); box-shadow:0 6px 18px rgba(178,58,91,.16)} .gate-candle .wick{position:absolute; bottom:58px; left:50%; translate:-50% 0; width:1.5px; height:8px; background:#6b564a} .gate-candle .flame{ position:absolute; bottom:64px; left:50%; width:19px; height:31px; background:radial-gradient(circle at 50% 76%,#fffbe8 0%,#ffd98a 34%,#e8952f 68%,rgba(178,58,91,0) 100%); border-radius:50% 50% 46% 46%/62% 62% 38% 38%; translate:-50% 0; transform-origin:50% 100%; animation:flick 1.6s infinite alternate ease-in-out; filter:drop-shadow(0 0 16px rgba(232,149,47,.55)); } @keyframes flick{ 0%{transform:scale(1,1) rotate(-2deg)} 35%{transform:scale(.94,1.08) rotate(2.5deg)} 70%{transform:scale(1.05,.95) rotate(-1.5deg)} 100%{transform:scale(.97,1.06) rotate(2deg)} } .gate-kicker{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:600} .gate-name{ font-family:var(--disp); font-weight:800; margin:0; font-size:clamp(2.9rem,13vw,6.2rem); letter-spacing:-.035em; line-height:.92; display:flex; justify-content:center; flex-wrap:wrap; color:var(--cocoa); } .gate-name span{animation:letterIn .9s var(--ease) both; animation-delay:calc(.25s + var(--i,0) * .06s)} .gate-name span:nth-child(1){--i:1}.gate-name span:nth-child(2){--i:2}.gate-name span:nth-child(3){--i:3} .gate-name span:nth-child(4){--i:4}.gate-name span:nth-child(5){--i:5}.gate-name span:nth-child(6){--i:6} .gate-name span:nth-child(7){--i:7}.gate-name span:nth-child(8){--i:8} @keyframes letterIn{from{opacity:0; transform:translateY(28px) scale(.88); filter:blur(6px)} to{opacity:1; transform:none; filter:none}} .gate-sub{color:var(--mute); margin:20px 0 32px; font-size:.95rem; font-family:var(--serif); font-style:italic; font-size:1.15rem} #enter{ position:relative; padding:15px 38px; border-radius:99px; font-weight:600; letter-spacing:.03em; font-size:.95rem; background:var(--rose); color:var(--white); box-shadow:0 10px 28px rgba(178,58,91,.3); transition:.3s var(--ease); } #enter:hover{background:var(--wine); box-shadow:0 14px 34px rgba(125,32,57,.34); transform:translateY(-2px)} #enter:active{transform:scale(.96)} #enter .arw{display:inline-block; margin-left:10px; transition:.3s var(--ease)} #enter:hover .arw{transform:translateX(5px)} .gate-hint{font-size:.7rem; color:var(--mute); margin-top:22px; letter-spacing:.09em} /* ═══ shared furniture ═══════════════════════════════════ */ #page{position:relative; z-index:2; opacity:0; transition:opacity .8s .15s ease} #page.in{opacity:1} .sec{position:relative; overflow:hidden; padding:clamp(90px,15vh,170px) var(--pad)} .wrap{max-width:1160px; margin:0 auto; position:relative; z-index:2} .wrap.narrow{max-width:800px} .wrap.center,.center{text-align:center} .kicker{ font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:600; display:flex; align-items:center; gap:12px; } .kicker::after{content:''; flex:1; height:1px; background:var(--line); max-width:120px} .center .kicker,.wrap.center .kicker{justify-content:center} .center .kicker::after{display:none} .h2{ font-family:var(--disp); font-weight:800; letter-spacing:-.04em; line-height:.96; font-size:clamp(2.3rem,6.8vw,4.4rem); margin:0 0 20px; color:var(--cocoa); } .h2.big{font-size:clamp(3rem,11vw,6.5rem)} .h2 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.005em; color:var(--rose)} .lede{color:var(--cocoa-2); max-width:52ch; margin:0 0 44px; font-size:clamp(.96rem,2.3vw,1.08rem)} .center .lede{margin-inline:auto} .btn-primary,.btn-ghost{ position:relative; padding:14px 30px; border-radius:99px; font-weight:600; font-size:.94rem; transition:.28s var(--ease); display:inline-flex; align-items:center; gap:10px; } .btn-primary{background:var(--rose); color:var(--white); box-shadow:0 10px 26px rgba(178,58,91,.26)} .btn-primary:hover{background:var(--wine); transform:translateY(-2px)} .btn-primary:active{transform:scale(.96)} .btn-primary:disabled{background:var(--oat); color:var(--mute); box-shadow:none; transform:none; cursor:default} .btn-ghost{border:1px solid var(--line); color:var(--cocoa-2); background:rgba(255,253,250,.6)} .btn-ghost:hover{border-color:var(--rose); color:var(--rose)} .btn-ghost:active{transform:scale(.96)} .rv{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)} .rv.seen{opacity:1; transform:none} /* ═══ 1 · HERO ═══════════════════════════════════════════ */ #hero{min-height:100svh; display:grid; align-items:center; padding-top:clamp(96px,14vh,150px)} .aurora{position:absolute; inset:0; z-index:0; filter:blur(80px); opacity:.5; pointer-events:none} .aurora i{position:absolute; border-radius:50%; display:block} .aurora i:nth-child(1){width:52vmax; height:52vmax; left:-18vmax; top:-16vmax; background:rgba(232,196,192,.6); animation:float1 21s infinite alternate ease-in-out} .aurora i:nth-child(2){width:40vmax; height:40vmax; right:-12vmax; top:18vmax; background:rgba(240,226,184,.55); animation:float2 25s infinite alternate ease-in-out} .aurora i:nth-child(3){width:34vmax; height:34vmax; left:28vmax; bottom:-16vmax; background:rgba(246,226,222,.5); animation:float1 29s infinite alternate-reverse ease-in-out} @keyframes float1{to{transform:translate3d(8vmax,6vmax,0) scale(1.18)}} @keyframes float2{to{transform:translate3d(-9vmax,4vmax,0) scale(1.12)}} .hero-grid{max-width:1160px; margin:0 auto; width:100%; display:grid; gap:clamp(34px,5vw,70px); grid-template-columns:1.06fr .94fr; align-items:center; position:relative; z-index:2} .eyebrow{display:flex; align-items:center; gap:10px; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); margin:0 0 22px; font-weight:500} .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--rose); animation:pulse 2s infinite} @keyframes pulse{50%{opacity:.3; transform:scale(.7)}} .mega{font-family:var(--disp); font-weight:800; margin:0; line-height:.88; letter-spacing:-.05em; color:var(--cocoa)} .mega .line{display:block; font-size:clamp(2.9rem,10vw,6rem); opacity:0; transform:translateY(50px); filter:blur(8px)} #page.in .mega .line{animation:megaIn 1.1s var(--ease) forwards} #page.in .mega .line[data-l="1"]{animation-delay:.18s} #page.in .mega .line[data-l="2"]{animation-delay:.32s} #page.in .mega .line[data-l="3"]{animation-delay:.46s} @keyframes megaIn{to{opacity:1; transform:none; filter:none}} .mega .ital{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.015em; font-size:clamp(3rem,11vw,6.6rem); color:var(--rose); margin-left:.04em} .mega .grad{color:var(--cocoa)} .mega .grad::after{content:''; display:block; width:88px; height:1px; background:var(--gold); margin-top:26px} .hero-blurb{color:var(--cocoa-2); margin:30px 0 34px; font-size:clamp(.96rem,2.4vw,1.1rem); max-width:38ch} .hero-blurb b{color:var(--rose); font-weight:600} .hero-cta{display:flex; gap:12px; flex-wrap:wrap} .hero-photo{position:relative; justify-self:center; width:min(100%,500px)} .ph-frame{position:relative; border-radius:4px; overflow:clip; background:var(--white); padding:14px 14px 62px; rotate:-2deg; box-shadow:var(--shadow-lg)} .ph-frame img{border-radius:2px} .ph-tape{position:absolute; top:-14px; left:50%; translate:-50% 0; width:120px; height:30px; z-index:4; background:linear-gradient(160deg,rgba(240,226,184,.82),rgba(232,196,192,.7)); box-shadow:0 2px 8px rgba(94,64,44,.14); rotate:-3.5deg} .ph-tape::before,.ph-tape::after{content:''; position:absolute; top:0; bottom:0; width:4px; background:repeating-linear-gradient(#0000 0 3px,rgba(94,64,44,.14) 3px 4px)} .ph-tape::before{left:0} .ph-tape::after{right:0} .ph-badge{position:absolute; bottom:20px; left:50%; translate:-50% 0; z-index:3; rotate:-2deg; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--mute)} .ph-badge::before{content:'“'} .ph-badge::after{content:'”'} .scroll-cue{position:absolute; bottom:30px; left:50%; translate:-50% 0; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); display:grid; justify-items:center; gap:10px; z-index:3} .scroll-cue span{width:1px; height:40px; background:linear-gradient(var(--gold),transparent); animation:cue 2.2s infinite} @keyframes cue{0%{opacity:0; transform:scaleY(.2)}40%{opacity:1}100%{opacity:0; transform:scaleY(1) translateY(14px)}} .tap-hint{position:absolute; bottom:30px; right:var(--pad); font-size:.68rem; color:var(--mute); letter-spacing:.12em; animation:fadeUp 1s 2.4s both; z-index:3} @keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}} @media(max-width:820px){ /* headline first — it's the first thing she should see, not the photo */ #hero{min-height:100svh; padding-top:clamp(96px,13vh,130px); padding-bottom:clamp(56px,9vh,90px)} .hero-grid{grid-template-columns:1fr; text-align:center; gap:clamp(26px,5vw,40px)} .hero-type{order:1} .hero-photo{order:2; width:min(86%,380px)} .eyebrow,.hero-cta{justify-content:center} .eyebrow{font-size:.6rem; letter-spacing:.2em; margin-bottom:16px} .hero-blurb{margin:22px auto 26px; font-size:.92rem; max-width:32ch} .mega .grad::after{margin:20px auto 0} .mega{line-height:.92} .scroll-cue,.tap-hint{display:none} .ph-badge{font-size:.92rem} .ph-frame{padding:10px 10px 46px} } /* ═══ 2 · CANDLES ════════════════════════════════════════ */ #candles{background:linear-gradient(180deg,transparent,var(--sand) 26%,var(--sand) 74%,transparent)} #candles::before{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(44vmax 30vmax at 50% 54%,rgba(232,149,47,.16),transparent 70%); transition:opacity 1.2s ease; opacity:1} #candles.dark::before{opacity:0} #candles.dark{filter:saturate(.6) brightness(.96); transition:filter 1s ease} .cake-stage{position:relative; height:300px; display:grid; place-items:end center; margin:36px 0 12px} .cake{position:relative; width:224px} .cake-glow{position:absolute; bottom:66px; left:50%; translate:-50% 0; width:320px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(232,149,47,.3),transparent 68%); filter:blur(24px); transition:opacity .8s ease; pointer-events:none} #candles.dark .cake-glow{opacity:0} .tier{border-radius:6px 6px 4px 4px; position:relative; margin:0 auto; box-shadow:inset 0 -10px 20px rgba(94,64,44,.07)} .t1{width:122px; height:44px; background:linear-gradient(var(--blush-lt),var(--blush))} .t2{width:176px; height:52px; background:linear-gradient(#fdf3e6,var(--oat))} .t3{width:224px; height:60px; background:linear-gradient(var(--blush-lt),#e5b9b4)} .drip{position:absolute; left:0; right:0; top:-7px; height:16px; background:var(--white); -webkit-mask:radial-gradient(9px 12px at 9px 0,#000 98%,transparent) repeat-x; mask:radial-gradient(9px 12px at 9px 0,#000 98%,transparent) repeat-x; -webkit-mask-size:26px 16px; mask-size:26px 16px} .plate{width:270px; height:11px; border-radius:0 0 30px 30px; margin:0 auto; background:linear-gradient(var(--gold-pale),#d8c48f); box-shadow:0 14px 34px rgba(94,64,44,.18)} .candles-row{display:flex; justify-content:center; gap:var(--cgap,13px); align-items:flex-end; margin-bottom:2px} .candle{position:relative; width:var(--cw,8px); height:42px; border-radius:3px; background:repeating-linear-gradient(45deg,var(--white) 0 4px,var(--rose-lt) 4px 8px); box-shadow:inset -2px 0 0 rgba(94,64,44,.08)} .candle .fl{ position:absolute; bottom:100%; left:50%; width:var(--cfl,12px); height:calc(var(--cfl,12px) * 1.68); translate:-50% -3px; background:radial-gradient(circle at 50% 78%,#fffbe8 0%,#ffd07a 34%,#e8952f 70%,rgba(232,149,47,0) 100%); border-radius:50% 50% 46% 46%/62% 62% 38% 38%; transform-origin:50% 100%; filter:drop-shadow(0 0 9px rgba(232,149,47,.75)); animation:flick 1.4s infinite alternate ease-in-out; transition:opacity .3s ease, transform .25s ease; } .candle.out .fl{opacity:0; transform:translate(-50%,6px) scale(.2)} .candle .smoke{position:absolute; bottom:100%; left:50%; width:7px; height:7px; border-radius:50%; background:rgba(138,122,108,.4); translate:-50% 0; opacity:0; pointer-events:none} .candle.out .smoke{animation:smoke 1.6s ease-out forwards} @keyframes smoke{0%{opacity:.6; transform:translate(-50%,0) scale(.5)} 100%{opacity:0; transform:translate(-50%,-70px) scale(3.4)}} .breath{width:min(320px,80%); height:6px; border-radius:99px; margin:26px auto 8px; background:rgba(94,64,44,.1); overflow:hidden} .breath i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--rose)); transition:width .08s linear} .breath-label{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--rose); margin:0 0 20px; font-weight:600; animation:pulse 1.1s infinite} .cake-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px} .mic-note{font-size:.74rem; color:var(--mute); max-width:44ch; margin:20px auto 0; line-height:1.6} .wish-burst{position:fixed; inset:0; z-index:95; display:grid; place-items:center; pointer-events:none; background:rgba(251,247,242,.93); backdrop-filter:blur(8px); animation:wishIn 2.6s var(--ease) forwards} .wish-burst p{font-family:var(--serif); font-style:italic; font-size:clamp(3rem,15vw,8rem); line-height:.92; letter-spacing:-.02em; text-align:center; margin:0; color:var(--rose)} @keyframes wishIn{0%{opacity:0} 14%{opacity:1} 72%{opacity:1} 100%{opacity:0}} /* ═══ 3 · PASSPORT ═══════════════════════════════════════ */ .passport{display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:1060px; margin:0 auto; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line)} .pp-page{background:var(--white); color:var(--cocoa); padding:clamp(22px,2.6vw,36px) clamp(20px,2.4vw,34px); position:relative} .pp-left{border-right:1px dashed rgba(201,162,39,.4)} .pp-head{display:flex; justify-content:space-between; align-items:center; font-size:clamp(.56rem,.66vw,.68rem); letter-spacing:.26em; font-weight:700; color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:18px} .pp-chip{width:24px; height:18px; border-radius:3px; background:linear-gradient(135deg,var(--gold-lt),var(--gold))} .pp-body{display:grid; grid-template-columns:clamp(104px,11vw,140px) 1fr; gap:clamp(16px,2vw,24px)} .pp-photo{border:1px solid var(--line); border-radius:2px; overflow:hidden; height:clamp(138px,14vw,184px)} .pp-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:sepia(.14) contrast(1.02)} .pp-fields{margin:0; display:grid; gap:clamp(9px,1.1vw,14px); align-content:start} .pp-fields div{display:grid} .pp-fields dt{font-size:clamp(.48rem,.55vw,.58rem); letter-spacing:.2em; text-transform:uppercase; color:var(--mute)} .pp-fields dd{margin:0; font-weight:700; font-size:clamp(.78rem,.95vw,.95rem); letter-spacing:.05em; color:var(--cocoa)} .pp-mrz{font-family:ui-monospace,monospace; font-size:clamp(.48rem,.6vw,.62rem); letter-spacing:.07em; color:var(--mute); margin:20px 0 0; padding-top:12px; border-top:1px solid var(--line); word-break:break-all; line-height:1.8} .pp-right{display:flex; flex-direction:column; background:linear-gradient(160deg,var(--white),var(--ivory))} .pp-visas{font-size:clamp(.56rem,.66vw,.68rem); letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin:0 0 14px; font-weight:700} .stamps{position:relative; flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start} .stamp{ border:2px solid var(--stamp,var(--rose)); border-radius:4px; padding:clamp(9px,1.2vw,14px) 6px; text-align:center; color:var(--stamp,var(--rose)); opacity:0; transform:scale(2.2) rotate(var(--r,-8deg)); transition:opacity .1s linear, transform .4s cubic-bezier(.2,1.6,.4,1); line-height:1.2; } .stamp.hit{opacity:.88; transform:scale(1) rotate(var(--r,-8deg))} .stamp b{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(.78rem,.95vw,.98rem); letter-spacing:-.01em} .stamp span{display:block; font-size:clamp(.48rem,.58vw,.6rem); letter-spacing:.18em; font-weight:700; opacity:.8; margin-top:3px} .stamp i{display:block; font-family:var(--serif); font-style:italic; font-size:clamp(.64rem,.8vw,.82rem); margin-top:5px; opacity:.82} .s1{--stamp:#7d2039; --r:-9deg} .s2{--stamp:#a8752a; --r:6deg} .s3{--stamp:#5f6b4a; --r:-4deg} .s4{--stamp:#8e4a63; --r:8deg} .s5{--stamp:#b23a5b; --r:-6deg; grid-column:span 2; justify-self:center; width:58%} .seal{position:relative; width:clamp(106px,11vw,132px); height:clamp(106px,11vw,132px); margin:18px auto 0; display:grid; place-items:center; opacity:0; transform:scale(.3) rotate(-40deg); transition:.8s cubic-bezier(.2,1.5,.4,1)} .seal.hit{opacity:1; transform:scale(1) rotate(-7deg)} .seal-ring{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--gold),var(--gold-pale),var(--gold),#b08d1e,var(--gold)); -webkit-mask:radial-gradient(circle,transparent 41%,#000 42%); mask:radial-gradient(circle,transparent 41%,#000 42%); animation:spin 16s linear infinite} @keyframes spin{to{rotate:360deg}} .seal-txt{font-size:clamp(.48rem,.56vw,.58rem); font-weight:800; letter-spacing:.12em; text-align:center; color:#8a6d16; line-height:1.4} .seal-txt b{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(.78rem,.9vw,.92rem); letter-spacing:0} .pp-caption{text-align:center; color:var(--mute); font-size:.86rem; margin:32px auto 0; max-width:48ch} .pp-caption em{font-family:var(--serif); color:var(--rose)} @media(max-width:700px){ .passport{grid-template-columns:1fr; max-width:520px} .pp-body{grid-template-columns:112px 1fr; gap:16px} .pp-photo{height:146px} .pp-left{border-right:0; border-bottom:1px dashed rgba(201,162,39,.4)} .pp-mrz{font-size:.42rem} } /* ═══ 4 · DNA ════════════════════════════════════════════ */ #dna{background:linear-gradient(180deg,transparent,var(--blush-lt) 30%,var(--blush-lt) 72%,transparent)} #dna::before{content:''; position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; pointer-events:none; background:radial-gradient(56vmax 38vmax at 50% 56%,rgba(178,58,91,.2),transparent 72%)} #dna.hot::before{opacity:1} .lab{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4.5vw,64px); align-items:center; margin:16px 0 clamp(52px,7vw,80px)} .lab-photo{position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)} .scanline{position:absolute; left:0; right:0; height:2px; top:0; background:linear-gradient(90deg,transparent,var(--gold),var(--white),var(--gold),transparent); box-shadow:0 0 16px 3px rgba(201,162,39,.5); animation:scan 2.8s linear infinite} @keyframes scan{0%{top:-2%}100%{top:102%}} .reticle{position:absolute; inset:12px; border:1px solid rgba(201,162,39,.55); border-radius:4px; -webkit-mask:linear-gradient(#000 0 0) 0 0/22% 2px no-repeat,linear-gradient(#000 0 0) 100% 0/22% 2px no-repeat, linear-gradient(#000 0 0) 0 100%/22% 2px no-repeat,linear-gradient(#000 0 0) 100% 100%/22% 2px no-repeat, linear-gradient(#000 0 0) 0 0/2px 22% no-repeat,linear-gradient(#000 0 0) 100% 0/2px 22% no-repeat, linear-gradient(#000 0 0) 0 100%/2px 22% no-repeat,linear-gradient(#000 0 0) 100% 100%/2px 22% no-repeat; mask:linear-gradient(#000 0 0) 0 0/22% 2px no-repeat,linear-gradient(#000 0 0) 100% 0/22% 2px no-repeat, linear-gradient(#000 0 0) 0 100%/22% 2px no-repeat,linear-gradient(#000 0 0) 100% 100%/22% 2px no-repeat, linear-gradient(#000 0 0) 0 0/2px 22% no-repeat,linear-gradient(#000 0 0) 100% 0/2px 22% no-repeat, linear-gradient(#000 0 0) 0 100%/2px 22% no-repeat,linear-gradient(#000 0 0) 100% 100%/2px 22% no-repeat} .lab-readout{display:grid; gap:clamp(18px,2vw,26px)} .row{position:relative; display:grid; grid-template-columns:1fr auto; gap:6px; padding-bottom:12px; align-items:baseline} .row::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(94,64,44,.14)} .row span{font-size:clamp(.84rem,1vw,1rem); color:var(--cocoa-2); letter-spacing:.04em} .row .val{font-size:clamp(.88rem,1.05vw,1.05rem); font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums} .row .bar{position:absolute; left:0; bottom:0; height:1px; width:0; z-index:2; background:var(--gold); transition:width .1s linear} .hero-row{padding-bottom:16px} .hero-row span{font-size:clamp(1rem,1.25vw,1.24rem); color:var(--cocoa); font-weight:500} .hero-row .val{font-size:clamp(1.6rem,2.4vw,2.3rem); color:var(--rose); font-family:var(--disp); letter-spacing:-.02em} .hero-row .bar{height:3px; background:var(--rose)} .verdict{text-align:center; opacity:0; transform:scale(.86); transition:.8s cubic-bezier(.2,1.5,.4,1)} .verdict.hit{opacity:1; transform:none} .verdict-num{font-family:var(--disp); font-weight:800; font-size:clamp(4.4rem,19vw,10rem); line-height:.82; margin:0; letter-spacing:-.07em; color:var(--rose)} .verdict-num small{font-size:.3em; letter-spacing:-.02em; color:var(--gold)} .verdict-txt{font-family:var(--disp); font-weight:800; font-size:clamp(1.3rem,4.6vw,2.2rem); letter-spacing:-.03em; margin:10px 0 12px; color:var(--cocoa)} .verdict-txt span{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold)} .verdict-sub{color:var(--mute); font-size:.9rem; max-width:40ch; margin:0 auto} .lanterns{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1} .lantern{position:absolute; width:24px; height:32px; border-radius:48% 48% 44% 44%; background:radial-gradient(circle at 36% 30%,#d0708a,var(--rose) 52%,var(--wine)); box-shadow:0 6px 18px rgba(125,32,57,.28); opacity:0} .lantern::before{content:''; position:absolute; top:-16px; left:50%; width:1px; height:16px; background:rgba(201,162,39,.6)} .lantern::after{content:''; position:absolute; bottom:-7px; left:50%; translate:-50% 0; width:6px; height:9px; background:linear-gradient(var(--gold),transparent)} #dragon{position:absolute; left:0; width:min(440px,80vw); height:auto; z-index:3; opacity:0; pointer-events:none; filter:drop-shadow(0 6px 18px rgba(125,32,57,.28))} @media(max-width:760px){ .lab{grid-template-columns:1fr} } /* ═══ 5 · BLACK CARD ═════════════════════════════════════ */ .card-stage{display:grid; grid-template-columns:1fr auto; gap:clamp(28px,5vw,60px); align-items:center; justify-items:center; margin-top:20px} .cc{ position:relative; width:min(100%,420px); aspect-ratio:1.586; border-radius:14px; padding:22px; background:linear-gradient(140deg,#2c2521 0%,#16110e 48%,#332a24 100%); border:1px solid rgba(201,162,39,.4); color:var(--gold-pale); overflow:hidden; box-shadow:0 30px 70px rgba(94,64,44,.4), inset 0 1px 0 rgba(255,255,255,.07); display:flex; flex-direction:column; justify-content:space-between; transform-style:preserve-3d; user-select:none; } .cc::before{content:''; position:absolute; inset:0; opacity:.4; pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 8px)} .cc-sheen{position:absolute; top:-60%; left:-70%; width:70%; height:250%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(240,226,184,.28) 44%,rgba(201,162,39,.4) 52%,transparent); transform:rotate(16deg); animation:sheen 6s 1.4s infinite} @keyframes sheen{0%{left:-70%}18%{left:135%}100%{left:135%}} .cc-top{display:flex; justify-content:space-between; align-items:baseline; position:relative; z-index:2} .cc-brand{font-family:var(--disp); font-weight:800; letter-spacing:.16em; font-size:.88rem; color:var(--gold-lt)} .cc-tier{font-size:.48rem; letter-spacing:.26em; color:#8b8272} .cc-chip{position:absolute; top:56px; left:22px; width:40px; height:31px; border-radius:5px; z-index:2; background:linear-gradient(135deg,var(--gold-pale),var(--gold) 55%,var(--gold-lt)); display:grid; align-content:center; gap:3px; padding:5px} .cc-chip i{height:2px; background:rgba(70,52,10,.4); border-radius:2px} .cc-num{font-family:ui-monospace,monospace; font-size:clamp(.9rem,3.2vw,1.18rem); letter-spacing:.16em; margin:0; position:relative; z-index:2; color:#ddd2b6} .cc-bot{display:flex; gap:18px; position:relative; z-index:2; flex-wrap:wrap} .cc-bot small{display:block; font-size:.42rem; letter-spacing:.22em; text-transform:uppercase; color:#8b8272} .cc-bot b{font-size:.68rem; letter-spacing:.09em; color:var(--gold-pale); font-weight:600} .cc-tap{position:absolute; bottom:16px; right:20px; z-index:3; font-size:.52rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); border:1px solid rgba(201,162,39,.45); padding:4px 11px; border-radius:99px; animation:pulse 2.2s infinite} .cc.used .cc-tap{opacity:0} .receipt{width:min(100%,290px); background:var(--white); color:var(--cocoa); padding:22px 20px 26px; font-family:ui-monospace,monospace; font-size:.67rem; line-height:1.8; box-shadow:var(--shadow); transform-origin:top center; clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),94% 100%,88% calc(100% - 7px),82% 100%,76% calc(100% - 7px),70% 100%,64% calc(100% - 7px),58% 100%,52% calc(100% - 7px),46% 100%,40% calc(100% - 7px),34% 100%,28% calc(100% - 7px),22% 100%,16% calc(100% - 7px),10% 100%,4% calc(100% - 7px),0 100%); animation:print 1s var(--ease) both} @keyframes print{from{transform:scaleY(0); opacity:0}to{transform:scaleY(1); opacity:1}} .r-head{text-align:center; font-weight:700; letter-spacing:.12em; margin:0 0 16px; border-bottom:1px dashed var(--oat); padding-bottom:12px; color:var(--rose)} .r-head small{font-weight:400; letter-spacing:.04em; color:var(--mute); font-size:.85em} .r-line{display:flex; justify-content:space-between; gap:10px; color:var(--cocoa-2)} .r-line b{font-weight:700; white-space:nowrap; color:var(--cocoa)} .r-rule{border-top:1px dashed var(--oat); margin:12px 0} .r-total{font-weight:700; font-size:.78rem} .r-total b{color:var(--rose)} .r-foot{text-align:center; margin:16px 0 0; letter-spacing:.1em; color:var(--mute); font-size:.58rem} @media(max-width:780px){ .card-stage{grid-template-columns:1fr} } /* ═══ 6 · GALLERY ════════════════════════════════════════ */ #gallery{padding-bottom:clamp(70px,10vh,120px)} /* NB: #gallery.sec already supplies the horizontal padding — don't double it up here, it was costing a whole column. */ .gal{display:grid; gap:clamp(16px,2.4vw,32px); grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); max-width:1300px; margin:48px auto 0} .gal-card{position:relative; border-radius:4px; cursor:pointer; background:var(--white); padding:14px; display:flex; flex-direction:column; align-self:start; box-shadow:var(--shadow); opacity:0; transform:translateY(42px) rotate(var(--rot,0deg)); transition:opacity .9s var(--ease), transform .55s var(--ease), box-shadow .4s ease} .gal-card.seen{opacity:1; transform:translateY(0) rotate(var(--rot,0deg))} .gal-card:hover{transform:translateY(-6px) rotate(0deg) scale(1.015); box-shadow:var(--shadow-lg); z-index:3} .gal-card:active{transform:scale(.98) rotate(var(--rot,0deg))} .gal-card img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px} .gal-card.wide{grid-column:span 2} .gal-card.wide img{aspect-ratio:16/9} .gal-card figcaption{font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--mute); line-height:1.38; padding:16px 6px 8px; margin:0} .gal-card .no{position:absolute; top:20px; left:20px; font-size:.54rem; letter-spacing:.22em; font-weight:700; color:var(--white); background:rgba(42,33,28,.42); backdrop-filter:blur(6px); padding:4px 9px; border-radius:99px} @media(max-width:900px){ .gal{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .gal{grid-template-columns:1fr; gap:22px; max-width:520px} .gal-card{padding:11px} .gal-card.wide{grid-column:span 1} .gal-card figcaption{font-size:.98rem; padding:13px 4px 5px} } #lightbox{position:fixed; inset:0; z-index:110; background:rgba(42,33,28,.9); backdrop-filter:blur(14px); display:grid; place-items:center; padding:24px; animation:fadeUp .35s ease} #lightbox img{max-width:100%; max-height:82vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); border:8px solid var(--white)} #lb-cap{font-family:var(--serif); font-style:italic; color:var(--blush-lt); text-align:center; margin:18px 0 0; max-width:44ch} #lb-close{position:absolute; top:calc(16px + env(safe-area-inset-top)); right:18px; width:44px; height:44px; font-size:1.7rem; border-radius:50%; background:rgba(255,253,250,.16); color:var(--white); line-height:1} /* ═══ 7 · YAP ════════════════════════════════════════════ */ #yap{background:linear-gradient(180deg,transparent,var(--sand) 28%,var(--sand) 72%,transparent)} .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(18px,3vw,34px); margin:44px 0 40px} .stat{padding:0 8px; border-left:1px solid var(--line)} .stat:first-child{border-left:0} .stat b{display:block; font-family:var(--disp); font-weight:800; font-size:clamp(2.4rem,7.5vw,3.8rem); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--rose)} .stat small{display:block; color:var(--mute); font-size:.74rem; margin-top:10px; letter-spacing:.02em; line-height:1.45} .yapbar{position:relative; height:40px; border-radius:99px; background:rgba(94,64,44,.07); border:1px solid var(--line); overflow:hidden; display:grid; place-items:center} .yapbar i{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold-lt),var(--rose)); transition:width 2.4s var(--ease)} .yapbar span{position:relative; z-index:2; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--cocoa); mix-blend-mode:luminosity} .yap-note{color:var(--mute); font-size:.78rem; margin-top:18px; font-family:var(--serif); font-style:italic; font-size:.95rem} @media(max-width:560px){ .stat{border-left:0} } /* ═══ 8 · LETTER ═════════════════════════════════════════ */ #letter .wrap{display:grid; gap:32px} .letter-photo{width:min(360px,74%); margin:0 auto; background:var(--white); padding:14px 14px 46px; rotate:-2.5deg; box-shadow:var(--shadow-lg)} #letter .kicker{justify-content:center} #letter .kicker::after{display:none} .ltr{max-width:34em; margin:0 auto; font-family:var(--serif); font-size:clamp(1.2rem,3.2vw,1.62rem); line-height:1.68; color:var(--cocoa-2)} .ltr p{margin:0 0 1.1em; opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease)} .ltr p.seen{opacity:1; transform:none} .ltr em{font-style:italic; color:var(--rose)} .ltr .sig{font-family:var(--disp); font-weight:800; font-size:clamp(1.5rem,4.6vw,2.2rem); letter-spacing:-.04em; line-height:1.2; margin-top:1.3em; color:var(--cocoa)} .ltr .sig span{font-family:var(--serif); font-weight:400; font-style:italic; font-size:.66em; color:var(--rose)} /* ═══ 9 · FINALE ═════════════════════════════════════════ */ #finale{min-height:84svh; display:grid; align-content:center; background:radial-gradient(70vmax 50vmax at 50% 44%,var(--white),var(--ivory) 58%,var(--sand) 100%)} .btn-boom{position:relative; margin:26px auto 0; padding:22px 54px; border-radius:99px; font-weight:600; font-size:clamp(1rem,3.2vw,1.2rem); color:var(--white); letter-spacing:.03em; background:var(--rose); box-shadow:0 16px 44px rgba(178,58,91,.32); transition:transform .25s var(--ease), background .25s} .btn-boom:hover{background:var(--wine)} .btn-boom:active{transform:scale(.95)} .btn-boom .ring{position:absolute; inset:-8px; border-radius:99px; border:1px solid var(--rose); animation:ring 2.4s infinite; pointer-events:none} @keyframes ring{0%{transform:scale(1); opacity:.6}100%{transform:scale(1.2); opacity:0}} #finale .h2.big{transition:opacity .5s ease, transform .5s ease} #finale.done .h2.big,#finale.done .kicker{opacity:0; transform:translateY(-14px); pointer-events:none} .final-msg{margin-top:10px; animation:fadeUp 1s var(--ease) both} .final-msg h4{font-family:var(--disp); font-weight:800; font-size:clamp(2rem,8.5vw,4.6rem); line-height:.92; letter-spacing:-.05em; margin:0; color:var(--cocoa)} .final-msg h4 span{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--rose)} .purple{color:var(--gold); font-size:1.05rem; margin-top:22px; letter-spacing:.06em; font-family:var(--serif); font-style:italic; font-size:1.3rem} footer{text-align:center; margin-top:clamp(60px,10vh,110px); color:var(--mute); font-size:.74rem; letter-spacing:.08em} footer::before{content:''; display:block; width:60px; height:1px; background:var(--line); margin:0 auto 24px} .ft-small{font-size:.68rem; color:#a89786; margin-top:10px} /* ═══ reduced motion ═════════════════════════════════════ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important} .rv,.gal-card,.ltr p,.stamp,.seal,.verdict{opacity:1!important; transform:none!important; filter:none!important} }