/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/AbrilFatface-400.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/CormorantGaramond-400.woff2) format('woff2');}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/PinyonScript-400.woff2) format('woff2');}

/* ---------- tokens ---------- */
:root{
  --cream:#FDF4E3; --maroon:#520606; --maroon-2:#6d1111; --gold:#A87533; --gold-l:#E3B96A;
  --blush:#AB6F71; --sage:#7A8A80;
  /* 1u = 1% of the column width, capped so desktop stays a 480px column */
  --u:min(1vw,4.8px);
  --col:min(100vw,30rem);
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --script:'Pinyon Script','Snell Roundhand',cursive;
  --display:'Abril Fatface','Playfair Display',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;background:var(--cream)}
html.locked,html.locked body{overflow:hidden}
body{margin:0;background:var(--cream);color:var(--maroon);font-family:var(--serif);font-weight:500;line-height:1.25;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
h1,h2,p,ol{margin:0;padding:0}
ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}

.page{position:relative;z-index:1;width:var(--col);margin:0 auto;overflow-x:clip}

/* ---------- opening gate ---------- */
.gate{position:fixed;inset:0;z-index:100;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--u)*19);padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  touch-action:none;overscroll-behavior:contain}
.gate-ui{font-family:var(--serif);color:var(--maroon);text-align:center}
.gate-top{font-size:max(18px,calc(var(--u)*6));letter-spacing:.02em}
.gate-open{font-size:max(13px,calc(var(--u)*3.6));letter-spacing:.32em;text-transform:uppercase;font-weight:600;animation:breathe 2.6s ease-in-out infinite}
.seal-wrap{position:relative;width:min(calc(var(--u)*40),190px);aspect-ratio:1}
.seal{position:relative;width:100%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:sealPulse 2.8s ease-in-out infinite}
.seal:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:50%}
.seal-wrap::before{content:"";position:absolute;left:8%;right:8%;top:14%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(82,6,6,.38),rgba(82,6,6,0));pointer-events:none}
.seal-svg{width:100%;height:100%;overflow:visible}
.seal-mono{font-family:var(--script);font-size:56px;fill:#F2DDB6;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:.8px}
.glow{position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#FFF3CF 0,rgba(255,214,130,.85) 30%,rgba(255,214,130,0) 70%)}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ---- tap: freeze every decorative loop and drop the heavy layers so the opening stays smooth ---- */
html.opening .gate *{animation-play-state:paused!important}
html.opening .blob,html.opening .gate-sparks,html.opening .gate-petals,html.opening .ripple,html.opening .touch-glow{visibility:hidden}

/* ---- glow that follows the finger ---- */
.touch-glow{position:absolute;left:0;top:0;width:min(78vmin,380px);aspect-ratio:1;margin:calc(min(78vmin,380px)/-2) 0 0 calc(min(78vmin,380px)/-2);z-index:3;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,218,.95) 0,rgba(255,247,218,0) 16%),radial-gradient(circle,rgba(244,196,110,.5) 0,rgba(244,196,110,.18) 38%,rgba(244,196,110,0) 66%);will-change:transform,opacity}

/* ---- opening screen: ambient motion ---- */
.gate{overflow:hidden;background:radial-gradient(120% 90% at 50% 45%,#FFF9EC 0,#FDF4E3 45%,#F3E2C4 100%)}
.gate>.gate-ui,.gate>.seal-wrap{position:relative;z-index:4}
.gate-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;will-change:transform,opacity}
.b1{width:90vmax;height:90vmax;left:-35vmax;top:-30vmax;background:radial-gradient(circle,rgba(232,196,184,.55),rgba(232,196,184,0) 62%);animation:drift1 14s ease-in-out infinite}
.b2{width:80vmax;height:80vmax;right:-35vmax;bottom:-30vmax;background:radial-gradient(circle,rgba(227,185,106,.4),rgba(227,185,106,0) 62%);animation:drift2 17s ease-in-out infinite}
.b3{display:none;width:60vmax;height:60vmax;left:20vmax;top:25vh;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 60%);animation:drift3 9s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vmax,6vmax)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vmax,-5vmax)}}
@keyframes drift3{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.1)}}

