/* Illustrated event scenes (Haldi & Mehendi, Sangeet). Everything is scoped under .hz-; nothing here touches other sections.
   Per-scene values (--hz-surround, --hz-paper-img, --hz-crop, --hz-deskh) are set by event-scene.js. */
.hz-band{
  --hz-ink:#370606;            /* sampled from the PSD text layer */
  --hz-paper:#FFF4DF;
  --hz-glow:250,160,40;
  position:relative;isolation:isolate;overflow:hidden;list-style:none;
  background:var(--hz-paper);
  /* full-bleed: width and left offset are set by event-scene.js so it spans the viewport exactly */
  width:100vw;max-width:none;scroll-margin-top:72px;
}
.hz-band::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--hz-surround) center/cover no-repeat}
.hz-band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,244,223,.55),rgba(255,244,223,0) 22%,rgba(255,244,223,0) 78%,rgba(255,244,223,.55))}

.hz-stage{position:relative;margin-inline:auto;aspect-ratio:1748/2480;max-width:100%;overflow:hidden;
  width:min(100%, calc(94svh * 1748 / 2480), 900px);container-type:inline-size}
@supports not (height:1svh){ .hz-stage{width:min(100%, calc(94vh * 1748 / 2480), 900px)} }
@media (min-width:700px){
  .hz-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
}
.hz-stage > img,.hz-stage > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.hz-stage > canvas.hz-girls-v,.hz-stage > img.hz-girls-v{inset:auto;left:0;width:100%}

.hz-glow{position:absolute;border-radius:50%;pointer-events:none;opacity:.6;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,206,100,.95),rgba(var(--hz-glow),.62) 28%,rgba(var(--hz-glow),.26) 58%,rgba(var(--hz-glow),0) 100%);
  filter:blur(1px);transform:translate(-50%,-50%);animation:hz-flicker var(--d,3.4s) ease-in-out var(--delay,0s) infinite}
.hz-glow::after{content:"";position:absolute;inset:30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,246,214,.85),rgba(255,214,130,0))}
@keyframes hz-flicker{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.96)}
  14%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}
  22%{opacity:.55}
  37%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  52%{opacity:.5;transform:translate(-50%,-50%) scale(.98)}
  68%{opacity:.92;transform:translate(-50%,-50%) scale(1.08)}
  79%{opacity:.58}
  90%{opacity:.8}
}
.hz-band.hz-paused .hz-glow{animation-play-state:paused}
.hz-band.hz-still .hz-glow{animation:none;opacity:.6}

