@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Kalam:wght@300&family=Manrope:wght@400;500&display=swap";:root{font-family:Manrope,sans-serif;color:#f1dfbf;background:#100d09;font-synthesis:none;color-scheme:dark;--gold:#d4ac6d;--serif:"Cormorant Garamond",Georgia,serif}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #ffe2a7;outline-offset:5px}button[hidden],[hidden]{display:none!important}button{touch-action:manipulation}h1,h2,p,figure{margin:0}.experience{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#16100b}.backdrop,.veil,.dust{position:absolute;inset:0;pointer-events:none}.backdrop{z-index:-4;background-size:cover;background-position:50% 55%;transform:scale(1.025);animation:arrive 2s ease-out;transition:filter 1.3s,transform 2s}.veil{z-index:-3;background:linear-gradient(180deg,rgba(12,10,8,.45),transparent 47%,rgba(10,8,5,.22) 70%,rgba(10,8,5,.92));transition:background 1s}.dust{z-index:8;opacity:.14;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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.38' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.sigil{position:absolute;top:max(22px,env(safe-area-inset-top));left:50%;transform:translate(-50%);text-align:center;z-index:3;color:var(--gold)}.seal{display:flex;justify-content:center;align-items:center;gap:8px;height:20px}.seal i{width:25px;height:1px;background:currentColor;opacity:.7}.seal span{font-size:22px;line-height:1}.glyphs{display:block;width:140px;height:35px;margin:3px auto}.arrival{position:absolute;inset:0;z-index:2}.arrival-copy{text-align:center;position:absolute;top:14.5%;width:100%}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:4px;line-height:1.9;font-weight:500;color:#e4c7a0}.arrival h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.5vh,43px);line-height:1.08;margin:29px 0 16px;text-shadow:0 2px 18px #28150966}.arrival h1 strong{display:block;font-size:clamp(64px,10.5vh,105px);font-weight:400;letter-spacing:1px}.promise{font-size:9px;letter-spacing:5px}.enter{position:absolute;bottom:11%;left:13%;width:74%;height:58px;border:1px solid #e5bc7a;border-radius:50px;background:linear-gradient(120deg,#14100cd9,#25190e99);font-family:var(--serif);font-size:23px;letter-spacing:7px;box-shadow:0 0 22px #d3983a10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s}.enter span{font-family:serif;font-size:17px;position:absolute;right:23px;top:18px;letter-spacing:0}.enter:hover{background:#4d321bbf;transform:translateY(-2px)}.gallery{position:absolute;inset:0;pointer-events:none;z-index:1}.photo{position:absolute;padding:6px 6px 3px;background:#cbb694;box-shadow:0 5px 17px #0008;transform:rotate(var(--rotation));width:29%;transition:top 1s,left 1s,right 1s,bottom 1s,width 1s,opacity .8s;overflow:hidden}.photo img{display:block;width:100%;height:clamp(63px,12vh,112px);object-fit:cover;filter:sepia(.2) saturate(.7)}.photo figcaption{font-family:Kalam,cursive;font-size:12px;color:#463722;text-align:center;white-space:nowrap;line-height:1.8}.photo-1{--rotation:-10deg;top:37%;left:-5%}.photo-2{--rotation:10deg;top:42%;right:-5%}.photo-3{--rotation:12deg;top:57%;left:-3%}.photo-4{--rotation:-9deg;top:62%;right:-3%}.photo-5,.photo-6{opacity:0;top:77%;left:34%;width:27%}.steps{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:15px;z-index:5}.steps span{width:6px;height:6px;border-radius:50%;background:#ac977870;transition:background .5s,box-shadow .5s}.steps .current{background:#fce8b6;box-shadow:0 0 10px #f3d99c88}.reveal{position:absolute;inset:0;z-index:2}.reveal-copy{position:absolute;top:13%;width:100%;text-align:center;padding:0 15px}.reveal-copy h2{font-family:var(--serif);font-size:clamp(27px,4.2vh,40px);font-weight:400;line-height:1.05;outline:none}.instruction{font-size:9px;letter-spacing:3px;margin-top:15px}.video-card{position:absolute;left:9%;top:34%;width:82%;height:39%;border:1px solid #dab987;border-radius:13px;overflow:hidden;box-shadow:0 8px 30px #0006;background:#3c281b}.poster{position:absolute;width:100%;height:100%;object-fit:cover}.poster-shade{position:absolute;inset:0;background:linear-gradient(transparent,#100b0433)}.scratch{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity 1s;z-index:3}.scratch.finished{opacity:0;pointer-events:none}.scratch-hint{position:absolute;bottom:12%;width:100%;text-align:center;z-index:4;pointer-events:none;color:#382710;text-shadow:0 1px 4px #ffe1a17a;transition:opacity .4s}.scratch-hint span{font-size:33px}.scratch-hint p{font-family:var(--serif);font-size:18px;margin-top:8px}.scratch-hint.touched{opacity:0}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#3a271d66;border:1.5px solid #f0d095;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;animation:fade 1s}.play svg{width:31px;margin-left:5px}.reveal-footer{position:absolute;bottom:6.5%;width:100%;text-align:center}.skip{font-size:11px;letter-spacing:1px;color:#d9c2a0;background:none;border:0;min-height:44px;padding:10px 20px}.birthday-sign{font-family:var(--serif);font-size:19px;letter-spacing:4px;animation:fade 1s}.birthday-sign .glyphs{height:24px;width:110px;margin-top:8px}.experience:not([data-step="0"]) .backdrop{filter:brightness(.32) saturate(.7);transform:scale(1.1)}.experience:not([data-step="0"]) .veil{background:linear-gradient(#09080755,#120e0755)}.experience:not([data-step="0"]) .photo{width:29%}.experience:not([data-step="0"]) .photo img{height:9vh}.experience:not([data-step="0"]) .photo-1{top:25%;left:2%;--rotation:9deg}.experience:not([data-step="0"]) .photo-2{top:25%;right:2%;--rotation:-9deg}.experience:not([data-step="0"]) .photo-3{top:71%;left:2%;--rotation:-10deg}.experience:not([data-step="0"]) .photo-4{top:72%;right:2%;--rotation:-7deg}.experience:not([data-step="0"]) .photo-5{opacity:1;top:73%;left:35%;--rotation:8deg}.experience:not([data-step="0"]) .photo-6{opacity:0}.player-dialog{position:fixed;inset:0;margin:auto;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#080705;color:#eedabd;overflow:hidden}.player-dialog::backdrop{background:#000}.player-dialog video{width:100%;height:100%;object-fit:contain}.close-player{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:48px;height:48px;border:1px solid #dbbd8366;border-radius:50%;background:#100b08b3;font-size:30px;z-index:5}.video-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(ellipse,#49321c,#100c08 70%)}.video-message p{font-family:var(--serif);font-size:36px;margin-bottom:20px}.video-message span{font-size:14px;color:#ceb893}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes arrive{0%{filter:brightness(.4);transform:scale(1.07)}to{filter:brightness(1);transform:scale(1.025)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(min-width:600px)and (min-height:600px){.experience{max-width:480px;margin:auto;box-shadow:0 0 120px #ad702922}body{background:radial-gradient(ellipse at 50% 50%,#332316,#100d09 70%)}}@media(max-height:650px){.sigil{top:10px}.sigil .glyphs{height:24px}.arrival-copy{top:14%}.arrival h1{margin-top:13px}.enter{height:48px;bottom:10%}.enter span{top:13px}.reveal-copy{top:13%}.instruction{margin-top:9px}.photo figcaption{font-size:10px}.birthday-sign{font-size:15px}.birthday-sign .glyphs{height:18px}.steps{bottom:13px}.scratch-hint p{font-size:15px}}@media(orientation:landscape)and (max-height:599px){.sigil{left:18%;top:8%}.arrival-copy{width:52%;top:25%}.arrival h1 strong{font-size:60px}.arrival .eyebrow{font-size:8px}.promise{display:none}.enter{left:10%;width:30%;bottom:8%}.photo-1{left:53%;top:10%;width:18%}.photo-2{right:6%;top:13%;width:18%}.photo-3{left:55%;top:53%;width:18%}.photo-4{right:3%;top:56%;width:18%}.reveal-copy{width:38%;top:30%}.reveal-copy h2{font-size:28px}.instruction{font-size:8px;letter-spacing:2px}.video-card{left:42%;width:48%;top:12%;height:70%}.experience:not([data-step="0"]) .gallery{opacity:.25}.reveal-footer{width:38%;bottom:12%}.steps{left:18%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-height:650px)and (orientation:portrait){.experience:not([data-step="0"]) .photo img{height:7vh}.reveal-footer{bottom:6%}}.sand-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}.photo figcaption{white-space:normal;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center;padding:3px 0;overflow-wrap:normal}@media(orientation:portrait){.experience[data-step="0"] .photo-1,.experience[data-step="0"] .photo-3{left:4%}.experience[data-step="0"] .photo-2,.experience[data-step="0"] .photo-4{right:4%}}@media(orientation:portrait){.experience:not([data-step="0"]) .photo-1,.experience:not([data-step="0"]) .photo-2{top:22%}.experience:not([data-step="0"]) .photo-1 img,.experience:not([data-step="0"]) .photo-2 img{height:6vh}}@media(orientation:portrait)and (max-height:650px){.experience:not([data-step="0"]) .photo-1 img,.experience:not([data-step="0"]) .photo-2 img{height:4vh}}.photo-1 img,.photo-4 img{object-position:center top}.poster{object-fit:cover;object-position:50% 52%;background:#17110c}