:root{--ink:#0a0807;--cream:#fff4e6;--gold:#e0b16e;--paper:#ead7bd;--shadow:0 28px 80px rgba(0,0,0,.5);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Montserrat",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--ink)}body{min-height:100vh;overflow-x:hidden;background:var(--ink);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}button{font:inherit}img{display:block;width:100%}.is-hidden{display:none!important}
.welcome{position:fixed;inset:0;z-index:100;display:grid;place-items:center;min-height:100dvh;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));overflow:hidden;background:linear-gradient(rgba(8,5,3,.48),rgba(8,5,3,.82)),url("../assets/img/9.jpg") center 36%/cover no-repeat;transition:opacity 1s ease,visibility 1s ease}.welcome.is-leaving{opacity:0;visibility:hidden}.welcome__shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,transparent 0 18%,rgba(8,5,3,.28) 54%,rgba(8,5,3,.78) 100%)}.welcome__content{position:relative;z-index:2;width:min(100%,650px);text-align:center;text-shadow:0 4px 22px rgba(0,0,0,.65);animation:welcomeIn 1.3s ease both}.eyebrow{color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.27em;text-transform:uppercase}.welcome h1{margin-top:20px;font-family:var(--serif);font-size:clamp(4.2rem,20vw,8rem);font-weight:600;line-height:.72}.birthday-number{margin:18px auto 4px;color:var(--gold);font-family:var(--serif);font-size:clamp(3rem,14vw,5.4rem);font-style:italic;line-height:1}.welcome__phrase{max-width:430px;margin:18px auto 28px;font-family:var(--serif);font-size:clamp(1.25rem,5vw,1.75rem);font-style:italic;line-height:1.3}.start-button,.restart-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:14px 28px;border:1px solid rgba(255,244,230,.7);border-radius:999px;background:rgba(12,8,5,.45);box-shadow:0 14px 40px rgba(0,0,0,.35);color:#fff;cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(10px);transition:.25s}.start-button:hover,.restart-button:hover{transform:translateY(-2px);background:rgba(224,177,110,.25)}.sound-message{margin-top:16px;color:rgba(255,255,255,.65);font-size:.62rem}.floating-controls{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:80}.round-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,6,5,.56);color:#fff;cursor:pointer;backdrop-filter:blur(12px)}
.experience>section{scroll-snap-align:start;scroll-snap-stop:always}.panel{position:relative;display:grid;place-items:center;min-height:100dvh;padding:calc(60px + env(safe-area-inset-top)) 24px calc(60px + env(safe-area-inset-bottom));overflow:hidden;text-align:center;background:radial-gradient(circle at center,rgba(224,177,110,.14),transparent 38%),linear-gradient(160deg,#080706,#1a110b 58%,#090706)}.opening-card__content,.closing-card__content{max-width:720px}.opening-card p,.closing-card p{margin-bottom:18px;color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}.opening-card h2,.closing-card h2{font-family:var(--serif);font-size:clamp(2.8rem,11vw,5.8rem);font-weight:500;line-height:.98}.scroll-hint{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;display:flex;flex-direction:column;gap:5px;align-items:center;color:rgba(255,255,255,.55);font-size:.65rem;transform:translateX(-50%);animation:float 2s ease-in-out infinite}.scroll-hint i{color:var(--gold);font-size:1.4rem;font-style:normal}
.story-scene{position:relative;min-height:100dvh;overflow:hidden;background:#050403;isolation:isolate}.story-scene::before{content:"";position:absolute;inset:-42px;z-index:0;background-image:var(--scene-image);background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(30px) saturate(.92) brightness(.48);transform:scale(1.12);opacity:.95}.story-scene::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,4,3,.28),rgba(5,4,3,.04) 25%,rgba(5,4,3,.04) 75%,rgba(5,4,3,.28))}.story-scene__photo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0}.story-image{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1);filter:saturate(.98) contrast(1.03) brightness(.96);filter:drop-shadow(0 18px 45px rgba(0,0,0,.42));transition:transform 9s ease-out}.story-scene.is-visible .story-image{transform:scale(1.025)}.photo-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.74) 82%,rgba(5,4,3,.96) 100%)}.story-caption{position:absolute;right:0;bottom:0;left:0;z-index:3;max-width:820px;margin:auto;padding:42px 26px calc(50px + env(safe-area-inset-bottom));text-shadow:0 3px 20px rgba(0,0,0,.8)}.story-date{margin-bottom:10px;color:var(--gold);font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.story-caption h2{font-family:var(--serif);font-size:clamp(2rem,7vw,4.2rem);font-weight:500;line-height:1;text-wrap:balance}.photo-overlay--final{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.28) 44%,rgba(0,0,0,.86) 88%,#060403)}.final-message{position:absolute;right:0;bottom:0;left:0;z-index:4;max-width:820px;margin:auto;padding:42px 26px calc(52px + env(safe-area-inset-bottom));text-align:center;text-shadow:0 3px 20px rgba(0,0,0,.9)}.final-message p{color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.final-message h2{margin:9px 0 14px;font-family:var(--serif);font-size:clamp(3rem,12vw,6.2rem);font-weight:600;line-height:.86}.final-message span{display:block;max-width:650px;margin:auto;font-family:var(--serif);font-size:clamp(1.15rem,4.5vw,1.7rem);font-style:italic;line-height:1.35}.final-message strong{display:block;margin-top:18px;color:var(--gold);font-family:var(--serif);font-size:clamp(1.35rem,5vw,2rem)}
.closing-card ul{width:min(100%,620px);margin:30px auto 34px;list-style:none;text-align:left}.closing-card li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.82rem}.closing-card li span{color:rgba(255,255,255,.72)}.closing-card li b{color:var(--gold);text-align:right}.closing-card h2{font-size:clamp(2.7rem,11vw,5rem)}.restart-button{margin-top:30px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.reveal.is-visible{opacity:1;transform:none}.image-notice{position:fixed;right:16px;bottom:16px;left:16px;z-index:120;max-width:620px;margin:auto;padding:13px 16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(10,8,7,.92);color:#fff;font-size:.75rem;line-height:1.4;opacity:0;pointer-events:none;transform:translateY(18px);transition:.3s}.image-notice.is-visible{opacity:1;transform:none}
@keyframes welcomeIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translate(-50%,8px)}}
@media (orientation:portrait) and (max-width:720px){.story-scene::before{inset:-34px;filter:blur(25px) saturate(.9) brightness(.45)}.story-image{object-position:center}.story-scene[data-image="1"] .story-image{object-position:center}.story-scene[data-image="4"] .story-image{object-position:center}.story-scene[data-image="5"] .story-image{object-position:center}.story-scene[data-image="7"] .story-image{object-position:center}.final-scene .story-image{object-position:center 34%}.story-caption{padding-bottom:calc(42px + env(safe-area-inset-bottom))}.closing-card li{font-size:.74rem}.closing-card li b{max-width:42%}}
@media (min-width:900px){.story-image{width:min(100%,1400px)}.story-caption{padding-bottom:70px}.photo-overlay{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.08) 48%,rgba(0,0,0,.72) 86%,#050403)}.story-scene__photo{inset:0}.welcome__content{margin-top:40px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-image,.reveal,.welcome__content,.scroll-hint{transition:none!important;animation:none!important}.story-scene.is-visible .story-image{transform:scale(1)}}