:root { --d-night:#020817; --d-blue:#0c347b; --d-gold:#d9b457; --d-gold-soft:#f5dda2; --d-white:#f8f9fd; --d-muted:#9baac6; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-width:320px; min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--d-white); background:radial-gradient(circle at 72% 40%,#0c357b,transparent 38%),var(--d-night); font-family:Inter,"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.fpd-header { position:fixed; z-index:100; top:0; right:0; left:0; display:grid; min-height:74px; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 2rem; border-bottom:1px solid rgba(217,180,87,.18); background:rgba(2,8,23,.88); backdrop-filter:blur(18px); }
.fpd-brand { display:flex; align-items:center; gap:.65rem; color:inherit; text-decoration:none; }
.fpd-brand > span { position:relative; width:32px; height:32px; }
.fpd-brand > span::before,.fpd-brand > span::after { position:absolute; top:50%; left:50%; width:20px; height:20px; border:1px solid var(--d-gold); content:""; transform:translate(-50%,-50%) rotate(45deg); }
.fpd-brand > span::after { width:11px; height:11px; }
.fpd-brand b { font-size:.72rem; font-weight:950; letter-spacing:.14em; }
.fpd-brand small { display:block; margin-top:.2rem; color:var(--d-gold-soft); font-size:.44rem; letter-spacing:.28em; }
.fpd-header > p { color:#7786a5; font-size:.52rem; font-weight:900; letter-spacing:.16em; }
.fpd-header > div { display:flex; justify-content:flex-end; gap:.65rem; }
.fpd-header button { display:flex; min-height:38px; align-items:center; gap:.45rem; padding:0 .75rem; border:1px solid rgba(255,255,255,.13); color:#d3dced; background:rgba(255,255,255,.03); cursor:pointer; }
.fpd-header button span { color:var(--d-gold-soft); }
.fpd-header button b { font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; }
.fpd-header button[aria-pressed="true"] { border-color:var(--d-gold); }
.fpd-header > div > a { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.13); color:#fff; font-size:1.45rem; font-weight:250; text-decoration:none; }
.fpd-main { display:grid; min-height:100svh; grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr); align-items:center; gap:4vw; padding:8.5rem 5vw 4rem; }
.fpd-copy { max-width:700px; }
.fpd-kicker { margin:0 0 1rem; color:var(--d-gold-soft); font-size:.58rem; font-weight:900; letter-spacing:.18em; }
.fpd-copy h1 { margin:0; font-size:clamp(3rem,6vw,6.4rem); font-weight:950; line-height:.86; letter-spacing:-.075em; text-transform:uppercase; }
.fpd-copy h1 em { color:var(--d-gold-soft); font-style:normal; font-weight:300; }
.fpd-copy > p:not(.fpd-kicker) { max-width:580px; margin:1.5rem 0 2rem; color:var(--d-muted); line-height:1.7; }
.fpd-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.fpd-tabs button { position:relative; display:grid; min-height:115px; grid-template-columns:34px 1fr; align-content:center; padding:1rem; border:1px solid rgba(255,255,255,.12); color:#aab6cd; background:rgba(255,255,255,.025); cursor:pointer; text-align:left; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.fpd-tabs button:hover { transform:translateY(-2px); }
.fpd-tabs button[aria-selected="true"] { border-color:var(--d-gold); color:#fff; background:rgba(217,180,87,.075); }
.fpd-tabs button > span { grid-row:1/3; color:var(--d-gold-soft); font-size:.56rem; font-weight:900; letter-spacing:.1em; }
.fpd-tabs button b { font-size:.82rem; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; }
.fpd-tabs button small { grid-column:2; margin-top:.35rem; color:#7483a2; font-size:.59rem; line-height:1.4; }
.fpd-cta { display:inline-flex; min-height:52px; align-items:center; gap:1.4rem; padding:0 1.3rem; margin-top:1.2rem; color:#07102a; background:var(--d-gold); font-size:.62rem; font-weight:950; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.fpd-stage-wrap { position:relative; display:grid; place-items:center; }
.fpd-stage { position:relative; width:min(700px,100%); aspect-ratio:.82; overflow:hidden; border:12px solid #111c3a; background:#061431; box-shadow:0 55px 110px rgba(0,0,0,.5); perspective:1000px; }
.fpd-invite { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--d-gold-soft); background:radial-gradient(circle at 50% 30%,#154798,transparent 42%),#040e28; text-align:center; }
.fpd-invite::before { position:absolute; inset:7%; border:1px solid rgba(245,221,162,.32); border-radius:50% 50% 8px 8px; content:""; }
.fpd-invite > p { margin:0 0 2rem; font-size:.57rem; font-weight:900; letter-spacing:.18em; }
.fpd-invite h2 { margin:0; font-size:clamp(3rem,6vw,6.3rem); font-weight:850; line-height:.9; letter-spacing:-.085em; }
.fpd-invite h2 i { color:#fff; font-style:normal; font-weight:250; }
.fpd-invite > div { display:flex; align-items:center; gap:.75rem; margin:2rem 0; }
.fpd-invite > div > span { width:50px; height:1px; background:currentColor; opacity:.5; }
.fpd-invite > div > b { font-size:2.8rem; line-height:1; }
.fpd-invite > div > small { font-size:.55rem; font-weight:900; line-height:1.5; letter-spacing:.14em; text-align:left; }
.fpd-invite > strong { font-size:.58rem; letter-spacing:.18em; }
.fpd-scene { position:absolute; z-index:10; inset:0; display:none; overflow:hidden; pointer-events:none; }
.fpd-scene.is-active { display:block; pointer-events:auto; }
.fpd-scene > button[data-fpd-open] { position:absolute; z-index:30; top:50%; left:50%; display:grid; width:95px; height:95px; place-items:center; border:1px solid var(--d-gold); border-radius:50%; color:#07102a; background:var(--d-gold); cursor:pointer; font-size:.56rem; font-weight:950; letter-spacing:.09em; transform:translate(-50%,-50%); }
.fpd-scene > button i { position:absolute; width:116px; height:116px; border:1px solid rgba(217,180,87,.4); border-radius:50%; animation:fpd-pulse 2.3s infinite; }
.fpd-scene.is-open > button[data-fpd-open] { opacity:0; pointer-events:none; transition:opacity .3s ease; }
.fpd-door { position:absolute; top:0; bottom:0; width:50.5%; border:1px solid #806938; background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 24%),linear-gradient(145deg,#17366f,#05102b 72%); transition:transform 1.35s cubic-bezier(.7,0,.14,1); backface-visibility:hidden; }
.fpd-door::before { position:absolute; inset:7%; border:1px solid rgba(217,180,87,.42); content:""; }
.fpd-door span { position:absolute; top:50%; color:var(--d-gold-soft); font-size:.65rem; font-weight:950; letter-spacing:.14em; }
.fpd-door-left { left:0; transform-origin:left; }
.fpd-door-right { right:0; transform-origin:right; }
.fpd-door-left span { right:9%; }
.fpd-door-right span { left:9%; }
.fpd-door-scene.is-open .fpd-door-left { transform:rotateY(-110deg); }
.fpd-door-scene.is-open .fpd-door-right { transform:rotateY(110deg); }
.fpd-curtain-scene { background:transparent; }
.fpd-curtain { position:absolute; z-index:2; top:0; bottom:0; width:57%; background:repeating-linear-gradient(90deg,#12397d 0 20px,#071d4d 20px 40px,#17468f 40px 48px); filter:drop-shadow(0 0 24px rgba(0,0,0,.6)); transition:transform 1.45s cubic-bezier(.7,0,.14,1); }
.fpd-curtain-left { left:-7%; clip-path:polygon(0 0,100% 0,78% 100%,0 100%); }
.fpd-curtain-right { right:-7%; clip-path:polygon(0 0,100% 0,100% 100%,22% 100%); }
.fpd-curtain-scene.is-open .fpd-curtain-left { transform:translateX(-93%) scaleX(.45); }
.fpd-curtain-scene.is-open .fpd-curtain-right { transform:translateX(93%) scaleX(.45); }
.fpd-stage-lights { position:absolute; inset:0; display:flex; justify-content:space-around; pointer-events:none; }
.fpd-stage-lights i { width:22%; height:100%; opacity:.16; background:linear-gradient(rgba(245,221,162,.7),transparent 72%); clip-path:polygon(46% 0,54% 0,100% 100%,0 100%); transform-origin:top; transition:transform 1.2s ease,opacity 1s ease; }
.fpd-curtain-scene.is-open .fpd-stage-lights i:first-child { opacity:.35; transform:rotate(18deg); }
.fpd-curtain-scene.is-open .fpd-stage-lights i:nth-child(3) { opacity:.35; transform:rotate(-18deg); }
.fpd-paper-scene { display:none; background:transparent; }
.fpd-paper-scene.is-active { display:block; }
.fpd-paper { position:absolute; right:-14%; bottom:-7%; left:-14%; height:86%; border:1px solid rgba(255,255,255,.14); border-radius:50% 50% 0 0; transform-origin:50% 100%; transition:transform 1.4s cubic-bezier(.2,.84,.2,1),opacity 1.2s ease; }
.fpd-paper-sky { background:#1952aa; transform:scale(1.13); }
.fpd-paper-arch { bottom:-13%; background:#103778; transform:scale(.96); }
.fpd-paper-garden { bottom:-20%; background:#0a2658; transform:scale(.79); }
.fpd-paper-front { bottom:-29%; background:#d5af52; transform:scale(.62); }
.fpd-paper-scene.is-open .fpd-paper-sky { opacity:0; transform:translateY(105%) scale(1.35); }
.fpd-paper-scene.is-open .fpd-paper-arch { opacity:0; transform:translateY(110%) scale(1.15); }
.fpd-paper-scene.is-open .fpd-paper-garden { opacity:0; transform:translateY(115%) scale(.95); }
.fpd-paper-scene.is-open .fpd-paper-front { opacity:0; transform:translateY(120%) scale(.75); }
.fpd-scratch-scene { z-index:12; background:transparent; }
.fpd-scratch-scene canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; transition:opacity .5s ease; }
.fpd-scratch-scene > p { position:absolute; z-index:3; top:45%; right:0; left:0; color:#07102a; font-size:.67rem; font-weight:950; letter-spacing:.17em; text-align:center; pointer-events:none; }
.fpd-scratch-scene > button[data-fpd-reveal] { position:absolute; z-index:4; bottom:10%; left:50%; padding:.7rem 1rem; border:0; color:#07102a; background:var(--d-gold-soft); cursor:pointer; font-size:.55rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; transform:translateX(-50%); }
.fpd-scratch-scene.is-open { pointer-events:none; }
.fpd-scratch-scene.is-open canvas,.fpd-scratch-scene.is-open p,.fpd-scratch-scene.is-open button { opacity:0; }
.fpd-sound-bubble { position:absolute; z-index:35; right:1rem; bottom:1rem; display:flex; max-width:250px; align-items:center; gap:.55rem; padding:.65rem .75rem; border:1px solid rgba(255,255,255,.18); color:#cbd5e7; background:rgba(3,11,31,.72); backdrop-filter:blur(9px); pointer-events:none; }
.fpd-sound-bubble span { color:var(--d-gold-soft); }
.fpd-sound-bubble b { font-size:.51rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.fpd-replay { position:absolute; z-index:35; bottom:1rem; left:1rem; padding:.6rem .75rem; border:1px solid rgba(255,255,255,.16); color:var(--d-gold-soft); background:rgba(3,11,31,.7); cursor:pointer; font-size:.52rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.fpd-hint { color:#6d7c9c; font-size:.53rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.fpd-hint span { color:var(--d-gold-soft); }
@keyframes fpd-pulse { from { opacity:.7; transform:scale(.75); } to { opacity:0; transform:scale(1.28); } }
@media (max-width:1050px) { .fpd-main { grid-template-columns:1fr; padding-top:9rem; } .fpd-copy { max-width:none; } .fpd-stage-wrap { margin-top:2rem; } .fpd-stage { max-width:720px; } }
@media (max-width:650px) { .fpd-header { min-height:64px; grid-template-columns:1fr auto; padding:0 .8rem; } .fpd-header > p { display:none; } .fpd-header button b { display:none; } .fpd-main { padding:7.5rem 1rem 2rem; } .fpd-copy h1 { font-size:clamp(3.2rem,15vw,5rem); } .fpd-tabs { grid-template-columns:1fr; } .fpd-tabs button { min-height:95px; } .fpd-cta { width:100%; justify-content:space-between; } .fpd-stage { width:calc(100% + 2rem); aspect-ratio:.68; border-width:7px; } .fpd-invite h2 { font-size:3rem; } .fpd-sound-bubble { right:.6rem; bottom:.6rem; max-width:180px; } .fpd-replay { bottom:.6rem; left:.6rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }