.gate-stage{background:#162c3b;perspective:1800px}.hall-view{position:absolute;inset:0;background:linear-gradient(#11243910,#11243910),url('pelamin-arfanizzah.webp') center/cover;transform:scale(1);filter:brightness(.74);transition:transform 4.5s cubic-bezier(.2,.55,.3,1),filter 2.8s ease}.gateway{background:transparent;max-width:700px;box-shadow:0 0 100px #00111ddd;transition:transform 3.6s cubic-bezier(.2,.6,.3,1) 1.15s,opacity 1s ease 3.3s}.gate-frame-art{filter:drop-shadow(0 12px 12px #0008)}.gateway .door{box-shadow:inset 0 0 15px #0009,0 16px 20px #0007;transition:transform 3.3s cubic-bezier(.2,.55,.25,1) .15s,filter 3s;backface-visibility:hidden}.gateway .door:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent 18%,#eec47b12 70%,#0007);pointer-events:none}.warm-light{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 45%,#ffe4a540,transparent 65%);mix-blend-mode:screen;pointer-events:none}.gate-stage.opening .hall-view{transform:scale(1.12);filter:brightness(1.05)}.gate-stage.opening .gateway{opacity:0;transform:scale(2.5)}.gate-stage.opening .door-left{transform:rotateY(-102deg);filter:brightness(.83)}.gate-stage.opening .door-right{transform:rotateY(102deg);filter:brightness(.83)}.gate-stage.opening .warm-light{animation:warmReveal 4.7s ease forwards}.gate-stage.opening{background:#162c3b;animation:hallFade .9s ease 4.3s forwards}.gate-stage.opening .skip-intro{background:#10283e99;color:#fff5df}.hero{background:linear-gradient(#081d3070,#081d3055 48%,#081d30bb),url('pelamin-arfanizzah.webp') center/cover;color:#fff6e1}.hero h1{color:#fff3d8;text-shadow:0 3px 22px #051322}.hero h1 i{color:#efcf85}.hero .eyebrow,.script-intro,.scroll-hint{color:#f8dfa6}.hero .hero-inner{background:radial-gradient(ellipse,#091e3040,transparent 73%)}.invitation-arriving .hero-inner{animation:welcome 1.7s ease 4.25s both}.gate-copy{padding-bottom:10svh}.gate-copy .small{font-size:.8rem}.gate-tint{background:linear-gradient(transparent 30%,#071a2b30 45%,#071a2bc2 90%)}@keyframes warmReveal{0%{opacity:0}35%{opacity:.8}100%{opacity:0}}@keyframes hallFade{to{opacity:0}}@media(min-width:760px){.hall-view{background-size:cover;background-position:center 52%}.gate-stage.opening .gateway{transform:translateX(-50%) scale(2.5)}.hero{background-size:cover}}@media(prefers-reduced-motion:reduce){.hall-view,.gateway,.gateway .door{transition:none}.gate-stage.opening,.gate-stage.opening .warm-light{animation:none}}


/* Keep the closed gate clean: reveal the real dais only as the doors open. */
.hall-view{background:radial-gradient(ellipse at 50% 44%,#a9874a2b 0%,transparent 33%),radial-gradient(ellipse at 50% 100%,#000b1b 0%,#071522 74%);overflow:hidden}
.hall-view::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06132144 0%,transparent 35%,#07152266 100%),url('pelamin-arfanizzah.webp') center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity 1.8s ease 1.15s,transform 4.5s cubic-bezier(.2,.55,.3,1)}
.gate-stage.opening .hall-view::before{opacity:.92;transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){.hall-view::before{transition:none}.gate-stage.opening .hall-view::before{opacity:.92;transform:none}}
.hall-view{background:linear-gradient(180deg,#06132118,#0715222b),url('hall-surround.png') center/cover no-repeat;filter:brightness(.92)}
.gate-stage.opening .hall-view{filter:brightness(1.03)}
.hall-view{background:linear-gradient(180deg,#06132112,#07152222),url('gate-surround.png') center/cover no-repeat;filter:brightness(.9)}
.gateway .gate-frame-art{content:url('gate-surround.png');clip-path:none;z-index:1}
.gateway .door{top:8%;bottom:auto;height:67%;width:20%;z-index:2}
.gateway .door-left{left:30%}.gateway .door-right{right:30%}
.gateway .door img{width:500%;height:149%;top:-24%;object-fit:fill}
.gateway .door-left img{left:-85%}.gateway .door-right img{right:-85%}
.gateway .gate-frame-art{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,30% 6%,30% 74%,70% 74%,70% 6%,30% 6%);z-index:3}
.gateway .door{top:6%;height:68%;width:20%;z-index:2}
.gateway .door-left{left:30%}.gateway .door-right{right:30%}
.gateway .door img{content:url('gate-surround.png');width:500%;height:147.06%;top:-9%;object-fit:fill}
.gateway .door-left img{left:-150%}.gateway .door-right img{right:-150%}

/* Full-width opening: one continuous hall wall, with its own centre used as the doors. */
.hall-view{background:radial-gradient(ellipse at 50% 44%,#a9874a2b 0%,transparent 33%),linear-gradient(180deg,#061522,#03090f);filter:brightness(.94)}
.gateway{width:100%;max-width:none;left:0;right:0;box-shadow:none}
.gateway .gate-frame-art{content:url('gate-surround-wide.webp');object-fit:cover;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,34% 11%,34% 83%,66% 83%,66% 11%,34% 11%);z-index:3}
.gateway .door{top:11%;height:72%;width:16%;z-index:2}
.gateway .door-left{left:34%}.gateway .door-right{right:34%}
.gateway .door img{content:url('gate-surround-wide.webp');width:625%;height:138.889%;top:-15.278%;object-fit:fill}
.gateway .door-left img{left:-212.5%}.gateway .door-right img{right:-212.5%}
@media(min-width:760px){
  .gateway{width:100%;max-width:none;left:0;right:0;transform:none;box-shadow:none}
  .gate-stage.opening .gateway{transform:scale(1.08)}
}

/* Refined reveal: the real pelamin arrives through warm light instead of a dark overlay. */
.hall-view{background:linear-gradient(180deg,#061522,#071522);filter:brightness(.96);transition:transform 4.8s cubic-bezier(.2,.55,.3,1),filter 3.2s ease}
.hall-view::before{background:linear-gradient(180deg,#fff1cf20 0%,#f7dfb20b 52%,#07152218 100%),url('pelamin-arfanizzah.webp') center/cover no-repeat;opacity:0;transform:scale(1.06);filter:saturate(1.08) brightness(1.16) contrast(1.03);transition:opacity 2.6s cubic-bezier(.22,.65,.18,1) .45s,transform 4.8s cubic-bezier(.2,.55,.3,1),filter 3s ease}
.hall-view::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,#ffe1a847 0%,#ffcf7b16 35%,transparent 69%);opacity:0;mix-blend-mode:screen;pointer-events:none;transition:opacity 3s ease .7s}
.gate-stage.opening .hall-view{transform:scale(1.08);filter:brightness(1.12)}
.gate-stage.opening .hall-view::before{opacity:1;transform:scale(1.1);filter:saturate(1.1) brightness(1.22) contrast(1.04)}
.gate-stage.opening .hall-view::after{opacity:1}
.warm-light{z-index:4;background:radial-gradient(ellipse at 50% 46%,#ffe9b866 0%,#ffd17b26 32%,transparent 70%);filter:blur(2px)}
.gate-stage.opening .warm-light{animation:warmReveal 5.2s ease forwards}
@keyframes warmReveal{0%{opacity:0}28%{opacity:.72}62%{opacity:.3}100%{opacity:.08}}
@media(prefers-reduced-motion:reduce){.hall-view,.hall-view::before,.hall-view::after{transition:none}.gate-stage.opening .hall-view::before{opacity:1}.gate-stage.opening .hall-view::after{opacity:.85}}

/* Typography choice D applied to the light details section only. */
.details .event-grid h3{font-family:'DM Sans',sans-serif;font-size:clamp(.95rem,1.7vw,1.2rem);font-weight:600;letter-spacing:.105em;line-height:1.35;text-transform:uppercase;color:#18384f}
.details .event-grid p{font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:#657078}
.details .event-grid .text-link{font-family:'DM Sans',sans-serif;font-size:.76rem;letter-spacing:.045em;text-transform:uppercase;color:#87652c}
.details .location-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
@media(max-width:600px){.details .event-grid h3{font-size:.93rem;letter-spacing:.08em}.details .event-grid p,.details .event-grid .text-link{font-size:.72rem;letter-spacing:.075em}}

/* A short name mark bridges the door opening and the reveal of the real pelamin. */
.reveal-mark{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;color:#f5dfad;opacity:0;transform:scale(.94);filter:blur(9px);text-shadow:0 4px 28px #000b20}
.reveal-mark:before{content:"";position:absolute;width:min(68vw,430px);height:min(68vw,430px);border:1px solid #d7b66d66;border-radius:50%;box-shadow:0 0 0 10px #d7b66d0b,0 0 75px #d7b66d22,inset 0 0 65px #d7b66d12}
.reveal-monogram{position:relative;font:500 clamp(4.2rem,10vw,7.5rem)/.8 'Cormorant Garamond',Georgia,serif;letter-spacing:.03em;color:#f4d48c}
.reveal-monogram span{font-size:.58em;color:#fff0c7;padding:0 .12em}
.reveal-names{position:relative;margin-top:25px;font:500 clamp(1.2rem,3vw,2rem)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.15em}.reveal-names i{font-style:normal;color:#e4c57e;padding:0 .16em}
.reveal-date{position:relative;margin-top:18px;font:500 .7rem/1 'DM Sans',sans-serif;letter-spacing:.42em;color:#dbc18a}
.gate-stage.opening .reveal-mark{animation:revealMark 4.2s cubic-bezier(.2,.55,.25,1) 2.45s both}
@keyframes revealMark{0%{opacity:0;transform:scale(.94);filter:blur(9px)}18%{opacity:1;transform:scale(1);filter:blur(0)}68%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.06);filter:blur(6px)}}
.hall-view::before{transition:opacity 2.5s cubic-bezier(.22,.65,.18,1) 4.05s,transform 4.8s cubic-bezier(.2,.55,.3,1),filter 3s ease}
.hall-view::after{transition:opacity 2.6s ease 3.7s}
.gate-stage.opening .warm-light{animation:warmReveal 4.8s ease 2.35s forwards}
.invitation-arriving .hero-inner{animation-delay:6.35s}
@media(prefers-reduced-motion:reduce){.reveal-mark{display:none}.invitation-arriving .hero-inner{animation-delay:0s}}

/* Let the couple's real floral dais appear softly behind the name mark. */
.reveal-mark{background:linear-gradient(180deg,#07152220 0%,#07152242 58%,#0715227a 100%),url('pelamin-arfanizzah.webp') center 46%/cover no-repeat}

/* Keep the logo clean; move the floral brightness to the invitation page that follows. */
.reveal-mark{background:transparent}
.invitation-section{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#fffdf6d6,#fbf3e4e8),url('pelamin-arfanizzah.webp') center 43%/cover no-repeat}
.invitation-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fffdf6e7 0%,#fffdf655 28%,#fffdf655 72%,#fffdf6e7 100%),url('pelamin-arfanizzah.webp') center 43%/cover no-repeat;opacity:.45;filter:saturate(1.22) contrast(1.03);transform:scale(1.04);pointer-events:none}
.invitation-section::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 14% 18%,#e5b96a26 0%,transparent 26%),radial-gradient(ellipse at 86% 82%,#d98b9c20 0%,transparent 27%);pointer-events:none}
.invitation-section>*{position:relative;z-index:1}

/* Light page version: soft floral corners only, with no pelamin photo. */
.invitation-section{background:linear-gradient(180deg,#fffdf6,#fbf3e4)}
.invitation-section::before{z-index:0;background-image:url('floral-soft-corner.png'),url('floral-soft-corner.png');background-position:left top,right bottom;background-size:min(38vw,430px) auto,min(38vw,430px) auto;background-repeat:no-repeat;opacity:.23;filter:saturate(.88) brightness(1.04);transform:none}
.invitation-section::after{z-index:0;background:radial-gradient(ellipse at 17% 23%,#edc77e20 0%,transparent 25%),radial-gradient(ellipse at 83% 78%,#e6aebd18 0%,transparent 25%)}
@media(max-width:600px){.invitation-section::before{background-size:250px auto,250px auto;opacity:.18}}

/* Font D applies to the countdown only. */
.countdown strong{font-family:'DM Sans',sans-serif;font-size:clamp(1.7rem,4vw,2.35rem);font-weight:500;letter-spacing:.08em;line-height:1.2;color:#94712c}
.countdown span{font-family:'DM Sans',sans-serif;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#657078}

/* Guest wishes sit after RSVP and before family contact. */
.wishes-section{position:relative;isolation:isolate;max-width:none;overflow:hidden;padding:88px 24px 105px;background:radial-gradient(ellipse at 50% 0%,#17384b,#071722 70%);color:#f5e8c9;text-align:center}
.wishes-section:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#07152266,#071522e6),url('gate-surround-wide.webp') center/cover;opacity:.28;filter:saturate(.7)}
.wishes-section:after{content:"";position:absolute;width:min(430px,78vw);height:min(430px,78vw);right:-150px;bottom:-160px;background:url('floral-soft-corner.png') center/contain no-repeat;opacity:.14;transform:rotate(178deg);pointer-events:none}
.wishes-section>*{position:relative;z-index:1}.wishes-section .eyebrow{color:#dec27e}.wishes-section h2{margin:8px 0;color:#f5dfad;font:500 clamp(2.4rem,6vw,4rem)/1 'Cormorant Garamond',Georgia,serif}.wishes-intro{margin:0 auto 35px;color:#b9c4c5;font-size:.9rem}.wishes-card{position:relative;width:min(100%,590px);min-height:235px;margin:0 auto;padding:42px 42px 31px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(145deg,#102e40ed,#081a28f5);border:1px solid #d7b66e88;box-shadow:0 18px 60px #0008,inset 0 0 40px #d7b66e0b;transition:opacity .75s ease,transform .75s ease}.wishes-card:before,.wishes-card:after{content:"";position:absolute;width:26px;height:26px;border-color:#d7b66e99}.wishes-card:before{left:13px;top:13px;border-left:1px solid;border-top:1px solid}.wishes-card:after{right:13px;bottom:13px;border-right:1px solid;border-bottom:1px solid}.wishes-card.is-changing{opacity:0;transform:translateY(12px)}.wishes-quote{position:absolute;left:29px;top:5px;color:#d7b66e80;font:5rem/1 'Cormorant Garamond',Georgia,serif}.wishes-card #wishes-text{max-width:470px;margin:0;color:#f6e7c6;font:italic 1.52rem/1.35 'Cormorant Garamond',Georgia,serif}.wishes-rule{margin:18px 0 7px;color:#d7b66e;font-size:.8rem}.wishes-card #wishes-author{margin:0;color:#d5bd82;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}.wishes-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px;color:#ddc68b}.wishes-controls button{width:36px;height:36px;border:1px solid #d7b66e77;border-radius:50%;background:#0c2939;color:#ead29a;font-size:1.05rem}.wishes-controls span{min-width:42px;font-size:.76rem;letter-spacing:.1em}@media(max-width:600px){.wishes-section{padding:72px 20px 96px}.wishes-card{min-height:270px;padding:40px 25px 30px}.wishes-card #wishes-text{font-size:1.4rem}}

/* Mobile portrait crop: keep the full ornate doorway visible on narrow screens. */
@media(max-width:759px){
  .gateway .gate-frame-art{content:url('gate-surround-portrait.webp');clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,28% 7%,28% 77%,72% 77%,72% 7%,28% 7%)}
  .gateway .door{top:7%;height:70%;width:22%}
  .gateway .door-left{left:28%}.gateway .door-right{right:28%}
  .gateway .door img{content:url('gate-surround-portrait.webp');width:455%;height:142%;top:-14%;object-fit:fill}
  .gateway .door-left img{left:-177%}.gateway .door-right img{right:-177%}
}