html, body { background: #efe2cf; }
.opening { background: #efe2cf; }
.envelope-stage, .motion-stage, .unfold-stage {
  width: min(100vw, 390px, 56.3svh);
  height: auto;
  aspect-ratio: 720 / 1280;
  max-height: 100svh;
  inset: auto;
  top:50%;left:50%;transform:translate(-50%,-50%);
  position: absolute;
}
.envelope-stage img, .motion-stage video { width:100%; height:100%; object-fit:contain; }
.motion-stage video { visibility:visible; }
.unfold-stage { inset:auto; }
@media (min-width:700px) {
  .envelope-stage, .motion-stage, .unfold-stage { filter:drop-shadow(0 16px 25px #816a4f30); }
}
.destination {
  position: fixed;
  z-index: 6;
  inset: auto;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(100vw,390px,56.3svh);
  aspect-ratio:720/1280;
  min-height:0;
  opacity: 1;
  visibility: hidden;
  clip-path: circle(0% at 50% 43%);
  background: #efe2cf;
  color:#173b5d;
}
.destination h1 { color:#073d72; }
.destination h1 i,.destination .date { color:#315e85; }
.destination .place,.destination>p:first-of-type { color:#556678; }
.destination .rule { background:#9aafbd; }
.destination.visible {
  visibility: visible;
  animation: fromInside 1.35s cubic-bezier(.23,.72,.24,1) forwards;
}
@keyframes fromInside {
  0% { clip-path: circle(0% at 50% 43%); }
  100% { clip-path: circle(145% at 50% 43%); }
}
.destination.under-envelope { opacity:1;visibility:visible;animation:none;clip-path:none; }
.destination.under-envelope h1 { font-size:clamp(30px,7.5vw,42px);white-space:nowrap; }
.destination.under-envelope > p:first-of-type { margin:12px 0 10px; }
.destination.under-envelope .rule { margin:14px 0; }
.destination.under-envelope .date { font-size:11px; }
.destination.under-envelope .place { font-size:13px;margin-top:10px; }
.destination.under-envelope .music-credit { display:none; }
.destination.under-envelope::before { content:"";display:block;position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 32% 24% at 50% 52%,rgba(255,250,209,.7),rgba(255,214,113,.45) 36%,rgba(245,174,61,.15) 68%,transparent 100%);mix-blend-mode:screen;z-index:1;transform:scale(.22);animation:mouthGlow 2.1s cubic-bezier(.25,.7,.25,1) forwards; }
@keyframes mouthGlow { 0% { opacity:0;transform:scale(.22) } 24% { opacity:1;transform:scale(.75) } 60% { opacity:1;transform:scale(1.35) } 83% { opacity:.78;transform:scale(1.5) } 100% { opacity:0;transform:scale(1.55) } }
.destination.under-envelope > * { position:relative; }
.opening.playing { z-index:8;background:transparent; }
.opening.unfolding { z-index:8;background:transparent;pointer-events:none; }
.opening[hidden] { display:none; }
.opening.unfolding .envelope-stage,.opening.unfolding .motion-stage { visibility:hidden; }
.opening.unfolding .open-hit { display:none; }
.unfold-stage { position:absolute;inset:0;z-index:10;visibility:hidden;perspective:900px;pointer-events:none; }
.opening.unfolding .unfold-stage { visibility:visible; }
.unfold-piece { position:absolute;inset:0;background:url('assets/unfold-cream-gold-v2.webp') center / contain no-repeat;backface-visibility:hidden;will-change:transform,opacity,filter;filter:drop-shadow(0 5px 8px rgba(35,42,51,.27)); }
.unfold-top { clip-path:polygon(0 0,100% 0,50% 24%);transform-origin:50% 0; }
.unfold-left { clip-path:polygon(0 0,50% 54%,0 100%);transform-origin:0 50%; }
.unfold-right { clip-path:polygon(100% 0,100% 100%,50% 54%);transform-origin:100% 50%; }
.unfold-bottom { clip-path:polygon(0 100%,50% 54%,100% 100%);transform-origin:50% 100%; }
.opening.unfolding .unfold-top { animation:foldTop 1.95s cubic-bezier(.55,.02,.3,1) forwards; }
.opening.unfolding .unfold-left { animation:foldLeft 2.08s cubic-bezier(.55,.02,.3,1) both; }
.opening.unfolding .unfold-right { animation:foldRight 2.08s cubic-bezier(.55,.02,.3,1) both; }
.opening.unfolding .unfold-bottom { animation:foldBottom 2.12s cubic-bezier(.55,.02,.3,1) both; }
@keyframes foldTop { 52% { filter:drop-shadow(0 15px 17px rgba(35,42,51,.31)) brightness(.96);opacity:1; } 79% { opacity:1; } to { transform:rotateX(88deg);opacity:0;filter:brightness(.8); } }
@keyframes foldLeft { 52% { filter:drop-shadow(10px 8px 16px rgba(35,42,51,.27)) brightness(.94);opacity:1; } 79% { opacity:1; } to { transform:rotateY(-88deg);opacity:0;filter:brightness(.8); } }
@keyframes foldRight { 52% { filter:drop-shadow(-10px 8px 16px rgba(35,42,51,.27)) brightness(.94);opacity:1; } 79% { opacity:1; } to { transform:rotateY(88deg);opacity:0;filter:brightness(.8); } }
@keyframes foldBottom { 52% { filter:drop-shadow(0 -13px 15px rgba(35,42,51,.25)) brightness(.95);opacity:1; } 79% { opacity:1; } to { transform:rotateX(-88deg);opacity:0;filter:brightness(.8); } }
.replay { background:#07528c;color:#fff;border:1px solid #88b3d2; }
.music-credit { position:absolute!important;left:16px;bottom:18px;text-align:left;font:11px/1.5 Arial,sans-serif;color:#596775;max-width:70vw; }
.music-credit summary { cursor:pointer; }
.music-credit a { color:#315e85; }

.unfold-stage{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100vw,390px,56.3svh);aspect-ratio:720/1280;height:auto;}
.destination h1{font-size:clamp(30px,7.5vw,42px);white-space:nowrap;}
.destination>p:first-of-type{margin:12px 0 10px;}
.destination .rule{margin:14px 0;}
.destination .date{font-size:11px;}
.destination .place{font-size:13px;margin-top:10px;}
.destination.expanded{width:100vw;height:100dvh;aspect-ratio:auto;}
.destination.expanded h1{font-size:clamp(52px,14vw,94px);}
.expand{position:fixed;z-index:20;left:16px;bottom:16px;padding:10px 15px;border:1px solid #88b3d2;border-radius:999px;background:#07528c;color:white;font:400 11px Cinzel,serif;cursor:pointer;}
.expand[hidden]{display:none;}
@media(max-width:699px){.expand{display:none;}}
.open-cue{position:absolute;z-index:9;left:50%;top:calc(50% + min(25vw,100px,14.5svh));transform:translateX(-50%);color:#173b5d;font:500 13px/1.3 Cinzel,serif;letter-spacing:.08em;text-align:center;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #fff;}
.opening.playing .open-cue,.opening.unfolding .open-cue{display:none;}

/* The opened invitation stays inside the envelope's portrait frame. */
.destination{display:block;padding:0;overflow:hidden;box-shadow:0 10px 35px rgba(42,53,64,.14);}
.invite-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c2a56f transparent;background:#f4ead8;}
.destination.under-envelope .invite-scroll{overflow:hidden;}
.invite-section{position:relative;padding:68px 31px;text-align:center;background:#f4ead8;color:#284660;}
.invite-section h2{font:400 35px/1.12 Italiana,Georgia,serif;color:#163f66;margin:12px auto 22px;max-width:530px;}
.invite-section p{font:400 15px/1.65 Georgia,serif;margin:0 auto 18px;max-width:510px;}
.invite-section .section-kicker,.invite-hero .eyebrow{font:500 11px/1.4 Cinzel,serif;letter-spacing:.25em;color:#42647d;text-transform:uppercase;}
.invite-hero{min-height:100%;padding:40px 23px 30px;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;background:#f4ead8 url('assets/reference/paper.webp') center top/auto 55% no-repeat;color:#163f66;}
.invite-hero .eyebrow{margin:0 0 12px;}
.invite-hero .hebrew{font-size:14px;margin:0 0 16px;}
.destination .invite-hero h1{font:400 43px/.95 Italiana,Georgia,serif;color:#073d72;white-space:nowrap;margin:0;}
.invite-hero h1 i{font-family:Parisienne,cursive;font-weight:400;}
.invite-hero .hero-date{font:500 12px/1.5 Cinzel,serif;letter-spacing:.15em;color:#315e85;margin:18px 0 23px;}
.hero-photo{width:77%;max-width:300px;aspect-ratio:4/4.3;object-fit:cover;object-position:center 37%;border:8px solid #f8f0e2;box-shadow:0 9px 22px rgba(31,48,62,.18);}
.invite-hero .scroll-cue{font:400 11px/1.4 Cinzel,serif;letter-spacing:.09em;margin:23px 0 0;color:#637b89;}
.hebrew{font:400 23px/1.3 Georgia,serif;color:#af873f;}
.rose{width:125px;height:auto;display:block;margin:0 auto 18px;}
.invite-intro .signature{font:400 26px Parisienne,cursive;color:#b38a43;margin-top:25px;}
.countdown{background:#eadcc7;}
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:480px;margin:28px auto 0;}
.time-grid span{display:flex;flex-direction:column;gap:5px;}
.time-grid strong{font:400 29px Italiana,Georgia,serif;color:#173f63;}
.time-grid small{font:400 9px Cinzel,serif;letter-spacing:.03em;color:#4b6575;}
.schedule{background:#f7efe1;}
.schedule-day{max-width:430px;margin:32px auto;}
.schedule-day h3,.detail-card h3{font:400 26px Italiana,Georgia,serif;color:#ae8546;margin:0 0 16px;}
.schedule-day p{display:grid;grid-template-columns:55px 1fr;gap:10px;text-align:left;border-bottom:1px solid #cebca4;padding:10px 0;margin:0;}
.schedule-day time{font:500 12px Cinzel,serif;color:#315e85;}
.schedule-day span{font:400 14px Georgia,serif;}
.placeholder-note{font-size:11px!important;color:#687986;margin-top:24px!important;}
.location{padding-top:150px;background:#eadcc7;}
.floral-corner{position:absolute;width:125px;top:8px;left:50%;transform:translateX(-50%);height:125px;object-fit:contain;object-position:top;}
.details{background:#f7efe1;padding-top:150px;}
.floral-spray{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:180px;max-height:110px;object-fit:contain;}
.detail-card{margin:30px auto;border-top:1px solid #cdbb9b;padding-top:20px;max-width:440px;}
.rsvp{background:#eadcc7;}
.rsvp-pending{display:inline-block;padding:12px 17px;border:1px solid #a9844e;color:#284660;font:500 11px Cinzel,serif;letter-spacing:.1em;}
.invite-footer{padding:75px 26px 100px;background:#f4ead8;}
.invite-footer strong{font:400 38px Italiana,Georgia,serif;color:#173f63;}
.invite-footer .music-credit{position:static!important;max-width:none;margin:45px auto 0;color:#65717a;font:11px Arial,sans-serif;}
.destination.expanded .invite-scroll{width:100%;}
.destination.expanded .invite-hero{min-height:100dvh;}
.destination.expanded .invite-hero h1{font-size:clamp(52px,8vw,94px);}
.destination.expanded .hero-photo{max-width:390px;aspect-ratio:4/3.5;}
.destination.expanded .invite-section{padding-left:max(35px,calc((100vw - 760px)/2));padding-right:max(35px,calc((100vw - 760px)/2));}
@media(max-width:360px){.destination .invite-hero h1{font-size:38px}.invite-hero{padding-left:15px;padding-right:15px}.invite-section{padding-left:22px;padding-right:22px}}

/* Light stays attached to the wax and follows the opening edges. */
.closed-seal-glow{position:absolute;z-index:2;pointer-events:none;left:50%;top:50.4%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 38% 33%,rgba(255,250,203,.7),rgba(255,207,88,.35) 42%,transparent 72%);mix-blend-mode:screen;box-shadow:0 0 22px 10px rgba(255,206,95,.31),0 0 46px 15px rgba(242,173,61,.17);animation:sealBreath 3.4s ease-in-out infinite alternate;}
@keyframes sealBreath{to{opacity:.65;box-shadow:0 0 32px 13px rgba(255,214,109,.43),0 0 55px 19px rgba(242,173,61,.22)}}
.falling-roses{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.falling-roses img{position:absolute;top:-23%;width:48px;height:48px;object-fit:contain;opacity:0;filter:drop-shadow(0 3px 5px rgba(89,55,29,.15));animation:roseFall 12s linear infinite;}
.falling-roses img:nth-child(1){left:9%;animation-delay:0s;width:41px}.falling-roses img:nth-child(2){left:78%;animation-delay:3.1s;width:55px}.falling-roses img:nth-child(3){left:25%;animation-delay:6.4s;width:35px}.falling-roses img:nth-child(4){left:67%;animation-delay:9.2s;width:42px}
@keyframes roseFall{0%{transform:translate3d(-12px,0,0) rotate(-25deg);opacity:0}8%{opacity:.62}76%{opacity:.5}100%{transform:translate3d(32px,86vh,0) rotate(125deg);opacity:0}}
.invite-hero>*:not(.falling-roses){position:relative;z-index:2}
.reveal-on-scroll{opacity:0;transform:translateY(23px);transition:opacity .75s ease var(--reveal-delay,0ms),transform .75s cubic-bezier(.22,.8,.2,1) var(--reveal-delay,0ms)}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.closed-seal-glow,.falling-roses img{animation:none}.falling-roses{display:none}.reveal-on-scroll{opacity:1;transform:none;transition:none}}

/* Preserve the visible invitation at the handoff between the video and folding paper. */
.destination.visible{clip-path:none;animation:none;opacity:1;visibility:visible}
.opening.unfolding .motion-stage{visibility:visible;opacity:1;animation:hideMotion .26s ease-out forwards}
@keyframes hideMotion{to{opacity:0;visibility:hidden}}
.unfold-top{clip-path:polygon(0 0,100% 0,50% 54%)}
.opening.unfolding .unfold-piece{animation-delay:.12s}

/* Warm paper and gold replace the blue accents throughout the card. */
.destination,.invite-section,.invite-hero,.invite-scroll{color:#604a36}
.destination h1,.destination .invite-hero h1,.invite-section h2,.invite-footer strong{color:#6a432e}
.invite-section .section-kicker,.invite-hero .eyebrow,.invite-section .schedule-day time,.invite-hero .hero-date,.invite-hero .scroll-cue,.time-grid strong,.time-grid small,.invite-section p,.schedule-day span,.rsvp-pending{color:#70553c}
.invite-hero h1 i,.schedule-day h3,.detail-card h3,.hebrew,.invite-intro .signature{color:#ad7932}
.schedule-day p,.detail-card{border-color:#cfb68e}
.destination.expanded{background:#f4ead8}

/* A single, readable control dock stays close to the invitation on desktop. */
.invite-controls{position:fixed;z-index:20;bottom:18px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 16px);padding:8px;border:1px solid #d6bd96;border-radius:24px;background:rgba(247,237,219,.96);box-shadow:0 6px 24px rgba(67,43,19,.24)}
.invite-controls:has(>button:not([hidden])){visibility:visible}
.invite-controls:has(>button:not([hidden])) button{position:static;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:40px;padding:9px 14px;border:1px solid #a77b43;border-radius:17px;background:#80532c;color:#fff;font:600 12px/1.2 Georgia,serif;letter-spacing:0;cursor:pointer}
.invite-controls .music-toggle{width:40px;height:40px;padding:0!important;border-radius:50%!important;font:700 17px/1 Arial,sans-serif!important}
.invite-controls .replay,.invite-controls .expand{width:40px;height:40px;padding:0!important;border-radius:50%!important}
.invite-controls .replay svg,.invite-controls .expand svg{display:block;width:21px;height:21px}
.invite-controls .expand .collapse-icon{display:none}
body:has(.destination.expanded) .invite-controls .expand .expand-icon{display:none}
body:has(.destination.expanded) .invite-controls .expand .collapse-icon{display:block}
.invite-controls button[hidden]{display:none!important}
.invite-controls:not(:has(>button:not([hidden]))){display:none}
.invite-controls button:focus-visible{outline:3px solid #d9a849;outline-offset:2px}
@media(max-width:699px){.invite-controls .expand{display:none!important}.invite-controls{bottom:max(12px,env(safe-area-inset-bottom));gap:5px;padding:6px}.invite-controls:has(>button:not([hidden])) button{font-size:11px;padding:8px 10px}}

/* The first flap already rises in the video; only the remaining folds animate here. */
.unfold-top{display:none!important}
.hero-photo,.destination.expanded .hero-photo{aspect-ratio:1024/1408;object-fit:contain;object-position:center;border-color:#f8f0e2}

/* Keep the card's geometry stable while the remaining folds leave. */
.destination{height:min(100svh,693px,calc(100vw * 1.77778));aspect-ratio:auto;transition:width .9s cubic-bezier(.22,.72,.22,1),height .9s cubic-bezier(.22,.72,.22,1),box-shadow .9s ease}
.menu-toggle{position:absolute;z-index:18;top:15px;right:15px;width:40px;height:40px;padding:9px;border:1px solid #b88950;border-radius:4px;background:rgba(248,238,219,.94);box-shadow:0 3px 12px rgba(67,43,19,.18);cursor:pointer}
.destination.under-envelope>.menu-toggle,.destination.under-envelope>.section-menu{position:absolute}
.destination:not(.visible)>.menu-toggle,.destination:not(.visible)>.section-menu{visibility:hidden}
.menu-toggle span{display:block;width:20px;height:2px;margin:4px auto;border-radius:0;background:#80532c;transition:transform .35s,opacity .25s}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}.menu-open .menu-toggle span:nth-child(2){opacity:0}.menu-open .menu-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.section-menu{position:absolute;z-index:17;top:60px;right:14px;display:grid;gap:5px;width:178px;padding:10px;border:1px solid #d2b27d;border-radius:16px;background:rgba(248,238,219,.97);box-shadow:0 12px 28px rgba(67,43,19,.22);opacity:0;transform:translateY(-8px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .3s,transform .3s}
.menu-open .section-menu{opacity:1;transform:none;pointer-events:auto}.section-menu a{padding:9px 10px;border-radius:9px;color:#704b27;font:500 12px/1.2 Georgia,serif;text-decoration:none;text-align:left;transition:background .2s,color .2s}.section-menu a:hover,.section-menu a:focus-visible{background:#ead4ae;color:#4d2e1c;outline:none}
.destination.under-envelope .invite-scroll{overflow-y:auto;pointer-events:none;scrollbar-gutter:stable both-edges}
.invite-scroll{scrollbar-gutter:stable both-edges}
.destination.expanded{height:100dvh;box-shadow:none}
.destination .invite-hero h1{transition:font-size .9s cubic-bezier(.22,.72,.22,1)}

/* The photograph keeps its own proportions and the petals cross in front. */
.hero-photo,.destination.expanded .hero-photo{display:block;width:77%;max-width:300px;height:auto;aspect-ratio:auto;object-fit:contain}
.destination.expanded .hero-photo{max-width:390px}
.falling-roses{z-index:4}
.invite-hero>*:not(.falling-roses){z-index:2}
.open-cue{color:#80532c;text-shadow:0 1px 2px #f8f0e2}

/* A guided scroll with motion tied to the content. */
.invite-scroll{scroll-behavior:smooth}
.reading-progress{position:fixed;z-index:19;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#a86e2a,#f5d694,#9d6323);box-shadow:0 0 9px rgba(222,169,71,.6);pointer-events:none;transition:width .15s linear}
.photo-open{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.photo-open{overflow:visible;width:77%;max-width:300px;aspect-ratio:1192/1320;margin:0 auto;flex:none}
.photo-scene{position:relative;display:block;width:100%;height:100%;overflow:hidden;border:8px solid #f8f0e2;box-shadow:0 9px 22px rgba(31,48,62,.18)}
.photo-open .hero-photo,.destination.expanded .photo-open .hero-photo{display:block;width:100%;max-width:none;height:100%;margin:0;border:0;object-fit:cover;transform:none}
.destination.expanded .photo-open{max-width:390px}
.photo-open .hero-photo{margin:0 auto;transition:transform .7s ease,box-shadow .7s ease;transform:translateY(calc(var(--photo-shift,0px) * -.35))}
.photo-open:hover .hero-photo,.photo-open:focus-visible .hero-photo{transform:translateY(calc(var(--photo-shift,0px) * -.35)) scale(1.025);box-shadow:0 15px 32px rgba(70,44,22,.28)}
.photo-open .photo-label{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:15px;background:#f5ebd9e8;color:#704b27;font:600 11px Georgia,serif;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.photo-open:hover .photo-label,.photo-open:focus-visible .photo-label{opacity:1;transform:none}
.invite-hero .scroll-cue{display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;background:transparent;cursor:pointer;animation:cueFloat 2.8s ease-in-out infinite}
.scroll-cue span{font-size:18px;line-height:1}
@keyframes cueFloat{50%{transform:translateY(6px)}}
.invite-section:before{content:"";position:absolute;z-index:0;left:50%;top:0;width:74px;height:1px;background:linear-gradient(90deg,transparent,#b99050,transparent);transform:translateX(-50%) scaleX(.2);opacity:0;transition:transform 1.1s ease,opacity 1.1s ease}
.invite-section.entered:before{transform:translateX(-50%) scaleX(1);opacity:1}
.ornament-rose{transition:transform 1.2s ease,filter 1.2s ease;transform:translateY(24px) rotate(-12deg);filter:drop-shadow(0 0 0 transparent)}
.invite-intro.entered .ornament-rose{transform:translateY(0) rotate(7deg);filter:drop-shadow(0 8px 11px rgba(91,60,30,.2))}
.floral-corner,.floral-spray{opacity:.65;transition:opacity 1s ease,transform 1.3s ease}
.location.entered .floral-corner,.details.entered .floral-spray{opacity:1;transform:translateX(-50%) rotate(3deg)}
.schedule-day{transition:transform .5s ease,box-shadow .5s ease}
.schedule-day:hover{transform:translateY(-4px)}
.time-grid span{transition:transform .35s ease,color .35s ease}
.time-grid span:hover{transform:translateY(-5px)}
.photo-dialog{width:min(90vw,700px);max-height:92dvh;padding:9px;border:1px solid #c6a16b;background:#f7edda;box-shadow:0 20px 70px #321d12aa}
.photo-dialog::backdrop{background:rgba(33,22,15,.78);backdrop-filter:blur(7px)}
.photo-dialog[open]{animation:photoIn .45s cubic-bezier(.2,.75,.2,1) both}
.photo-dialog img{display:block;width:100%;max-height:calc(92dvh - 20px);object-fit:contain}
.photo-close{position:absolute;z-index:2;top:15px;right:15px;width:38px;height:38px;border:1px solid #a77b43;border-radius:50%;background:#f6ead9;color:#6a432e;font:30px/1 Georgia,serif;cursor:pointer}
@keyframes photoIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes seaGlint{0%,100%{transform:translateX(-18%);opacity:.2}48%{transform:translateX(20%);opacity:.72}72%{transform:translateX(5%);opacity:.4}}
@keyframes waterTide{0%,100%{transform:translateX(-4%) scaleY(.86);opacity:.35}50%{transform:translateX(5%) scaleY(1.08);opacity:.82}}
@media(prefers-reduced-motion:reduce){.invite-hero .scroll-cue{animation:none}.photo-open .hero-photo,.ornament-rose,.floral-corner,.floral-spray,.invite-section:before{transition:none}}

/* The floral relief catches a moving gold reflection before the opening. */
.envelope-stage{overflow:hidden}
.envelope-stage .floral-light{z-index:2;opacity:.42;mix-blend-mode:screen;filter:drop-shadow(0 0 8px #f9c75e);animation:floralPulse 5.5s ease-in-out infinite;pointer-events:none}
.envelope-stage:after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 25%,rgba(255,241,167,0) 37%,rgba(255,246,181,.8) 49%,rgba(255,201,76,.35) 53%,transparent 66%);mix-blend-mode:screen;mask-image:url('assets/floral-gold-strong.webp');mask-size:100% 100%;transform:translateX(-110%);animation:floralSweep 5.5s ease-in-out infinite}
.seal-spark{position:absolute;z-index:4;left:50%;top:50.4%;width:23%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:radial-gradient(circle at 37% 28%,rgba(255,255,229,.95),rgba(255,232,141,.7) 13%,transparent 54%);mix-blend-mode:screen;animation:sealFlash 3.1s ease-in-out infinite}
.closed-seal-glow{box-shadow:0 0 32px 13px rgba(255,213,102,.55),0 0 80px 27px rgba(243,174,52,.3)}
.opening.playing .closed-seal-glow{opacity:0;animation:none}
@keyframes floralPulse{0%,100%{opacity:.36;filter:drop-shadow(0 0 4px #d9a748)}50%{opacity:.86;filter:drop-shadow(0 0 13px #ffe08a)}}
@keyframes floralSweep{0%,15%{transform:translateX(-110%)}58%,100%{transform:translateX(110%)}}
@keyframes sealFlash{0%,100%{opacity:.48}45%{opacity:1}65%{opacity:.62}}

/* The itinerary draws its gold spine as the reader moves through each event. */
.schedule-timeline{position:relative;margin:38px auto 12px;max-width:460px;text-align:left}
.timeline-track{position:absolute;left:60px;top:38px;bottom:22px;width:2px;background:#d7c2a0}
.timeline-track span{display:block;width:100%;height:100%;transform:scaleY(var(--timeline-progress,0));transform-origin:top;background:linear-gradient(#d2a654,#f9dc8d,#a97732);box-shadow:0 0 12px 2px rgba(237,180,70,.65)}
.schedule-timeline .schedule-day{margin:0 0 35px}
.schedule-timeline .schedule-day h3{padding-left:80px;margin:0 0 12px}
.schedule-timeline .timeline-event{position:relative;display:grid;grid-template-columns:58px 1fr;gap:24px;border:0;min-height:74px;align-items:center;padding:12px 0;margin:0;opacity:.38;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),color .5s}
.schedule-timeline .timeline-event:before{content:"";position:absolute;left:54px;top:50%;width:14px;height:14px;border:2px solid #b98c4c;border-radius:50%;background:#f7efe1;transform:translateY(-50%) scale(.68);transition:transform .5s,background .5s,box-shadow .5s}
.schedule-timeline .timeline-event.event-active{opacity:1;transform:translateY(0)}
.schedule-timeline .timeline-event.event-active:before{transform:translateY(-50%) scale(1);background:#d7a64a;box-shadow:0 0 0 6px rgba(216,166,74,.16),0 0 17px #eabf68}
.schedule-timeline .timeline-event:nth-child(even) span{transform:translateX(12px);transition:transform .75s cubic-bezier(.2,.75,.2,1)}
.schedule-timeline .timeline-event.event-active span{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.envelope-stage .floral-light,.envelope-stage:after,.seal-spark{animation:none}.schedule-timeline .timeline-event{opacity:1;transform:none;transition:none}.timeline-track span{transform:none}}

.open-cue{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;animation:openCueFloat 2s ease-in-out infinite}
.open-arrow{position:relative;display:block;width:2px;height:27px;background:currentColor;box-shadow:0 0 8px rgba(255,214,141,.8)}
.open-arrow:before{content:"";position:absolute;top:0;left:50%;width:10px;height:10px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:translate(-50%,0) rotate(45deg)}
@keyframes openCueFloat{50%{transform:translate(-50%,-7px)}}
@media(prefers-reduced-motion:reduce){.open-cue{animation:none}}

/* The reference video provides the illumination; nothing glows over the card. */
.destination.under-envelope::before{display:none!important}
.destination.under-envelope{box-shadow:none}
.invite-controls:has(>button:not([hidden])) button{font-family:Cinzel,Georgia,serif;font-weight:500;letter-spacing:.035em}
.invite-controls .music-toggle{font-family:Arial,sans-serif!important}
@media(min-width:700px){
  .destination.expanded .invite-hero h1{display:flex;justify-content:center;align-items:baseline;gap:.13em;width:100%;max-width:none;font-size:clamp(45px,6.4vw,84px);white-space:nowrap}
  .destination.expanded .invite-hero h1 span{flex:none;text-align:center!important}
  .destination.expanded .invite-hero{background-position:calc(50% - 26px) top}
}

/* The video itself is transparent in the opening. The card stays behind the paper. */
.envelope-stage .floral-light,.envelope-stage::after{display:none!important}
.opening.unfolding .motion-stage{animation:hideMotion .55s ease-out forwards}
.opening.unfolding .unfold-piece{animation-delay:0s}
.falling-roses img{filter:saturate(1.5) contrast(1.2) drop-shadow(0 3px 5px rgba(89,55,29,.2))}
@keyframes roseFall{0%{transform:translate3d(-12px,0,0) rotate(-25deg);opacity:0}8%{opacity:1}76%{opacity:1}100%{transform:translate3d(32px,86vh,0) rotate(125deg);opacity:0}}
.invite-footer .hebrew{display:block;margin:9px auto 17px;max-width:100%;font-size:14px;line-height:1.45}
.invite-footer strong{display:block;margin:0 auto 14px;font-size:clamp(31px,8vw,38px);line-height:1.15}
.destination.under-envelope:not(.visible) .invite-hero>*{opacity:0}
.destination.visible .invite-hero>*{transition:opacity .8s ease}
.falling-roses img:nth-child(1){filter:hue-rotate(-25deg) saturate(2.8) brightness(.88) drop-shadow(0 3px 5px rgba(89,55,29,.25))}
.falling-roses img:nth-child(2){filter:hue-rotate(-42deg) saturate(1.7) brightness(1.1) drop-shadow(0 3px 5px rgba(89,55,29,.2))}
.falling-roses img:nth-child(3){filter:grayscale(1) brightness(1.65) contrast(.82) drop-shadow(0 3px 5px rgba(89,55,29,.18))}
.falling-roses img:nth-child(4){filter:hue-rotate(-25deg) saturate(3) brightness(.55) drop-shadow(0 3px 5px rgba(89,55,29,.28))}
.open-cue{top:calc(50% + min(31vw,128px,19svh));gap:7px}
.open-arrow{height:15px}
.opening.unfolding .motion-stage{animation:hideMotion .36s ease-out 1.02s forwards}
.opening.unfolding .unfold-top{display:none}
.opening.unfolding .unfold-left,.opening.unfolding .unfold-right,.opening.unfolding .unfold-bottom{animation-duration:1.68s}

/* All moving folds use a frame from the filmed envelope, with matching paper and flowers. */
.opening.unfolding .unfold-stage{visibility:visible}
.unfold-piece{background-image:url('assets/unfold-matched-v1.webp')}
.opening.unfolding .motion-stage{visibility:visible;clip-path:polygon(0 0,100% 0,100% 43%,50% 59%,0 43%);animation:hideMotion .36s ease-out .96s forwards}
.opening.unfolding .unfold-left,.opening.unfolding .unfold-right,.opening.unfolding .unfold-bottom{animation-duration:1.45s;animation-delay:0s}
.opening.unfolding .envelope-stage{visibility:hidden}
.opening.unfolding .motion-stage{clip-path:none;mask-image:url('assets/top-flap-mask-v1.webp');mask-size:100% 100%;mask-repeat:no-repeat}
.unfold-piece{background-image:url('assets/unfold-matched-v2.webp')}
.seal-spark,.closed-seal-glow{display:none!important}
@keyframes foldLeft{0%{transform:rotateY(0);opacity:1}25%{transform:rotateY(-16deg);opacity:1}75%{transform:rotateY(-70deg);opacity:.85}100%{transform:rotateY(-90deg);opacity:0}}
@keyframes foldRight{0%{transform:rotateY(0);opacity:1}25%{transform:rotateY(16deg);opacity:1}75%{transform:rotateY(70deg);opacity:.85}100%{transform:rotateY(90deg);opacity:0}}
@keyframes foldBottom{0%{transform:rotateX(0);opacity:1}25%{transform:rotateX(-16deg);opacity:1}75%{transform:rotateX(-70deg);opacity:.85}100%{transform:rotateX(-90deg);opacity:0}}

/* The invitation stays behind the filmed envelope; no added reveal or paper pieces. */
.destination.under-envelope.card-behind .invite-hero>*{opacity:1}
.motion-stage .real-flap{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none;backface-visibility:hidden;will-change:transform,opacity}
.opening.folding .motion-stage video{clip-path:polygon(0 0,100% 0,50% 54.6875%)}
.opening.folding .real-flap{visibility:visible}
.opening.folding .flap-left{transform-origin:0 50%;animation:openLeft 1.75s cubic-bezier(.3,.1,.3,1) forwards}
.opening.folding .flap-right{transform-origin:100% 50%;animation:openRight 1.75s cubic-bezier(.3,.1,.3,1) forwards}
.opening.folding .flap-bottom{transform-origin:50% 100%;animation:openBottom 1.75s cubic-bezier(.3,.1,.3,1) forwards}
@keyframes openLeft{0%{transform:rotateY(0);opacity:1}75%{opacity:1}100%{transform:rotateY(-89deg);opacity:0}}
@keyframes openRight{0%{transform:rotateY(0);opacity:1}75%{opacity:1}100%{transform:rotateY(89deg);opacity:0}}
@keyframes openBottom{0%{transform:rotateX(0);opacity:1}75%{opacity:1}100%{transform:rotateX(-89deg);opacity:0}}
.destination .invite-hero h1,.destination.expanded .invite-hero h1{gap:clamp(2px,1.2vw,8px)}
.destination .invite-hero h1 i{margin-inline:0}
@media(min-width:700px){.destination.expanded .invite-hero h1{gap:8px}}
@media(max-width:360px){.destination .invite-hero h1{gap:2px}}
.falling-roses img{width:34px;height:auto;filter:drop-shadow(0 2px 3px rgba(94,50,40,.16))!important;animation-name:petalFall;animation-duration:11s}
.falling-roses img{animation-play-state:paused}
.destination.under-envelope .falling-roses img,.destination.visible .falling-roses img{animation-play-state:running}
.falling-roses img:nth-child(1){width:30px;left:7%}
.falling-roses img:nth-child(2){width:37px;left:76%;animation-delay:2s}
.falling-roses img:nth-child(3){width:28px;left:31%;animation-delay:4.1s}
.falling-roses img:nth-child(4){width:34px;left:84%;animation-delay:6.2s}
.falling-roses img:nth-child(5){width:27px;left:18%;animation-delay:8s}
.falling-roses img:nth-child(6){width:32px;left:59%;animation-delay:9.7s}
@keyframes petalFall{0%{transform:translate3d(-15px,0,0) rotate(-28deg);opacity:0}8%{opacity:.94}76%{opacity:.94}100%{transform:translate3d(45px,94vh,0) rotate(220deg);opacity:0}}

/* Color direction from the couple's sunset photograph. */
.destination,.invite-scroll{background:#f7efe3}
.invite-hero{background-color:#f7efe3}
.invite-section{background:#f7efe3;color:#3f5260}
.invite-section:nth-of-type(even){background:#f4e9d9}
.invite-section h2,.destination h1,.destination .invite-hero h1,.invite-footer strong{color:#493c32}
.invite-hero .eyebrow,.section-kicker{color:#805f3e}
.hebrew,.invite-hero h1 i,.schedule-day h3,.detail-card h3,.invite-intro .signature{color:#af7e34}
.invite-hero .hero-date{color:#5b6870}
.menu-toggle{background:#f8f0e5;border-color:#b9945c}
.menu-toggle span{background:#856133}
.section-menu{background:#faf2e7;border-color:#caa76f}
.invite-controls:has(>button:not([hidden])) button{background:linear-gradient(125deg,#bd8840,#ebcb82 48%,#b47b31);border-color:#a77634;color:#30271f;box-shadow:0 3px 11px rgba(91,58,29,.22);font-weight:600}
.destination .invite-hero h1,.destination.expanded .invite-hero h1{gap:0}
.destination .invite-hero h1 i{margin-inline:-4px}
@media(min-width:700px){.destination.expanded .invite-hero h1{gap:0}}
.destination .invite-hero h1,
.destination.expanded .invite-hero h1{display:flex;align-items:baseline;justify-content:center;gap:clamp(8px,3vw,24px);width:100%;font-size:clamp(33px,10vw,43px);line-height:1.12;white-space:nowrap}
.destination .invite-hero h1 span{flex:none}
.destination .invite-hero h1 i{flex:none;margin-inline:2px}

.hebrew{font-family:'Noto Serif Hebrew',Georgia,serif;font-weight:400;letter-spacing:0;line-height:1.5}
@media(min-width:700px){.destination.expanded .invite-hero h1{font-size:clamp(45px,6.4vw,84px);gap:clamp(14px,2vw,32px)}}
@media(max-width:360px){.destination .invite-hero h1{font-size:clamp(29px,9vw,34px);gap:7px}}

/* Every fold is cut from the video's final frame. The wax belongs only to the top flap. */
.motion-stage{perspective:950px}
.opening.playing .motion-stage{z-index:7}
.motion-stage .top-flap-clean{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;visibility:hidden;pointer-events:none;transform-origin:50% 0;backface-visibility:hidden}
.opening.folding .motion-stage video{visibility:hidden}
.opening.folding .motion-stage .top-flap-clean{visibility:visible;animation:raiseTop 1.8s cubic-bezier(.3,.45,.55,1) forwards}
.opening.folding .flap-left{z-index:2}
.opening.folding .flap-right{z-index:2}
.opening.folding .flap-bottom{z-index:3}
.opening.folding .motion-stage::after{display:none}
@keyframes raiseTop{0%{transform:rotateX(0deg);opacity:1}94%{transform:rotateX(83deg);opacity:1}100%{transform:rotateX(89deg);opacity:0}}
@keyframes edgeLightFinal{0%{opacity:.55}45%{opacity:1}100%{opacity:0}}

/* Fill phone viewports and embedded phone previews, preserving one aspect ratio for all opening layers. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
 .opening .envelope-stage,.opening .motion-stage{width:max(100vw,56.25svh);height:max(100svh,177.777778vw);max-width:none;max-height:none;aspect-ratio:720/1280;top:50%;left:50%;inset-inline-end:auto;bottom:auto;transform:translate(-50%,-50%);filter:none}
 .destination,.destination.expanded{inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;transform:none;border-radius:0}
}