.gate-fl{position:absolute;width:min(56vw,300px);aspect-ratio:560/680;pointer-events:none;z-index:2}
.gate-fl-tl{left:0;top:0}
.gate-fl-bl{left:0;bottom:0;aspect-ratio:560/600}
.gate-fl-tr{right:0;top:0;scale:-1 1}
.gate-fl-br{right:0;bottom:0;aspect-ratio:560/600;scale:-1 1}
.g-l{position:absolute;inset:0;opacity:0;animation:growIn 2s cubic-bezier(.2,.8,.2,1) both;will-change:transform,opacity}
.g-l:nth-child(2){animation-delay:.25s}.g-l:nth-child(3){animation-delay:.5s}
.gate-fl-tl .g-l{transform-origin:0 0}.gate-fl-tr .g-l{transform-origin:0 0;animation-delay:.15s}
.gate-fl-bl .g-l,.gate-fl-br .g-l{transform-origin:0 100%}
.gate-fl-bl .g-l{animation-delay:.3s}.gate-fl-br .g-l{animation-delay:.45s}
.gate-fl-bl .g-l:nth-child(2){animation-delay:.55s}.gate-fl-bl .g-l:nth-child(3){animation-delay:.8s}
.gate-fl-br .g-l:nth-child(2){animation-delay:.7s}.gate-fl-br .g-l:nth-child(3){animation-delay:.95s}
.gate-fl-tr .g-l:nth-child(2){animation-delay:.4s}.gate-fl-tr .g-l:nth-child(3){animation-delay:.65s}
.g-l img{width:100%;height:auto;display:block}
@keyframes growIn{0%{transform:scale(.3) rotate(-16deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

.gate-frame{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;overflow:visible;
  width:min(86vw,380px,calc(76svh*.75));translate:-50% -50%;fill:none}
.fr{stroke:#A87533;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .3s cubic-bezier(.5,0,.2,1) forwards}
.fr-2{stroke:#520606;stroke-opacity:.55;stroke-width:.9;animation-delay:.8s}
.fr-dots circle{fill:#C9983F;opacity:0;animation:dotIn .8s forwards,twinkle 3s ease-in-out infinite}
.fr-dots circle:nth-child(1){animation-delay:2.4s,3s}.fr-dots circle:nth-child(2){animation-delay:2.6s,3.4s}.fr-dots circle:nth-child(3){animation-delay:2.7s,3.9s}
.fr-dots circle:nth-child(4){animation-delay:2.9s,4.2s}.fr-dots circle:nth-child(5){animation-delay:3s,4.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dotIn{to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}

.gate-sparks,.gate-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.sp{position:absolute;will-change:transform,opacity}
.sp i{display:block;width:100%;aspect-ratio:1;background:radial-gradient(circle,#FFF0BF,#D9A648 60%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:spark 3.6s ease-in-out infinite}
@keyframes spark{0%,100%{transform:scale(0) rotate(0);opacity:0}45%,55%{transform:scale(1) rotate(60deg);opacity:1}}
.gate-petals .pt{top:0}

.gate-top{display:block}
.gate-top span{display:inline-block;opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i)*.05s) forwards}
@keyframes rise{to{opacity:1;transform:none}}

.ring-wrap{position:absolute;left:-26%;top:-26%;width:152%;height:152%;pointer-events:none;will-change:transform,opacity}
.ring-text{width:100%;height:100%;overflow:visible;animation:spin 46s linear infinite;opacity:0;animation:spin 46s linear infinite,fadeIn 2s 1s forwards}
.ring-text text{font-family:var(--serif);font-weight:600;font-size:9.6px;letter-spacing:.2em;fill:#7A1A1A}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{to{opacity:.85}}
.ripple{position:absolute;inset:6%;border-radius:50%;border:1.5px solid rgba(168,117,51,.65);pointer-events:none;opacity:0;animation:ripple 3.4s ease-out infinite}
.ripple.r2{animation-delay:1.7s}
@keyframes ripple{0%{transform:scale(.9);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.shine{position:absolute;inset:8%;border-radius:50%;overflow:hidden;pointer-events:none}
.shine i{position:absolute;top:-10%;bottom:-10%;width:34%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,236,190,.5),transparent);transform:skewX(-18deg);animation:shineSweep 4s 1.5s ease-in-out infinite}
@keyframes shineSweep{0%,60%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- petals ---------- */
.petals{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.pt{position:absolute;top:0;will-change:transform}
.pt img{width:100%;height:auto;will-change:transform,opacity;animation:fall linear infinite}
@keyframes fall{
  0%{transform:translate3d(0,-14vh,0) rotate(0);opacity:0}
  8%{opacity:.9}
  50%{transform:translate3d(var(--sw),52vh,0) rotate(160deg)}
  92%{opacity:.8}
  100%{transform:translate3d(calc(var(--sw)*-.4),114vh,0) rotate(320deg);opacity:0}
}

/* ---------- desktop side florals ---------- */
.side{display:none}
@media (min-width:900px){
  .side{display:block;position:fixed;top:0;bottom:0;z-index:0;width:min(calc((100vw - 30rem)/2),380px);pointer-events:none}
  .side-l{left:0}.side-r{right:0;transform:scaleX(-1)}
  .side img{position:absolute;left:0;width:100%;height:auto}
  .side .s-tl{top:0}.side .s-bl{bottom:0}
}
@keyframes sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.8deg)}}

/* ---------- poster: hero + date ---------- */
.poster{position:relative;background:transparent}
.arch-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.arch-maroon{position:absolute;left:calc(var(--u)*-14);width:calc(var(--u)*128);top:calc(var(--u)*30);bottom:0;
  background:var(--maroon);border-radius:calc(var(--u)*64) calc(var(--u)*64) 0 0;will-change:transform}

.hero{position:relative;min-height:100vh;min-height:max(100svh,calc(var(--u)*150));display:flex;align-items:center;justify-content:center;
  padding:calc(var(--u)*34) calc(var(--u)*6) calc(var(--u)*30);--fw:min(calc(var(--u)*64),34svh)}
.fl{position:absolute;left:0;width:var(--fw);pointer-events:none;z-index:1}
.fl-tl{top:0;aspect-ratio:560/680}.fl-bl{bottom:0;aspect-ratio:560/600}
.fl-tr{left:auto;right:0;top:0;width:calc(var(--fw)*.8);aspect-ratio:560/680}
.fl.fl-tr img{transform-origin:50% 50%;scale:-1 1}
.c-sprig{width:calc(var(--u)*62);height:auto;margin:0 auto calc(var(--u)*7)}
.fl-l{position:absolute;inset:0;will-change:transform,opacity}
.fl img{width:100%;height:auto;display:block;transform-origin:0 0}
.fl-bl img{transform-origin:0 100%}
@media (min-width:900px){.fl-l:nth-child(3) img{animation:sway 8s ease-in-out infinite}}

.hero-in{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--cream)}
.eyebrow{font-size:max(19px,calc(var(--u)*7));font-weight:500;letter-spacing:.01em;margin-bottom:calc(var(--u)*4)}
.names{display:flex;flex-direction:column;align-items:center;font-weight:400;margin:0}
.nm{display:block;max-width:100%}
.nm svg{width:100%;height:auto;overflow:visible}
.nm{position:relative}
.nm .fsvg{position:absolute;left:0;top:0;width:100%;height:100%}
.js:not(.static) .nm .gl,.js:not(.static) .nm .fsvg{opacity:0}
.nm .gl{fill:none;stroke:var(--cream);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.nm .gf{fill:var(--cream);stroke:none}
.nm-amp{margin:calc(var(--u)*1) 0 calc(var(--u)*1)}
.nm-fallback{font-family:var(--script);font-size:calc(var(--u)*15);line-height:1.1}
.scroll-hint{margin-top:calc(var(--u)*9);width:2px;height:calc(var(--u)*11);background:linear-gradient(var(--cream),transparent);position:relative;opacity:0;transform-origin:top}
.scroll-hint.on{animation:hint 2.2s ease-in-out infinite}
.scroll-hint span{position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:translateX(-50%) rotate(45deg)}
@keyframes hint{0%,100%{transform:scaleY(.6);opacity:.3}50%{transform:scaleY(1);opacity:.9}}

.date{position:relative;z-index:2;display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;column-gap:calc(var(--u)*7);
  padding:calc(var(--u)*12) calc(var(--u)*6) calc(var(--u)*20);color:var(--cream)}
.d-left,.d-right{display:flex;flex-direction:column;align-items:center;text-align:center}
.d-weekday{font-size:max(12px,calc(var(--u)*3.4));letter-spacing:.3em;text-transform:uppercase;font-weight:600;opacity:.85;margin-bottom:calc(var(--u)*2)}
.d-month{font-family:var(--display);font-size:max(16px,calc(var(--u)*5.4));letter-spacing:.04em;text-transform:uppercase;line-height:1}
.d-day{font-family:var(--display);font-size:calc(var(--u)*17);line-height:1;margin:calc(var(--u)*1) 0}
.d-year{font-family:var(--display);font-size:max(15px,calc(var(--u)*5.6));line-height:1;letter-spacing:.04em}
.d-rule{width:2px;align-self:stretch;background:var(--cream);transform-origin:top;opacity:.9}
.d-time{font-family:var(--display);font-size:max(18px,calc(var(--u)*6.6));line-height:1;white-space:nowrap}
.d-loc{font-size:max(15px,calc(var(--u)*5));letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:calc(var(--u)*4)}
.d-venue{font-size:max(14px,calc(var(--u)*4.6));letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-top:calc(var(--u)*1.4);max-width:calc(var(--u)*30);font-weight:500}

/* ---------- countdown ---------- */
.count{position:relative;z-index:2;padding:calc(var(--u)*16) calc(var(--u)*6) calc(var(--u)*20);text-align:center}
.count-title{font-family:var(--script);font-weight:400;font-size:max(26px,calc(var(--u)*9));line-height:1.15;margin-bottom:calc(var(--u)*8)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2.6);max-width:calc(var(--u)*88);margin:0 auto}
.cd-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--u)*5) 0 calc(var(--u)*3.2);
  border:1.5px solid var(--maroon);border-radius:calc(var(--u)*50) calc(var(--u)*50) calc(var(--u)*3) calc(var(--u)*3);background:rgba(82,6,6,.035);overflow:hidden}
.cd-cell b{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*9.4);line-height:1;font-variant-numeric:tabular-nums;display:block;will-change:transform,opacity}
.cd-cell i{font-style:normal;font-size:max(10.5px,calc(var(--u)*2.9));letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:calc(var(--u)*2);opacity:.8}
.cd-done{font-size:calc(var(--u)*5)}
.cd-done-t{font-family:var(--script);font-size:calc(var(--u)*11);margin-bottom:calc(var(--u)*2)}

/* ---------- schedule ---------- */
.sched{position:relative;z-index:2;background:var(--maroon);padding:calc(var(--u)*22) 0 0;overflow:hidden;
  --rowh:calc(var(--u)*25);--dc:calc(var(--u)*7);--ic:calc(var(--u)*22)}
.sched-arch{margin-left:auto;width:calc(var(--u)*90);background:var(--cream);border-radius:calc(var(--u)*45) calc(var(--u)*45) 0 0;
  padding:calc(var(--u)*24) 0 calc(var(--u)*14) calc(var(--u)*3);will-change:transform}
.sched-title{font-family:var(--script);font-weight:400;font-size:max(26px,calc(var(--u)*8.6));text-align:center;line-height:1.1;margin-bottom:calc(var(--u)*7);padding-right:calc(var(--u)*4)}
.timeline{position:relative;padding-right:calc(var(--u)*4)}
.t-list{position:relative}
.t-row{height:var(--rowh);display:grid;grid-template-columns:1fr var(--dc) var(--ic);align-items:center}
.t-txt{text-align:center;padding:0 calc(var(--u)*2);text-transform:uppercase;line-height:1.28}
.t-title{display:block;font-weight:600;font-size:max(13.5px,calc(var(--u)*4.5));letter-spacing:.04em}
.t-time{display:block;font-weight:500;font-size:max(13px,calc(var(--u)*4.2));letter-spacing:.06em;margin-top:calc(var(--u)*.8)}
.t-dot{width:max(12px,calc(var(--u)*4));aspect-ratio:1;border-radius:50%;background:var(--maroon);justify-self:center;position:relative;z-index:1}
.t-icow{width:calc(var(--u)*17);height:calc(var(--u)*17);justify-self:center}
.t-ico{width:100%;height:100%;overflow:visible;animation:bob 4.2s ease-in-out infinite}
.t-row:nth-child(2) .t-ico{animation-delay:-1s}.t-row:nth-child(3) .t-ico{animation-delay:-2s}.t-row:nth-child(4) .t-ico{animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
.t-line{position:absolute;top:calc(var(--rowh)/2);bottom:calc(var(--rowh)/2);width:2.5px;margin-left:-1.25px;
  right:calc(var(--u)*4 + var(--ic) + var(--dc)/2);background:var(--maroon);transform-origin:top;border-radius:2px}

/* ---------- venue ---------- */
.venue{position:relative;z-index:2;padding:calc(var(--u)*14) calc(var(--u)*7) calc(var(--u)*10);text-align:center}
.v-sprig{width:calc(var(--u)*78);height:auto;margin:0 auto calc(var(--u)*6)}
.v-title{font-family:var(--script);font-weight:400;font-size:max(34px,calc(var(--u)*13));line-height:1.1}
.v-name{font-family:var(--display);font-size:max(20px,calc(var(--u)*7));letter-spacing:.06em;text-transform:uppercase;margin-top:calc(var(--u)*4)}
.v-note{font-size:max(16px,calc(var(--u)*5));margin-top:calc(var(--u)*2.4);opacity:.85}
.v-btns{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3.4);margin-top:calc(var(--u)*9)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;width:min(calc(var(--u)*76),340px);padding:0 14px;border-radius:999px;white-space:nowrap;
  font-size:max(14px,calc(var(--u)*4.2));font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--maroon);position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.v-gcal:focus-visible,.d-venue:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-solid{background:var(--maroon);color:var(--cream)}
.btn-line{background:transparent;color:var(--maroon)}
.btn::after{animation-play-state:paused;content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite}
.btn-line::after{background:linear-gradient(105deg,transparent 35%,rgba(82,6,6,.12) 50%,transparent 65%)}
.btn-line::after{animation-delay:1.6s}
@keyframes shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.v-gcal{display:inline-flex;align-items:center;min-height:44px;font-size:max(15px,calc(var(--u)*4.2));text-decoration:underline;text-underline-offset:4px;opacity:.85;cursor:pointer}

/* ---------- closing ---------- */
.closing{position:relative;z-index:2;min-height:100vh;min-height:max(100svh,calc(var(--u)*170));display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:calc(var(--u)*30) calc(var(--u)*6) calc(var(--u)*30)}
.wr{position:absolute;width:calc(var(--u)*50);pointer-events:none;will-change:transform,opacity}
.wr img{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:50% 50%}
.wr img:first-child{position:relative}
.wr-tr img,.wr-br img{scale:-1 1}
.wr-tl{left:0;top:0;transform-origin:0 0}
.wr-tr{right:0;top:0;transform-origin:100% 0}
.wr-bl{left:0;bottom:0;transform-origin:0 100%}
.wr-br{right:0;bottom:0;transform-origin:100% 100%}
.cl-in{position:relative;z-index:2;text-align:center;width:calc(var(--u)*56);max-width:100%}
.cl-title{font-family:var(--script);font-weight:400;white-space:nowrap;font-size:max(36px,calc(var(--u)*13));line-height:1.05}
.cl-text{font-size:max(17px,calc(var(--u)*5.2));line-height:1.35;margin-top:calc(var(--u)*6)}
.cl-sign{font-size:max(16px,calc(var(--u)*4.8));margin-top:calc(var(--u)*9);letter-spacing:.06em;opacity:.8}
.cl-names{font-family:var(--script);white-space:nowrap;font-size:max(30px,calc(var(--u)*10));line-height:1.15;margin-top:calc(var(--u)*1)}

/* ---------- landscape phones / very short screens ---------- */
@media (max-height:480px) and (orientation:landscape){
  .hero{min-height:calc(var(--u)*150);--fw:calc(var(--u)*50)}
  .closing{min-height:calc(var(--u)*150)}
  .gate{flex-direction:row;gap:calc(var(--u)*6);flex-wrap:wrap}
  .seal{width:min(34vh,150px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .petals,.gate-petals,.gate-sparks,.ripple,.shine,.touch-glow{display:none}
  .gate-top span,.g-l,.ring-text{opacity:1;transform:none}
  .fr{stroke-dashoffset:0}.fr-dots circle{opacity:1}
}

/* looping animations only run while their section is visible (JS adds .vis) */
.btn::after,.t-ico,.scroll-hint.on{animation-play-state:paused}
.vis .btn::after,.vis .t-ico,.vis .scroll-hint.on{animation-play-state:running}
.petals{contain:strict}
@media (hover:none){.fl-l:nth-child(3) img{animation:none}}