/* Shared framing keeps the film and invitation aligned at every screen size. */
:root{--scene-width:406px;--scene-ratio:1.775462963}.hero,.cover{width:min(100%,var(--scene-width));height:auto;aspect-ratio:864/1534;min-height:0;margin:22px auto 65px;border-radius:12px;flex-shrink:0}.cover{margin-bottom:22px}.hero{background-size:100% 100%}.entrance{object-fit:fill}.cover:after{content:'';position:absolute;inset:0;z-index:3;background:url('assets/hero.webp') center/100% 100% no-repeat;opacity:0;pointer-events:none;transition:opacity .85s ease-in-out}.cover.handoff:after{opacity:1}.cover.handoff .skip{display:none}.hero-text{top:72%;opacity:0;transform:translateY(12px);transition:opacity 1s .3s,transform 1s .3s}.invitation-ready .hero-text{opacity:1;transform:none}.seal-group{top:24%;width:190px;height:330px}.cover-bottom{bottom:5%}.gate{transition:opacity .9s ease-in-out,visibility .9s}.gate.gone{visibility:visible}.gate.retired{visibility:hidden}.hero-sprig{bottom:-18px}.cover-top{top:4.3%}@media(max-width:600px){.hero,.cover{width:min(100%,var(--scene-width));height:auto;aspect-ratio:864/1534;min-height:0;margin:0 auto 35px;border-radius:0}.cover{margin-bottom:0}.gate{background:#e6e0d2 url('assets/paper.jpg') center/650px}.hero-text{top:72%}.cover-bottom{bottom:5%}.seal-group{top:22%;transform:translateX(-50%) scale(.9);transform-origin:center top}.opening .seal-group{transform:translateX(-50%) scale(1.2) rotate(12deg)}}@media(max-width:350px){.seal-group{transform:translateX(-50%) scale(.75)}.cover-names{font-size:22px;margin-bottom:12px}.cover-bottom small{font-size:8px;margin-top:10px}.hero h1{font-size:29px}}@media(prefers-reduced-motion:reduce){.cover:after,.hero-text,.gate{transition:none}}

html{scrollbar-gutter:stable}.gate{scrollbar-gutter:stable}.cover{translate:var(--frame-shift,0px) 0}

.gate{direction:ltr}.cover{direction:rtl}

.navigation-links{display:flex;justify-content:center;gap:30px;margin:24px 0 5px}.navigation-link{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;font-size:12px;color:#805c45;padding:12px 15px;border-radius:14px;transition:transform .2s,background .2s}.navigation-link svg{width:39px;height:42px;filter:drop-shadow(0 3px 3px #75563720)}.navigation-link:hover{transform:translateY(-3px);background:#fffaed80}.navigation-link:focus-visible{outline:2px solid #986044;outline-offset:3px}

.music-control{position:fixed;right:18px;bottom:18px;z-index:110;border:1px solid #bba57d80;border-radius:24px;background:#fffaf0ee;color:#8d654c;min-height:42px;padding:8px 14px;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .5s;box-shadow:0 3px 12px #6b4b2320;font:12px Tajawal,Arial,sans-serif}.music-control.available{opacity:1;visibility:visible}.music-symbol{font-size:22px;line-height:1}.music-control.playing .music-symbol{animation:music-pulse 1.4s ease-in-out infinite}.music-control:focus-visible{outline:2px solid #996a4b;outline-offset:3px}@keyframes music-pulse{50%{opacity:.5;transform:rotate(-10deg)}}@media(prefers-reduced-motion:reduce){.music-control.playing .music-symbol{animation:none}}

.youtube-song-panel{position:fixed;right:18px;bottom:70px;width:264px;z-index:111;background:#fff9ed;border:1px solid #c5ac87;border-radius:12px;padding:11px;box-shadow:0 8px 25px #503b3230;color:#805c45}.youtube-song-panel[hidden]{display:none}.song-heading{display:flex;align-items:center;justify-content:space-between;direction:ltr;gap:8px;font:10px Georgia,serif;margin-bottom:10px}.song-heading button{border:0;background:none;font:23px Arial;color:#805c45;cursor:pointer}.youtube-song-panel iframe{display:block;width:240px;height:200px;border:0}.youtube-song-panel .song-help{font-size:10px;line-height:1.7;margin:9px 0}.youtube-song-panel>a{font-size:10px;color:#805c45}@media(max-width:350px){.youtube-song-panel{right:8px}.music-control{right:8px}}