/* The merged image stays intact; all legibility treatment is live type and light. */
.hero.opening-scene{--stage-width:max(1100px,100vw);--intro-drop:clamp(14px,1.2vw,18px);height:calc(var(--stage-width)*2/3);min-height:0;display:block;padding:0;position:relative;isolation:isolate;overflow:hidden;background:#eee2ca;color:#fff9ee}
.hero.opening-scene::after{display:none}
.opening-stage{position:absolute;top:0;left:50%;width:var(--stage-width);aspect-ratio:3/2;isolation:isolate;transform:translateX(-50%)}
.opening-backdrop{position:absolute;inset:0;z-index:-3}
.opening-backdrop img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center;max-width:none}
/* Keep the uploaded photo intact: faces and outfits are original pixels.
   Only the photograph's outer edges fade into the decorative blossom scene. */
.opening-original-portrait{position:absolute;z-index:0;top:26%;left:34.5%;width:31%;height:auto;max-width:none;aspect-ratio:3/4;object-fit:contain;filter:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 90%,transparent);mask-composite:intersect}
.hero .opening-copy{position:absolute;inset:0;transform:none;display:block;max-width:none;width:100%;min-width:0;padding:0;margin:0;text-align:center;z-index:2;color:#fff9ee;text-shadow:0 1px 2px #07120cf2,0 0 4px #07120ce6}
/* The blur has its own conservative garden-only clip, separate from the artwork
   and text. Soft mask edges stay inside this boundary, including on phones. */
.opening-contrast,.opening-portrait-layer{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:polygon(50% 7%,55% 12%,60% 13%,62% 18%,66% 19%,67% 25%,69% 28%,69.5% 34%,69.5% 41%,72% 48%,72% 86%,28% 86%,28% 48%,30.5% 41%,30.5% 34%,31% 28%,33% 25%,34% 19%,38% 18%,40% 13%,45% 12%)}
.opening-portrait-layer{z-index:0}
/* Small, fully feathered halos follow rendered text fragments. There is no
   filled rectangle or shared backdrop behind a heading/countdown group. */
.opening-blur{position:absolute;background:rgba(12,25,15,.14);-webkit-backdrop-filter:blur(4px) brightness(.78);backdrop-filter:blur(4px) brightness(.78);-webkit-mask-image:radial-gradient(ellipse closest-side,#000c 30%,#0007 65%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000c 30%,#0007 65%,transparent 100%)}
.opening-heading,.opening-details{position:absolute;left:28.5%;width:43%;display:flex;flex-direction:column;align-items:center;gap:10px;isolation:isolate}
.opening-ganesh{position:absolute;top:calc(4.5% + var(--intro-drop));left:44%;width:12%;height:12%;object-fit:contain}
.opening-heading{top:calc(18.5% + var(--intro-drop));gap:6px}
.opening-details{top:74%;gap:9px}
.hero .opening-heading>.eyebrow{font:600 13px/1.6 var(--body);letter-spacing:.12em;color:#fff8e9;max-width:100%;text-wrap:balance}
.hero .opening-copy .pretitle{font:600 26px/1.4 var(--serif);margin:0;color:#fffaf0}
/* Soft shadows stay close to the type, without outlining the letters or
   adding a shaded panel across the arch. */
.hero .opening-heading>.eyebrow,.hero .opening-copy .pretitle{text-shadow:0 1px 3px #07140c,0 2px 6px #07140cf2,0 0 8px #07140cbf}
.hero .opening-copy h1{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;font:500 clamp(54px,5.4vw,90px)/1.06 var(--serif);margin:3px 0 7px;white-space:nowrap;color:#fffaf0;text-shadow:0 2px 3px #07120cf2,0 0 6px #07120ccc}
.opening-copy .name-join{width:44px;height:30px;flex:none}
.opening-copy .name-join img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #07140ce6)}
.hero .opening-copy .hero-date{font:500 18px/1.55 var(--body);letter-spacing:.01em;color:#fffaf0;max-width:100%;text-wrap:balance}
.hero .opening-copy .hero-place{font:500 14px/1.5 var(--body);margin:0;max-width:100%;color:#fff4dd;text-wrap:balance}
.hero .opening-copy .countdown-widget{margin:0;flex-direction:column;gap:0}
.hero .opening-copy .countdown-widget .eyebrow{font:600 11px/1.5 var(--body);letter-spacing:.12em;color:#fff0cc}
.opening-copy .countdown{gap:19px;line-height:1.35}
.opening-copy .countdown-unit{gap:5px}
.hero .opening-copy .countdown-unit strong{font:600 25px/1.2 var(--body);font-variant-numeric:tabular-nums;color:#fffaf0;min-width:1.3em}
.hero .opening-copy .countdown-unit span{font:500 12px/1.4 var(--body);color:#fff5e1}
.hero .opening-copy .scroll-cue{position:absolute;bottom:3%;left:calc(50% - 22px);height:32px;width:44px;margin:0;color:#745a2d;filter:none}
.hero .opening-copy .scroll-cue svg{width:23px;height:25px;stroke-width:1.8}
@media(max-width:599px){
 .hero.opening-scene{--stage-width:max(560px,100vw);height:calc(var(--stage-width)*1.5)}
 .opening-stage{aspect-ratio:2/3}
 .opening-backdrop img{aspect-ratio:2/3}
 .opening-original-portrait{top:25%;left:16%;width:68%}
 .opening-contrast,.opening-portrait-layer{clip-path:polygon(50% 9%,58% 14%,64% 15%,69% 20%,72% 25%,72.5% 30%,72.5% 40%,77% 48%,77% 81%,23% 81%,23% 48%,27.5% 40%,27.5% 30%,28% 25%,31% 20%,36% 15%,42% 14%)}
 .opening-heading,.opening-details{width:min(49%,calc(100vw - 40px));left:calc((100% - min(49%,calc(100vw - 40px)))/2);gap:6px}
 .opening-ganesh{top:calc(10% + var(--intro-drop));left:calc(50% - 42px);width:84px;height:84px}
 .opening-heading{top:calc(22% + var(--intro-drop));gap:5px}
 .opening-details{top:68.5%;gap:7px}
 .hero .opening-heading>.eyebrow{font-size:12px;line-height:1.55;letter-spacing:.08em;max-width:250px}
 .hero .opening-copy .pretitle{font-size:22px;line-height:1.4}
 .hero .opening-copy h1{flex-direction:row;gap:6px;font-size:clamp(34px,9.4vw,40px);line-height:1.1;margin:4px 0 5px}
 .opening-copy .name-join{width:34px;height:24px;margin:0}
 .hero .opening-copy .hero-date{font-size:14px;line-height:1.5;max-width:260px}
 .hero .opening-copy .hero-place{font-size:12.5px;line-height:1.5;max-width:250px}
 .hero .opening-copy .countdown-widget{margin:0;gap:0}
 .hero .opening-copy .countdown-widget .eyebrow{font-size:10px;letter-spacing:.08em}
 .opening-copy .countdown{gap:17px}
 .opening-copy .countdown-unit{flex-direction:column;align-items:center;gap:3px}
 .hero .opening-copy .countdown-unit strong{font-size:23px}
 .hero .opening-copy .countdown-unit span{font-size:11px}
 .hero .opening-copy .scroll-cue{height:29px;margin:0}
}
html[lang=hi] .hero .opening-heading>.eyebrow{font-size:13px;letter-spacing:0}
html[lang=hi] .hero .opening-copy .pretitle{font:500 23px/1.6 var(--serif)}
html[lang=hi] .hero .opening-copy h1{font-size:clamp(43px,4.8vw,72px);line-height:1.4;margin:0}
html[lang=hi] .hero .opening-copy .countdown-widget .eyebrow{font-size:12px;letter-spacing:0}
@media(max-width:599px){
 html[lang=hi] .opening-heading,html[lang=hi] .opening-details{gap:5px}
 html[lang=hi] .hero .opening-heading>.eyebrow{font-size:12px}
 html[lang=hi] .hero .opening-copy .pretitle{font-size:19px;line-height:1.5}
 html[lang=hi] .hero .opening-copy h1{font-size:34px;line-height:1.4}
 html[lang=hi] .hero .opening-copy .countdown-widget .eyebrow{font-size:11px}
}
@media(min-width:600px) and (max-width:799px){
 .hero .opening-copy .countdown-unit{flex-direction:column;align-items:center;gap:2px}
 .hero .opening-copy .countdown{gap:22px}
}
@media(min-width:600px) and (max-width:1100px){
 .opening-heading{top:calc(18.5% + var(--intro-drop));gap:6px}
 .hero .opening-heading>.eyebrow{font-size:12px}
 .hero .opening-copy .pretitle{font-size:23px}
 .hero .opening-copy h1{font-size:52px}
 .hero .opening-copy .hero-date{font-size:16px}
 .hero .opening-copy .hero-place{font-size:13px}
 .opening-details{top:72%;gap:7px}
 .hero .opening-copy .countdown-unit strong{font-size:23px}
 .hero .opening-copy .countdown-unit span{font-size:11px}
 .hero .opening-copy .scroll-cue{height:26px}
}