/* Wedding stationery and the opening sequence. Loaded after the main theme. */
/* Keep scrolling available without visible scrollbar tracks or reserved space. */
html,body,body *{scrollbar-width:none;scrollbar-gutter:auto}
html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{display:none;width:0;height:0}
.fullscreen-exit{position:fixed;z-index:1400;bottom:max(12px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:44px;padding:5px;border:1px solid #fff8;border-radius:12px;background:#153d35c9;color:#fff;font:500 10px/1.2 var(--sans);cursor:pointer;opacity:.5;transition:opacity .2s,background .2s;backdrop-filter:blur(8px)}
.fullscreen-exit:hover,.fullscreen-exit:focus-visible{opacity:1;background:#153d35}
.fullscreen-exit:focus-visible{outline:2px solid #e8c372;outline-offset:3px}
#invitationGate{padding:24px;perspective:1600px;overflow:hidden;transition:opacity 1.1s ease,visibility 0s 1.1s}
#invitationGate .gate-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:64px 28px minmax(100px,1fr) 48px 122px 38px;gap:8px 42px;width:min(920px,100%);height:min(630px,calc(100dvh - 48px));min-height:0;max-height:none;padding:32px 64px 22px;border:1px solid #d1b77d;border-radius:7px;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#fffefa 0,transparent 65%),linear-gradient(135deg,#f9f4e6,#f0e5cc);box-shadow:0 32px 100px #001b17a8,0 0 0 6px #e7d6af22;transition:transform 1.1s cubic-bezier(.3,0,.2,1),opacity .9s ease,filter .9s ease;transform-origin:50% 75%}
#invitationGate .gate-card::before{content:"";position:absolute;z-index:-1;inset:13px;border:1px solid #bba16c88;border-radius:3px;pointer-events:none;background:url('/rice.svg') left 8px bottom 25px/90px 155px no-repeat,url('/rice.svg') right 8px bottom 25px/90px 155px no-repeat;opacity:.65}
#invitationGate .gate-card::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:31%;background:linear-gradient(151deg,transparent 49.6%,#c7ae7570 50%,transparent 50.4%) left top/50% 100% no-repeat,linear-gradient(-151deg,transparent 49.6%,#c7ae7570 50%,transparent 50.4%) right top/50% 100% no-repeat,linear-gradient(0deg,#eadcbfa6,transparent);clip-path:none;filter:none;transform:none}
#invitationGate .gate-content{display:contents}
#invitationGate .gate-content::before,#invitationGate .gate-content::after{display:none}
#invitationGate .gate-heading{position:relative;inset:auto;grid-column:1/-1;grid-row:1;margin:0;font:600 3.6rem/1.15 'Dancing Script',cursive;color:#94713b;white-space:nowrap;text-align:center;animation:invitation-heading-in 1.2s both}
#invitationGate .gate-heading::before,#invitationGate .gate-heading::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,#b99a60,transparent);margin:0 20px;vertical-align:middle;animation:none}
#invitationGate .gate-wedding-label{position:relative;z-index:3;grid-column:1;grid-row:2;text-align:center;text-transform:uppercase;font:500 .65rem/1.4 var(--sans);letter-spacing:.32em;color:#68766a;margin:0}
#invitationGate .monogram{position:absolute;top:36px;left:36px;display:grid;width:46px;height:46px;margin:0;border:1px solid #bea166;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f5e4b9,#dfc38a);color:#796035;box-shadow:inset 0 0 0 4px #f7e8c180,0 3px 8px #94713b1c;font-family:var(--serif);font-size:.8rem}
#invitationGate .gate-content>.eyebrow{display:none}
#invitationGate #gateTitle{position:relative;inset:auto;z-index:3;grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;max-width:100%;margin:0;padding:0;font-family:'iCiel BC Cubano',var(--serif);font-size:clamp(3.2rem,5.5vw,4.6rem);line-height:1.06;letter-spacing:-.015em;text-align:center;white-space:normal;overflow-wrap:normal}
#invitationGate #gateTitle .gate-person{display:block;max-width:100%;margin:0;font:inherit;line-height:inherit;vertical-align:baseline;transform-origin:center}
#invitationGate #gateTitle .gate-ampersand{margin:0;display:block;font:400 .38em/1 'Dancing Script',cursive;color:#b08e4f;vertical-align:baseline}
#invitationGate .gate-photo{position:relative;inset:auto;z-index:2;grid-column:2;grid-row:2/5;align-self:stretch;justify-self:stretch;width:100%;height:100%;min-height:0;border:7px solid #fffdf5;border-radius:140px 140px 5px 5px;background-position:center 40%;box-shadow:0 16px 30px #183c3526,0 0 0 1px #c6a86a77;transform:none;animation:wedding-portrait-breathe 6s ease-in-out infinite alternate}
#invitationGate .gate-photo-number{display:none}
#invitationGate .gate-photo-caption{display:block;inset:auto 15px 16px;font:500 .58rem/1.7 var(--sans);letter-spacing:.1em;color:#fffaf0;text-align:center;text-transform:uppercase}
#invitationGate .gate-date{position:relative;inset:auto;z-index:3;grid-column:1;grid-row:4;align-self:center;justify-self:center;margin:0;padding:9px 18px;background:transparent;border:0;border-top:1px solid #c6a86a88;border-bottom:1px solid #c6a86a88;border-radius:0;color:#4e655b;font-size:.78rem;letter-spacing:.19em}
#invitationGate .open-invitation{position:relative;inset:auto;z-index:9;grid-column:1/-1;grid-row:5;align-self:end;justify-self:center;width:96px;height:86px;margin:0;translate:none;transform:none;animation:none}
#invitationGate .open-gift{width:86px;height:82px}
#invitationGate .open-gift-tooltip{position:absolute;inset:-25px auto auto 50%;width:max-content;padding:9px 15px;border:1px solid #d6bd82;border-radius:20px;background:#fffdf7;transform:translateX(-50%);animation:wedding-tooltip-breathe 2.6s ease-in-out infinite;font:.75rem/1 var(--sans)}
#invitationGate .open-gift-tooltip::after{right:calc(50% - 5px);bottom:-5px;width:8px;height:8px;border:0;border-bottom:1px solid #d6bd82;border-right:1px solid #d6bd82;transform:rotate(45deg)}
#invitationGate .gate-sound{position:relative;inset:auto;z-index:10;grid-column:1/-1;grid-row:6;align-self:center;justify-self:center;translate:none;min-height:36px;width:auto;margin:0;padding:4px 14px;background:#fffdf775;color:#4d685c;border-color:#bfac803d;font-size:.66rem}
#invitationGate .gate-sound .music-bars{width:16px;height:16px}
#invitationGate .gate-sound{max-width:100%;min-width:0}
#invitationGate .gate-sound .music-bars{flex-shrink:0}
.gate-sound-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
#invitationGate .gate-sound[hidden]{display:none}
.gift-empty-note{margin:24px 0;color:var(--muted);font-size:.9rem;line-height:1.6}
#invitationGate.is-unwrapping .gate-card::after{animation:wedding-envelope-unfold .95s ease both;transform-origin:center bottom}
#invitationGate.is-unwrapping .gate-photo{animation:wedding-portrait-release 1s ease both}
#invitationGate .open-invitation.is-unwrapping .open-gift{animation:wedding-gift-pop .9s cubic-bezier(.2,.7,.2,1) both}
#invitationGate .open-invitation.is-unwrapping .open-gift-lid{animation:wedding-lid-release 1s cubic-bezier(.2,.7,.2,1) both}
#invitationGate .open-invitation.is-unwrapping .open-gift-bow{animation:wedding-lid-release 1s cubic-bezier(.2,.7,.2,1) both}
#invitationGate .open-invitation.is-unwrapping .open-gift-tooltip{opacity:0;transition:opacity .2s;animation:none}
#invitationGate .open-invitation.is-unwrapping::before{animation:wedding-gift-glow 1s ease-out both}
#invitationGate.is-opening{opacity:0;pointer-events:none;transition:opacity .6s ease,visibility 0s .6s}
#invitationGate.is-opening .gate-card{transform:translateY(-9vh) rotateX(16deg) scale(1.09);opacity:0;filter:blur(3px);transition:transform .9s ease,opacity .45s ease,filter .45s ease}
body.invitation-entering{background:#0b2923}
.invitation-entering #invitationPage:not(.has-arrived){animation:wedding-page-rise 1.6s cubic-bezier(.22,.65,.18,1) both;will-change:transform}
@keyframes wedding-page-rise{from{transform:translate3d(0,100vh,0)}to{transform:translate3d(0,0,0)}}
.invitation-celebration{position:fixed;inset:0;z-index:1100;overflow:hidden;pointer-events:none;contain:strict}
.invitation-bloom{position:absolute;left:var(--burst-x);top:var(--burst-y);width:110px;height:110px;margin:-55px;border-radius:50%;background:radial-gradient(circle,#fff9e1 0,#f4d887b0 22%,#f4d88700 68%);animation:wedding-light-bloom 2.3s ease-out both}
.invitation-particle{position:absolute;left:var(--burst-x);top:var(--burst-y);width:7px;height:13px;border-radius:2px;background:#d7b05e;animation:wedding-particle-flight 2.8s var(--delay) cubic-bezier(.12,.65,.2,1) both;will-change:transform,opacity}
.invitation-particle.is-petal{width:12px;height:19px;border-radius:90% 8% 75% 12%;background:linear-gradient(135deg,#fffef6,#f0dbb1);box-shadow:0 2px 5px #4d3b1820}
.invitation-particle:nth-child(4n){background:#f9edc0;width:5px;height:5px;border-radius:50%}
.invitation-entering .hero.is-ready .hero-title,.invitation-entering .hero.is-ready .hero-side{animation:wedding-hero-rise 1.7s .15s cubic-bezier(.16,1,.3,1) both}
.invitation-entering .hero.is-ready .hero-side{animation-delay:.4s}
.invitation-entering .hero.is-ready .hero-frame{animation:wedding-photo-reveal 1.9s .25s cubic-bezier(.16,1,.3,1) both}
.invitation-entering .hero.is-ready .hero-frame-2{animation-delay:.45s}
.invitation-entering .hero.is-ready .hero-frame-3{animation-delay:.65s}
@keyframes wedding-tooltip-breathe{50%{transform:translate(-50%,-4px)}}
@keyframes wedding-portrait-breathe{to{transform:translateY(-4px)}}
@keyframes wedding-portrait-release{to{transform:translateY(-12px);filter:brightness(1.15)}}
@keyframes wedding-envelope-unfold{to{transform:perspective(900px) rotateX(-65deg);opacity:0}}
@keyframes wedding-gift-pop{0%{transform:scale(1)}25%{transform:scale(1.1,.86)}48%{transform:translateY(-18px) scale(1.15)}100%{transform:translateY(12px) scale(.85);opacity:0}}
@keyframes wedding-lid-release{0%,22%{translate:0 0;rotate:0deg}65%{translate:22px -105px;rotate:25deg;opacity:1}100%{translate:40px -135px;rotate:40deg;opacity:0}}
@keyframes wedding-gift-glow{to{transform:scale(4);opacity:0}}
@keyframes wedding-light-bloom{0%{opacity:0;transform:scale(.3)}22%{opacity:.95}70%{opacity:.4}100%{opacity:0;transform:scale(18)}}
@keyframes wedding-particle-flight{0%{opacity:0;transform:translate(0,0) scale(.2)}8%{opacity:1}65%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + var(--fall))) rotate(calc(var(--turn) * 1.6)) scale(.55)}}
@keyframes wedding-hero-rise{from{opacity:0;translate:0 65px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes wedding-photo-reveal{from{opacity:0;translate:0 90px;scale:.88}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:700px) and (orientation:portrait){
  #invitationGate{padding:12px}
  #invitationGate .gate-card{width:100%;max-width:480px;height:min(850px,calc(100dvh - 24px));padding:22px 26px 14px;grid-template-columns:minmax(0,1fr);grid-template-rows:50px 22px auto minmax(65px,1fr) 36px 113px 36px;gap:9px}
  #invitationGate .gate-heading{grid-row:1;font-size:2.7rem}
  #invitationGate .gate-heading::before,#invitationGate .gate-heading::after{width:23px;margin-inline:11px}
  #invitationGate .monogram{display:none}
  #invitationGate .gate-wedding-label{grid-row:2;font-size:.59rem;letter-spacing:.26em}
  #invitationGate #gateTitle{grid-row:3;flex-direction:row;flex-wrap:wrap;gap:6px 10px;padding:4px 0;font-size:clamp(1.95rem,9.3vw,2.85rem);line-height:1.12}
  #invitationGate #gateTitle .gate-ampersand{font-size:.55em}
  #invitationGate .gate-photo{grid-column:1;grid-row:4;justify-self:center;width:min(82%,260px);height:100%;border-width:5px;border-radius:140px 140px 4px 4px}
  #invitationGate .gate-photo-caption{font-size:.45rem;bottom:9px;left:9px;right:9px;letter-spacing:.07em}
  #invitationGate .gate-date{grid-row:5;grid-column:1;font-size:.7rem;padding:5px 14px}
  #invitationGate .open-invitation{grid-row:6;height:80px;width:90px}
  #invitationGate .gate-sound{grid-row:7;min-height:36px;font-size:.64rem}
  #invitationGate .gate-card::before{background-size:55px 115px;background-position:left 3px bottom 30px,right 3px bottom 30px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:650px){
  #invitationGate .gate-card{padding:15px 22px 10px;grid-template-rows:40px 18px auto minmax(60px,1fr) 30px 101px 32px;gap:5px}
  #invitationGate .gate-heading{font-size:2.3rem}
  #invitationGate #gateTitle{font-size:clamp(1.8rem,9vw,2.4rem)}
  #invitationGate .gate-photo-caption{display:none}
  #invitationGate .gate-sound{min-height:32px}
}
@media(min-width:701px) and (max-height:680px),(max-width:700px) and (orientation:landscape){
  #invitationGate{padding:12px}
  #invitationGate .gate-card{height:calc(100dvh - 24px);max-height:590px;padding:20px 48px 14px;grid-template-columns:minmax(0,1fr) 28%;grid-template-rows:40px 18px minmax(65px,1fr) 32px 83px 30px;gap:5px 30px}
  #invitationGate .gate-heading{font-size:2.7rem}
  #invitationGate .monogram{top:24px;left:24px;width:34px;height:34px;font-size:.65rem}
  #invitationGate #gateTitle{font-size:clamp(2rem,6.3dvh,3.5rem);gap:3px}
  #invitationGate .gate-photo{grid-row:2/5}
  #invitationGate .open-invitation{width:78px;height:64px}
  #invitationGate .open-gift{scale:.78;transform-origin:center}
  #invitationGate .open-gift-tooltip{top:-14px;font-size:.63rem;padding:7px 12px}
  #invitationGate .gate-sound{min-height:28px;font-size:.6rem}
  #invitationGate .gate-date{font-size:.63rem;padding:5px 13px}
}
@media(prefers-reduced-motion:reduce){
  #invitationGate,#invitationGate .gate-card{transition:none}
  #invitationGate *,#invitationGate *::before,#invitationGate *::after,.invitation-entering .hero.is-ready *{animation:none!important}
  #invitationGate.is-opening .gate-card{transform:none;filter:none}
  .invitation-celebration{display:none}
  .invitation-entering #invitationPage:not(.has-arrived){animation:none;transform:none;will-change:auto}
}