:root { --ink:#34283f; --paper:#fff7fa; --pink:#ff5c91; --hot:#ea3e78; --yellow:#ffe36d; --mint:#b9f3da; --line:#d9c7d1; --display:'Bricolage Grotesque',sans-serif; --body:'Be Vietnam Pro',sans-serif; --mono:'IBM Plex Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--body); }
body::before { content:''; position:fixed; inset:0; z-index:-2; background-image:radial-gradient(#e6cbd6 1px,transparent 1px); background-size:22px 22px; opacity:.38; }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(5px); pointer-events:none; }
.ambient-one { width:300px; height:300px; top:90px; right:-130px; background:#ff91b540; }
.ambient-two { width:240px; height:240px; left:-130px; top:55%; background:#ffe36d4a; }
.surprise-header, main, footer { width:min(1080px,calc(100% - 36px)); margin-inline:auto; }
.surprise-header { min-height:84px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--ink); }
.surprise-header a { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.surprise-header a>svg { width:31px; fill:var(--pink); }
.surprise-header strong,.surprise-header small { display:block; }
.surprise-header strong { font:650 .83rem/1.2 var(--display); }
.surprise-header small { margin-top:3px; color:#766978; font:500 .55rem/1 var(--mono); text-transform:uppercase; }
.live { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #91cdb4; border-radius:999px; background:#eafff5; color:#206e50; font:600 .61rem/1 var(--mono); }
.live i { width:7px; height:7px; border-radius:50%; background:#2aa36f; box-shadow:0 0 0 4px #2aa36f1f; }
main { padding:80px 0 50px; }
.hero { position:relative; max-width:900px; padding-bottom:56px; }
.overline { margin:0 0 16px; color:#7c6877; font:600 .66rem/1.4 var(--mono); letter-spacing:.1em; }
h1,h2 { margin:0; font-family:var(--display); letter-spacing:-.065em; }
h1 { max-width:900px; font-size:clamp(4.1rem,10vw,8.4rem); line-height:.78; }
h1 em { color:var(--pink); font-style:normal; }
.hero-copy { max-width:530px; margin:35px 0 0 36%; color:#6f6371; font-size:.92rem; line-height:1.7; }
.route { position:absolute; width:46%; right:0; bottom:5px; overflow:visible; fill:none; stroke:var(--hot); stroke-width:2; stroke-dasharray:7 7; }
.route circle { fill:var(--yellow); stroke:var(--ink); stroke-dasharray:none; }
.ticket { display:grid; grid-template-columns:105px 1fr; margin-top:28px; border:2px solid var(--ink); border-radius:28px; background:#fff; box-shadow:10px 11px 0 var(--ink); transform:rotate(-.6deg); }
.ticket-stub { display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:24px 13px; border-right:2px dashed var(--ink); background:var(--yellow); border-radius:25px 0 0 25px; }
.ticket-stub span { font:600 .54rem/1 var(--mono); writing-mode:vertical-rl; }
.ticket-stub strong { font:700 .68rem/1 var(--mono); writing-mode:vertical-rl; }
.ticket-main { position:relative; overflow:hidden; min-height:400px; padding:65px clamp(28px,7vw,90px); border-radius:0 25px 25px 0; }
.ticket-main::after { content:'GIFT'; position:absolute; right:-15px; bottom:-35px; color:#ff5c910d; font:750 10rem/1 var(--display); }
.gift-seal { position:absolute; top:38px; right:42px; width:84px; height:84px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--mint); transform:rotate(8deg); }
.gift-seal svg { width:42px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ticket-main h2,.reveal h2 { max-width:650px; font-size:clamp(3rem,7vw,6rem); line-height:.88; }
.ticket-main>p:not(.overline) { max-width:590px; margin:24px 0 32px; color:#736775; line-height:1.65; }
.ticket-main button,.reveal-actions button,.reveal-actions a { position:relative; z-index:1; min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:12px 22px; border:2px solid var(--ink); border-radius:14px; font:700 .82rem/1 var(--body); cursor:pointer; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.ticket-main button { background:var(--pink); color:#fff; box-shadow:5px 5px 0 var(--ink); }
.ticket-main button svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; }
.ticket-main button:hover,.reveal-actions button:hover,.reveal-actions a:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.reveal { display:grid; grid-template-columns:120px 1fr; gap:40px; margin-top:80px; padding:55px; border-radius:26px; background:var(--ink); color:#fff; animation:reveal-in .55s cubic-bezier(.2,.8,.2,1); }
.reveal-number { color:var(--yellow); font:750 5rem/1 var(--display); }
.reveal .overline { color:#d7c9d2; }
.reveal h2 { color:var(--yellow); }
.reveal>div>p:not(.overline) { max-width:680px; margin:22px 0 28px; color:#e8dce4; line-height:1.7; }
.reveal-actions { display:flex; gap:10px; flex-wrap:wrap; }
.reveal-actions button { background:var(--yellow); color:var(--ink); }
.reveal-actions a { background:transparent; color:#fff; border-color:#8e7c8a; }
.fine-print { display:grid; grid-template-columns:42px 1fr; margin-top:80px; border-top:1px solid var(--ink); }
.fine-print span,.fine-print p { margin:0; padding:18px 0; border-bottom:1px solid var(--line); }
.fine-print span { color:var(--pink); font:600 .62rem/1.5 var(--mono); }
.fine-print p { font-size:.78rem; }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px 0; border-top:1px solid var(--ink); font:500 .57rem/1.5 var(--mono); text-transform:uppercase; }
:focus-visible { outline:3px solid var(--hot); outline-offset:4px; }
@keyframes reveal-in { from { opacity:0; transform:translateY(28px) rotate(.5deg); } }
@media(max-width:650px){ .surprise-header { min-height:70px; }.live { font-size:.53rem; } main { padding-top:55px; } h1 { font-size:clamp(3.45rem,17vw,5.1rem); } .hero-copy { margin:28px 0 0; font-size:.82rem; } .route { width:60%; opacity:.45; } .ticket { grid-template-columns:54px 1fr; border-radius:22px; box-shadow:6px 7px 0 var(--ink); }.ticket-stub { padding:17px 7px; border-radius:19px 0 0 19px; }.ticket-main { min-height:390px; padding:92px 23px 38px; border-radius:0 19px 19px 0; }.gift-seal { width:60px;height:60px;top:22px;right:23px;}.gift-seal svg{width:30px}.ticket-main h2 { font-size:2.8rem; }.ticket-main button { width:100%; }.reveal { grid-template-columns:1fr; gap:12px; margin-top:60px; padding:30px 23px; }.reveal-number { font-size:3rem; }.reveal h2 { font-size:2.8rem; }.reveal-actions>* { width:100%; }.fine-print { margin-top:60px; } footer { display:block; } footer span { display:block; } footer span+span { margin-top:5px; } }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}*{animation:none!important;transition:none!important} }