/* event details in the cream area between the columns (PSD text sat at x517–1229, y128–778) */
.hz-details{position:absolute;left:24%;right:24%;top:4.6%;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9cqw;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;color:var(--hz-ink);font-variant-numeric:lining-nums}
.hz-details h3{margin:0 0 .4cqw;font-weight:600;font-size:clamp(15px,3.55cqw,34px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;text-wrap:balance}
.hz-details .hz-desc{display:block;margin:0 0 .6cqw;font-weight:500;font-size:clamp(9.5px,2.05cqw,19px);line-height:1.32;text-wrap:balance}
.hz-details .hz-when,.hz-details .hz-venue{margin:0;font-weight:700;font-size:clamp(11.5px,2.35cqw,22px);line-height:1.25}
.hz-details .hz-place{margin:0;font-weight:500;font-size:clamp(11px,2.1cqw,19px);line-height:1.25}
.hz-details .hz-dress{margin:.5cqw 0 0;font-style:italic;font-weight:500;font-size:clamp(10.5px,1.95cqw,18px);line-height:1.25;text-wrap:balance}
.hz-more{margin-top:1.2cqw;font:600 clamp(9.5px,1.55cqw,13px)/1 var(--font-sans,system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hz-ink);background:rgba(255,251,242,.7);border:1px solid rgba(55,6,6,.28);border-radius:999px;
  padding:.7em 1.3em;cursor:pointer;transition:background .3s ease,border-color .3s ease}
.hz-more:hover{background:rgba(255,251,242,.95);border-color:rgba(55,6,6,.5)}
.hz-more:focus-visible{outline:2px solid #A35A12;outline-offset:3px}
@container (min-width:560px){ .hz-details .hz-desc{display:block} .hz-details{gap:.7cqw} }

/* ---------- layout wrappers ---------- */
.hz-wrap{position:relative}
.hz-frame{position:relative;margin-inline:auto;max-width:100%}
.hz-panel{display:none}

/* ---------- wide screens: details panel beside a larger, trimmed painting ----------
   The painting is portrait, so on a landscape screen the empty sky above the floor is trimmed
   (top 560 px of 2480) and the text moves into a panel on the painting's own watercolour paper. */
@media (min-width:900px) and (orientation:landscape){
  .hz-band{--hz-accent:#A35A12}
  .hz-band::before{inset:0;background:var(--hz-paper-img) center/cover no-repeat}
  .hz-band::after{background:radial-gradient(120% 90% at 50% 50%,rgba(255,244,223,0) 55%,rgba(232,206,160,.35) 100%)}
  .hz-wrap{display:grid;grid-template-columns:minmax(300px,440px) auto;align-items:center;justify-content:center;
    column-gap:clamp(32px,4.5vw,88px);padding-block:clamp(28px,5vh,56px);
    padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
  .hz-frame{margin:0;aspect-ratio:1748/var(--hz-deskh,1920);overflow:hidden;border-radius:22px;
    width:min(calc((100svh - 120px) * 1748 / var(--hz-deskh,1920)), 56vw, 1040px);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 28px 60px -28px rgba(80,45,10,.45),0 0 0 1px rgba(163,90,18,.18)}
  .hz-stage{width:100%;margin-top:calc(-1 * var(--hz-crop,560) / 1748 * 100%);-webkit-mask-image:none;mask-image:none}
  .hz-details,.hz-garland{display:none}

  .hz-panel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--hz-ink);max-width:440px}
  .hz-eyebrow{margin:0;font:600 12px/1.4 var(--font-sans,"Manrope",system-ui,sans-serif);letter-spacing:.24em;text-transform:uppercase;color:var(--hz-accent)}
  .hz-ptitle{margin:0;font:600 clamp(40px,3.6vw,60px)/1.02 "Cormorant Garamond",Georgia,serif;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
  .hz-pdesc{margin:4px 0 0;font:500 clamp(18px,1.35vw,21px)/1.5 "Cormorant Garamond",Georgia,serif;color:#5A2E1C;max-width:36ch}
  .hz-rule{display:block;width:72px;height:1px;margin:8px 0 4px;background:linear-gradient(90deg,var(--hz-accent),rgba(163,90,18,0))}
  .hz-plist{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 20px;align-items:baseline}
  .hz-plist dt{font:600 11px/1.4 var(--font-sans,"Manrope",system-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--hz-accent)}
  .hz-plist dd{margin:0;font:600 clamp(17px,1.2vw,19px)/1.35 "Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums}
  .hz-plist dd:last-child{font-style:italic;font-weight:500}
  .hz-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
  .hz-swatches span{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(55,6,6,.15),0 1px 2px rgba(55,6,6,.15)}
  .hz-pmore{margin-top:10px;font-size:12px;padding:1em 1.8em;background:transparent;border-color:rgba(55,6,6,.4)}
  .hz-pmore:hover{background:rgba(255,251,242,.8)}
  .hz-phost{margin:2px 0 0;font:italic 500 clamp(17px,1.2vw,19px)/1.35 "Cormorant Garamond",Georgia,serif}
}
/* very wide but short windows: keep the panel readable */
@media (min-width:900px) and (orientation:landscape) and (max-height:620px){
  .hz-frame{width:min(calc((100svh - 60px) * 1748 / var(--hz-deskh,1920)), 56vw)}
  .hz-pdesc{display:none}
}

/* host line ("With love, …"), shown where the event has one */
.hz-details .hz-hostl{margin:.6cqw 0 0;font-style:italic;font-weight:500;font-size:clamp(10.5px,1.9cqw,18px);line-height:1.2}
.hz-details .hz-hostn{margin:0;font-weight:700;font-size:clamp(11px,2.1cqw,20px);line-height:1.2}
.hz-panel .hz-phost[hidden]{display:none}

/* ---------- Sangeet: night theme ---------- */
.hz-theme-night{--hz-ink:#FFFFFF;--hz-paper:#020B2E;--hz-accent:#CDA069;--hz-glow:255,214,150}
.hz-theme-night::after{background:linear-gradient(90deg,rgba(2,11,46,.6),rgba(2,11,46,0) 22%,rgba(2,11,46,0) 78%,rgba(2,11,46,.6))}
.hz-theme-night .hz-details{text-shadow:0 1px 10px rgba(2,8,40,.55)}
.hz-theme-night .hz-more{color:#fff;background:rgba(6,16,60,.45);border-color:rgba(255,255,255,.45);text-shadow:none}
.hz-theme-night .hz-more:hover{background:rgba(6,16,60,.75);border-color:rgba(255,255,255,.8)}
.hz-theme-night .hz-more:focus-visible{outline-color:#CDA069}
/* the PSD's text block: x 237–1510, starting at y 926 */
.hz-sangeet .hz-details{left:12%;right:12%;top:36.8%;gap:.75cqw}
.hz-sangeet .hz-details h3{font-weight:500;font-size:clamp(16px,4cqw,38px);letter-spacing:.16em;margin-bottom:.6cqw}
.hz-sangeet .hz-details .hz-desc{font-size:clamp(9.5px,2.3cqw,21px);font-weight:500}
.hz-sangeet .hz-details .hz-when,.hz-sangeet .hz-details .hz-venue{font-size:clamp(11.5px,2.5cqw,23px)}
.hz-sangeet .hz-details .hz-place{font-size:clamp(11px,2.2cqw,20px)}
.hz-sangeet .hz-details .hz-dress{font-size:clamp(10.5px,1.9cqw,18px);margin-top:.9cqw}
@media (min-width:900px) and (orientation:landscape){
  .hz-theme-night::after{background:radial-gradient(120% 90% at 50% 50%,rgba(2,11,46,0) 55%,rgba(0,4,24,.5) 100%)}
  .hz-theme-night .hz-frame{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 70px -26px rgba(0,0,0,.7),0 0 0 1px rgba(205,160,105,.28)}
  .hz-theme-night .hz-pdesc{color:rgba(255,255,255,.82)}
  .hz-theme-night .hz-rule{background:linear-gradient(90deg,var(--hz-accent),rgba(205,160,105,0))}
  .hz-theme-night .hz-swatches span{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4)}
  .hz-theme-night .hz-pmore{background:transparent;border-color:rgba(255,255,255,.5)}
  .hz-theme-night .hz-pmore:hover{background:rgba(255,255,255,.1)}
}

/* ---------- diya flames (Wedding) ---------- */
.hz-flame{position:absolute;pointer-events:none;background:center bottom/100% 100% no-repeat;
  transform:translate(-50%,-100%);transform-origin:50% 100%;
  animation:hz-flame var(--d,1.2s) ease-in-out var(--delay,0s) infinite;filter:drop-shadow(0 0 2px rgba(255,170,60,.7))}
.hz-flame-soft{filter:none;animation-name:hz-fire}
@keyframes hz-flame{
  0%,100%{transform:translate(-50%,-100%) scale(1,1) skewX(0deg)}
  18%{transform:translate(-50%,-100%) scale(.93,1.1) skewX(4deg)}
  37%{transform:translate(-50%,-100%) scale(1.05,.93) skewX(-3deg)}
  58%{transform:translate(-50%,-100%) scale(.96,1.07) skewX(5deg)}
  79%{transform:translate(-50%,-100%) scale(1.03,.95) skewX(-4deg)}
}
@keyframes hz-fire{
  0%,100%{transform:translate(-50%,-100%) scale(1,1) skewX(0deg)}
  25%{transform:translate(-50%,-100%) scale(.97,1.07) skewX(2.5deg)}
  50%{transform:translate(-50%,-100%) scale(1.03,.95) skewX(-2deg)}
  75%{transform:translate(-50%,-100%) scale(.98,1.05) skewX(3deg)}
}
.hz-band.hz-paused .hz-flame{animation-play-state:paused}
.hz-band.hz-still .hz-flame{animation:none}

/* ---------- Wedding: details in the sunset sky above the mandapa (PSD text: x 223–1522, y 106–752) ---------- */
.hz-wedding .hz-details{left:11%;right:11%;top:3.6%;gap:.7cqw}
.hz-wedding .hz-details h3{font-weight:500;font-size:clamp(16px,4cqw,38px);letter-spacing:.18em}
.hz-wedding .hz-details .hz-when:nth-of-type(3){font-weight:600;text-wrap:balance}
.hz-wedding .hz-panel .hz-plist dd{white-space:pre-line}

/* ---------- Reception: details in the night sky above the fireworks (PSD text: x 387–1358, y 113–657) ---------- */
.hz-reception .hz-details{left:12%;right:12%;top:4.2%;gap:.7cqw}
.hz-reception .hz-details h3{font-weight:500;font-size:clamp(16px,4cqw,38px);letter-spacing:.18em}
.hz-reception .hz-details .hz-desc{font-size:clamp(9.5px,2.3cqw,21px);font-weight:500}

/* A dusk wash replaces the blank spacer before Reception. */
#events .hz-wedding{margin-block-end:0!important}
#events .hz-reception{margin-block-start:0!important;padding-top:140px}
.hz-reception::before{inset:0;background:var(--hz-surround) center/cover no-repeat}
.hz-reception-bridge{position:absolute;inset:0 0 auto;height:180px;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(135,102,60,.5) 28%,rgba(18,37,43,.88) 68%,transparent 100%),linear-gradient(90deg,#f6e6b5,#f4dfaa 40%,#f2c179);mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%)}
.hz-reception .hz-wrap{position:relative;z-index:1}
.hz-stars{position:absolute;inset:28px 0 0;z-index:2;pointer-events:none;overflow:hidden}
.hz-star{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fff7d8;box-shadow:0 0 7px 2px #f8db9b80;animation:hz-twinkle var(--d) ease-in-out var(--delay) infinite}
.hz-star::before,.hz-star::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(transparent,#fff4ce,transparent);transform:translate(-50%,-50%);width:1px;height:calc(var(--size) * 3)}
.hz-star::after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes hz-twinkle{0%,100%{opacity:.12;transform:scale(.55)}45%{opacity:.9;transform:scale(1)}60%{opacity:.35;transform:scale(.8)}}
.hz-paused .hz-star{animation-play-state:paused}
.hz-still .hz-star{animation:none;opacity:.45}
@media(prefers-reduced-motion:reduce){.hz-star{animation:none;opacity:.45}}

/* Sangeet: crystal glints and small, independently flickering candle flames. */
#events .hz-haldi{margin-block-end:0!important}
#events .hz-sangeet{margin-block-start:0!important;padding-top:140px}
.hz-garland-bridge{position:absolute;inset:0 0 auto;height:160px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#fff0cd 0%,#d9bc86 22%,#5d5b65 52%,#101d48 78%,#020b2e 100%)}
.hz-garland-bridge img,.hz-reception-bridge img{display:block;position:absolute;left:50%;top:50%;transform:translate(-43.75%,-50%);margin:0;width:min(114.2857%,1371px);max-width:none;height:112px;object-fit:fill;filter:drop-shadow(0 4px 5px #0003);clip-path:inset(0 12.5% 0 0)}
.hz-sangeet .hz-wrap{position:relative;z-index:2}
/* Feather the artwork into the floral transition instead of exposing a rectangular seam. */
.hz-garland-bridge{mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}
.hz-haldi::after{z-index:3;pointer-events:none;background:linear-gradient(to top,#fff0cd,transparent 44px)}
.hz-wedding::after{z-index:3;pointer-events:none;background:linear-gradient(to top,#f4dfaa,transparent 36px)}
.hz-haldi .hz-stage,.hz-wedding .hz-stage{mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
.hz-garland-bridge img,.hz-reception-bridge img{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent),linear-gradient(to right,transparent,#000 5%,#000 82%,transparent 87.5%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent),linear-gradient(to right,transparent,#000 5%,#000 82%,transparent 87.5%);
  mask-composite:intersect;opacity:.9;
}
.hz-sangeet .hz-stage,.hz-reception .hz-stage{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 70px),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 70px),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
  mask-composite:intersect;
}
@media(min-width:900px) and (orientation:landscape){
  .hz-sangeet .hz-frame,.hz-reception .hz-frame{box-shadow:none;border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45px,#000 calc(100% - 24px),transparent),linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent,#000 45px,#000 calc(100% - 24px),transparent),linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-composite:intersect;
  }
}
@media(min-width:900px) and (orientation:landscape){#events .hz-sangeet{padding-top:170px}.hz-garland-bridge{height:200px}.hz-garland-bridge img,.hz-reception-bridge img{height:145px}}
.hz-chandelier-stars{position:absolute;inset:0;pointer-events:none}
.hz-divider-garland{position:absolute;z-index:4;pointer-events:none;left:50%;top:18px;width:min(105%,1300px);max-width:none;height:112px;object-fit:fill;transform:translateX(-43.75%);clip-path:inset(0 12.5% 0 0);filter:drop-shadow(0 3px 3px #0003)}
@media(min-width:900px) and (orientation:landscape){.hz-divider-garland{top:12px;height:145px}}
.hz-reception .hz-stage{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 24px),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.hz-chandelier-stars .hz-star{background:#fff;box-shadow:0 0 7px 2px #d9eaff99}
.hz-candle-flame{position:absolute;width:.65%;height:.65%;pointer-events:none;border-radius:65% 35% 55% 45%;transform-origin:50% 100%;background:radial-gradient(ellipse at 50% 65%,#fffce8 15%,#ffe5a2 45%,#efad40aa 70%,transparent 90%);filter:drop-shadow(0 0 3px #ffc464);animation:hz-candle-sway var(--d) ease-in-out var(--delay) infinite}
@keyframes hz-candle-sway{0%,100%{opacity:.65;transform:translate(-50%,-100%) scale(.9,1) rotate(-5deg)}30%{opacity:1;transform:translate(-50%,-100%) scale(1,1.16) rotate(7deg)}65%{opacity:.75;transform:translate(-50%,-100%) scale(.85,.94) rotate(-3deg)}}
.hz-paused .hz-candle-flame{animation-play-state:paused}
.hz-still .hz-candle-flame{animation:none;transform:translate(-50%,-100%);opacity:.7}
@media(prefers-reduced-motion:reduce){.hz-candle-flame{animation:none;transform:translate(-50%,-100%);opacity:.7}}
/* Reception: a continuous dusk wash, without overlapping masked background bands. */
.hz-reception{background:#001b2b}
.hz-reception::before{background:#001b2b}
.hz-reception::after{background:none}
.hz-reception-bridge{height:230px;background:linear-gradient(to bottom,#f4dfaa 0%,#d2b87f 19%,#817859 43%,#344743 67%,#102e35 84%,#001b2b 100%);mask-image:none;-webkit-mask-image:none}
.hz-reception .hz-stage{mask-image:none;-webkit-mask-image:none}
.hz-reception .hz-stage > img:first-child{
 mask-image:linear-gradient(to bottom,transparent,#000 85px),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 85px),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
 mask-composite:intersect;-webkit-mask-composite:source-in;
}
/* Give the twirling skirts more breathing room above the floral transition. */
.hz-haldi .hz-girls{transform:translateY(-1.2%) scale(.94);transform-origin:50% 41.5323%}
.hz-haldi .hz-girls-v{transform:translateY(-2.29%) scale(.94);transform-origin:50% 0}
/* Stronger, slower-to-fade glints remain visible against the painted scenes. */
.hz-reception .hz-star,.hz-sangeet .hz-star{width:calc(var(--size) * 1.35);height:calc(var(--size) * 1.35);background:#fffbe6;box-shadow:0 0 5px 2px #fff4c6bb,0 0 13px 4px #e6bd7055;animation-name:hz-visible-twinkle}
.hz-chandelier-stars{z-index:3}
.hz-reception .hz-stars{z-index:3}
.hz-reception .hz-star::before,.hz-reception .hz-star::after,.hz-sangeet .hz-star::before,.hz-sangeet .hz-star::after{height:calc(var(--size) * 4);background:linear-gradient(transparent,#fffce4,transparent)}
@keyframes hz-visible-twinkle{0%,100%{opacity:.3;transform:scale(.65)}32%{opacity:.65;transform:scale(.85)}48%{opacity:1;transform:scale(1.15)}65%{opacity:.5;transform:scale(.8)}80%{opacity:.85;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hz-reception .hz-star,.hz-sangeet .hz-star{animation:none;opacity:.65}}
/* Quiet gold fireworks in the Reception sky, staggered over a nine-second cycle. */
.hz-fireworks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hz-firework{position:absolute;width:1px;height:1px}
.hz-firework-ray{position:absolute;inset:0;transform:rotate(var(--angle));transform-origin:center}
.hz-firework-ray::after{content:"";position:absolute;left:0;top:0;width:2px;height:6px;border-radius:50%;background:#fff3c4;box-shadow:0 0 4px #ffd17b;opacity:0;animation:hz-firework-burst 9s ease-out var(--burst-delay) infinite}
@keyframes hz-firework-burst{0%,4%{opacity:0;transform:translateY(0) scale(.3)}7%{opacity:.95}15%{opacity:.8;transform:translateY(calc(-1 * var(--reach))) scale(1)}27%{opacity:0;transform:translateY(calc(-1.25 * var(--reach))) scale(.25)}100%{opacity:0;transform:translateY(calc(-1.25 * var(--reach))) scale(.25)}}
.hz-paused .hz-firework-ray::after{animation-play-state:paused}
.hz-still .hz-fireworks{display:none}
@media(prefers-reduced-motion:reduce){.hz-fireworks{display:none}}

/* Small phones: the scenes now carry the PSD's description and dress code, so tighten spacing to keep the text in the sky/cream area */
@container (max-width:400px){
  .hz-band .hz-details{gap:.25cqw}
  .hz-band .hz-details h3{margin-bottom:0}
  .hz-band .hz-details .hz-desc{margin:0;font-size:9px;line-height:1.25}
  .hz-band .hz-details .hz-when,.hz-band .hz-details .hz-venue{font-size:10.5px;line-height:1.2}
  .hz-band .hz-details .hz-place{font-size:10px;line-height:1.2}
  .hz-band .hz-details .hz-dress{font-size:9.5px;margin-top:.3cqw}
  .hz-band .hz-details .hz-hostl{font-size:9.5px;margin-top:.3cqw}
  .hz-band .hz-details .hz-hostn{font-size:10.5px}
}

/* Garland removed: shorter colour blend into the Sangeet and Reception night scenes */
#events .hz-sangeet,#events .hz-reception{padding-top:56px}
.hz-garland-bridge{height:90px}
.hz-reception-bridge{height:100px}
@media(min-width:900px) and (orientation:landscape){
  #events .hz-sangeet,#events .hz-reception{padding-top:72px}
  .hz-garland-bridge{height:110px}
  .hz-reception-bridge{height:120px}
}

/* Reception: the painted string-light bulbs glow and twinkle; a slow wave of light travels along the strings */
.hz-bulb{position:absolute;border-radius:50%;pointer-events:none;aspect-ratio:1;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,250,228,.95),rgba(255,214,140,.55) 32%,rgba(255,190,90,.18) 62%,rgba(255,190,90,0) 100%);
  transform:translate(-50%,-50%);opacity:.5;animation:hz-bulb var(--d,3.6s) ease-in-out var(--delay,0s) infinite}
.hz-bulb-fast{animation-name:hz-bulb-sparkle}
@keyframes hz-bulb{
  0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.85)}
  45%{opacity:1;transform:translate(-50%,calc(-50% + 1px)) scale(1.18)}
  60%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}
}
@keyframes hz-bulb-sparkle{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  35%{opacity:.55}
  55%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}
}
.hz-band.hz-paused .hz-bulb{animation-play-state:paused}
.hz-band.hz-still .hz-bulb{animation:none;opacity:.7}

/* Sangeet: stage spotlights sweeping behind the band (sources along the back of the stage) */
.hz-beams{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 38%,#000 52%,#000 84%,transparent 86%);mask-image:linear-gradient(to bottom,transparent 38%,#000 52%,#000 84%,transparent 86%)}
.hz-beam{position:absolute;top:81.5%;width:9%;height:36%;transform-origin:50% 100%;mix-blend-mode:screen;filter:blur(3px);opacity:.75;
  background:linear-gradient(to top,rgba(var(--c),.75),rgba(var(--c),.28) 55%,rgba(var(--c),0));
  clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);
  transform:translate(-50%,-100%) rotate(var(--from));animation:hz-beam-sweep var(--d,7s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes hz-beam-sweep{
  0%{transform:translate(-50%,-100%) rotate(var(--from));opacity:.55}
  50%{opacity:.9}
  100%{transform:translate(-50%,-100%) rotate(var(--to));opacity:.6}
}
/* Sangeet: warm halo around each candle in front */
.hz-candle-glow{position:absolute;width:4.2%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,236,180,.9),rgba(255,190,90,.45) 35%,rgba(255,160,60,.15) 65%,rgba(255,160,60,0));
  transform:translate(-50%,-50%);opacity:.7;animation:hz-candle-glow var(--d,2.6s) ease-in-out var(--delay,0s) infinite}
@keyframes hz-candle-glow{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}
  30%{opacity:.95;transform:translate(-50%,-52%) scale(1.08)}
  55%{opacity:.68;transform:translate(-50%,-50%) scale(.98)}
  78%{opacity:.88;transform:translate(-50%,-51%) scale(1.04)}
}
.hz-band.hz-paused .hz-beam,.hz-band.hz-paused .hz-candle-glow{animation-play-state:paused}
.hz-band.hz-still .hz-beam{animation:none;transform:translate(-50%,-100%) rotate(0deg)}
.hz-band.hz-still .hz-candle-glow{animation:none;opacity:.7}
@media(prefers-reduced-motion:reduce){.hz-beam,.hz-candle-glow{animation:none}}

/* ---------- Wedding: sunset rays, Ganesha aura, birds, lamp halos, sacred-fire sparks and smoke ---------- */
.hz-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hz-rays{position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,200,.55) 0deg 4deg,rgba(255,240,200,0) 4deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 12%,#000 22%,rgba(0,0,0,.6) 55%,transparent 80%);mask-image:radial-gradient(closest-side,transparent 12%,#000 22%,rgba(0,0,0,.6) 55%,transparent 80%);
  animation:hz-rays 26s ease-in-out infinite alternate}
.hz-sky{-webkit-mask-image:linear-gradient(to bottom,transparent 20%,#000 30%,#000 41%,transparent 48%);mask-image:linear-gradient(to bottom,transparent 20%,#000 30%,#000 41%,transparent 48%)}
@keyframes hz-rays{0%{transform:translate(-50%,-50%) rotate(-7deg);opacity:.35}50%{opacity:.6}100%{transform:translate(-50%,-50%) rotate(7deg);opacity:.4}}
.hz-aura{position:absolute;left:50%;top:51.6%;width:10%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,236,170,.85),rgba(255,200,90,.4) 45%,rgba(255,200,90,0));animation:hz-aura 4.5s ease-in-out infinite}
@keyframes hz-aura{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}}
.hz-bird{position:absolute;left:0;width:calc(4.4% * var(--s,1));aspect-ratio:24/10;opacity:0;
  animation:hz-bird-fly var(--d,26s) linear var(--delay,0s) infinite}
.hz-bird svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 70%;animation:hz-bird-flap .55s ease-in-out infinite alternate}
.hz-bird path{fill:none;stroke:#5a2a1c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes hz-bird-fly{0%{left:-6%;transform:translateY(0);opacity:0}6%{opacity:.85}50%{transform:translateY(-12px)}94%{opacity:.85}100%{left:104%;transform:translateY(6px);opacity:0}}
@keyframes hz-bird-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
.hz-lamp-glow{position:absolute;width:6%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,240,190,.95),rgba(255,190,80,.5) 35%,rgba(255,160,50,.18) 65%,rgba(255,160,50,0));
  animation:hz-candle-glow var(--d,2.4s) ease-in-out var(--delay,0s) infinite}
.hz-spark{position:absolute;width:.45%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:#ffd27a;box-shadow:0 0 6px 2px rgba(255,170,60,.8);opacity:0;
  animation:hz-spark var(--d,2.6s) ease-out var(--delay,0s) infinite}
@keyframes hz-spark{0%{opacity:0;transform:translate(-50%,0) scale(1)}10%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-3200%) scale(.4)}}
.hz-smoke{position:absolute;width:5%;height:7%;border-radius:50%;pointer-events:none;filter:blur(6px);opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));animation:hz-smoke 7s ease-out var(--delay,0s) infinite}
@keyframes hz-smoke{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:.55}100%{opacity:0;transform:translate(calc(-50% + 18px),-260%) scale(1.8,2.2)}}
.hz-band.hz-paused :is(.hz-rays,.hz-aura,.hz-bird,.hz-bird svg,.hz-lamp-glow,.hz-spark,.hz-smoke){animation-play-state:paused}
.hz-band.hz-still :is(.hz-rays,.hz-aura,.hz-lamp-glow){animation:none}
.hz-band.hz-still :is(.hz-bird,.hz-spark,.hz-smoke){display:none}
@media(prefers-reduced-motion:reduce){.hz-rays,.hz-aura,.hz-lamp-glow{animation:none}.hz-bird,.hz-spark,.hz-smoke{display:none}}

/* Haldi: leaf-and-fairy-light garland mounted on the back wall, following the pillars' perspective */
.hz-garland{position:absolute;inset:0;z-index:1;pointer-events:none}
.hz-garland svg{display:block;overflow:visible}
.hz-garland .sh{fill:none;stroke:rgba(90,60,20,.18);stroke-width:4;transform:translate(0,1.5px);filter:blur(1.5px)}
.hz-garland .w{fill:none;stroke:#4f6d24;stroke-width:1.1;stroke-linejoin:round}
.hz-garland .w2{stroke:#7a6332;stroke-width:.7;opacity:.85}
.hz-garland ellipse{filter:drop-shadow(0 .6px .4px rgba(40,50,10,.25))}
.hz-garland .h{fill:url(#hzG);opacity:.85;animation:hz-g-bulb var(--d,3s) ease-in-out var(--delay,0s) infinite}
.hz-garland .c{fill:#fff6cf;filter:drop-shadow(0 0 1.4px #ffb627) drop-shadow(0 0 3px rgba(255,170,40,.85));animation:hz-g-bulb var(--d,3s) ease-in-out var(--delay,0s) infinite}
@keyframes hz-g-bulb{0%,100%{opacity:.68}50%{opacity:1}}
.hz-band.hz-paused .hz-garland .h,.hz-band.hz-paused .hz-garland .c{animation-play-state:paused}
.hz-band.hz-still .hz-garland .h,.hz-band.hz-still .hz-garland .c{animation:none}
@media(prefers-reduced-motion:reduce){.hz-garland .h,.hz-garland .c{animation:none}}
/* hidden where the text moves to the side panel (wide desktop), so the garland never frames an empty wall */
/* bigger, livelier bulbs: each one flickers, pulses and sparkles on its own */
.hz-garland .h{opacity:.9;animation:hz-g-dance var(--d,1.6s) ease-in-out var(--delay,0s) infinite}
.hz-garland .c{fill:#fffbe6;filter:drop-shadow(0 0 2px #ffb627) drop-shadow(0 0 5px rgba(255,160,30,.95));animation:hz-g-dance var(--d,1.6s) ease-in-out var(--delay,0s) infinite}
@keyframes hz-g-dance{
  0%,100%{opacity:.5;transform:scale(.82)}
  25%{opacity:1;transform:scale(1.15)}
  45%{opacity:.7;transform:scale(.95)}
  65%{opacity:1;transform:scale(1.22)}
  85%{opacity:.62;transform:scale(.9)}
}

/* Wedding: soft sunbeams from behind the temple dome. Two blurred ray sets turn slowly in opposite
   directions, so the light gently shimmers; a warm sun glow behind the dome slowly breathes. */
.hz-wedding .hz-sky{-webkit-mask-image:linear-gradient(to bottom,transparent 14%,rgba(0,0,0,.55) 24%,#000 32%,#000 40%,transparent 47%);mask-image:linear-gradient(to bottom,transparent 14%,rgba(0,0,0,.55) 24%,#000 32%,#000 40%,transparent 47%)}
.hz-wedding .hz-rays{left:50%;top:42%;width:170%;aspect-ratio:1;opacity:.5;mix-blend-mode:soft-light;filter:blur(2.2cqw);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,246,214,.95) 0deg 3.2deg,rgba(255,246,214,0) 6deg 11deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 9%,#000 18%,rgba(0,0,0,.7) 50%,transparent 78%);mask-image:radial-gradient(closest-side,transparent 9%,#000 18%,rgba(0,0,0,.7) 50%,transparent 78%);
  animation:hz-rays-a 34s ease-in-out infinite alternate}
.hz-wedding .hz-rays-b{opacity:.42;mix-blend-mode:screen;filter:blur(3cqw);
  background:repeating-conic-gradient(from 4deg at 50% 50%,rgba(255,226,170,.55) 0deg 5deg,rgba(255,226,170,0) 9deg 17deg);
  animation:hz-rays-b 46s ease-in-out infinite alternate}
@keyframes hz-rays-a{0%{transform:translate(-50%,-50%) rotate(-6deg);opacity:.38}50%{opacity:.62}100%{transform:translate(-50%,-50%) rotate(6deg);opacity:.42}}
@keyframes hz-rays-b{0%{transform:translate(-50%,-50%) rotate(7deg);opacity:.28}50%{opacity:.5}100%{transform:translate(-50%,-50%) rotate(-5deg);opacity:.32}}
.hz-sunglow{position:absolute;left:50%;top:41%;width:58%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,250,225,.75),rgba(255,224,160,.35) 40%,rgba(255,200,120,0) 100%);
  animation:hz-sunglow 9s ease-in-out infinite}
@keyframes hz-sunglow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
.hz-band.hz-paused :is(.hz-sunglow,.hz-rays-b){animation-play-state:paused}
.hz-band.hz-still :is(.hz-sunglow,.hz-rays,.hz-rays-b){animation:none}
@media(prefers-reduced-motion:reduce){.hz-sunglow,.hz-wedding .hz-rays{animation:none}}
.hz-wedding .hz-rays{mix-blend-mode:screen;filter:blur(.5cqw);opacity:.6;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,248,220,.75) 0deg 2.6deg,rgba(255,248,220,0) 5deg 11deg)}
.hz-wedding .hz-rays-b{filter:blur(.9cqw);
  background:repeating-conic-gradient(from 4deg at 50% 50%,rgba(255,232,180,.5) 0deg 4deg,rgba(255,232,180,0) 7.5deg 17deg)}
@keyframes hz-rays-a{0%{transform:translate(-50%,-50%) rotate(-6deg);opacity:.5}50%{opacity:.85}100%{transform:translate(-50%,-50%) rotate(6deg);opacity:.55}}
@keyframes hz-rays-b{0%{transform:translate(-50%,-50%) rotate(7deg);opacity:.4}50%{opacity:.7}100%{transform:translate(-50%,-50%) rotate(-5deg);opacity:.45}}
/* clearer but still gentle movement of the sun rays */
@keyframes hz-rays-a{0%{transform:translate(-50%,-50%) rotate(-13deg);opacity:.45}50%{opacity:.95}100%{transform:translate(-50%,-50%) rotate(13deg);opacity:.5}}
@keyframes hz-rays-b{0%{transform:translate(-50%,-50%) rotate(15deg);opacity:.3}50%{opacity:.8}100%{transform:translate(-50%,-50%) rotate(-11deg);opacity:.35}}
.hz-wedding .hz-rays{animation-duration:15s}
.hz-wedding .hz-rays-b{animation-duration:21s}
.hz-shaft{position:absolute;left:50%;top:42%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);mix-blend-mode:screen;filter:blur(1.4cqw);
  background:conic-gradient(from -14deg at 50% 50%,rgba(255,250,228,0) 0deg,rgba(255,250,228,.8) 9deg,rgba(255,250,228,.8) 15deg,rgba(255,250,228,0) 26deg,rgba(255,250,228,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 8%,#000 18%,rgba(0,0,0,.6) 52%,transparent 80%);mask-image:radial-gradient(closest-side,transparent 8%,#000 18%,rgba(0,0,0,.6) 52%,transparent 80%);
  animation:hz-shaft 12s ease-in-out infinite alternate}
@keyframes hz-shaft{0%{transform:translate(-50%,-50%) rotate(-62deg);opacity:0}15%{opacity:.75}50%{opacity:.95}85%{opacity:.75}100%{transform:translate(-50%,-50%) rotate(62deg);opacity:0}}
.hz-band.hz-paused .hz-shaft{animation-play-state:paused}
.hz-band.hz-still .hz-shaft{display:none}
@media(prefers-reduced-motion:reduce){.hz-shaft{display:none}}
.hz-bird{display:none!important}
/* fewer, wider-spaced rays (no sweeping flash) */
.hz-shaft{display:none!important}
.hz-wedding .hz-rays{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,248,220,.7) 0deg 3.4deg,rgba(255,248,220,0) 6.5deg 22deg)}
.hz-wedding .hz-rays-b{background:repeating-conic-gradient(from 11deg at 50% 50%,rgba(255,232,180,.45) 0deg 4.5deg,rgba(255,232,180,0) 8deg 34deg)}
/* Reception: animated fireworks over the night sky */
.hz-fireworks{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.hz-band.hz-still .hz-fireworks{display:none}

/* loading: a blurred copy of the painting covers the scene (text stays readable) until the painting has loaded, then fades away */
.hz-stage::before{content:"";position:absolute;inset:-12px;z-index:50;pointer-events:none;
  background:var(--hz-lqip) center top/100% auto no-repeat;filter:blur(12px);transition:opacity .9s ease,visibility 0s .9s}
.hz-stage.hz-ready::before{opacity:0;visibility:hidden}
.hz-stage:not(.hz-ready) .hz-details{z-index:51}
/* fallback when a phone won't play the video: the end pose fades in over the start pose */
.hz-stage>img.hz-girls-end{opacity:0;transition:opacity 1.4s ease-in-out}
.hz-stage>img.hz-girls-end.is-on{opacity:1}
/* nothing in the event scenes downloads while the invitation cover is still closed */
html:not(.inv-open) #events .hz-stage,html:not(.inv-open) #wardrobe,html:not(.inv-open) #venue,html:not(.inv-open) #rsvp{display:none}