/* Ceremony hero pages (see ceremony.js). Motion = transform / opacity only; static shadows. */

.hx.cer { padding: 0; min-height: 0; display: block; text-align: center; background: var(--cer-wall); --hx-gold: var(--cer-gold); --hx-ink: var(--cer-ink); --hx-text: var(--cer-text); }
.cer-scene { position: relative; height: max(100svh, 640px); overflow: hidden; isolation: isolate; }
.cer-scene::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--cer-wallpaint); }

/* the arch: fill + two gold lines that draw themselves in */
.cer-arch { position: absolute; left: 9%; right: 9%; top: 5.5%; bottom: 7%; z-index: 2; }
.cer-arch-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px var(--cer-shadow, rgba(80,50,20,.18))); }
.cer-arch-fill { fill: var(--cer-panel); }
.cer-arch-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cerDraw 2.4s cubic-bezier(.6,0,.2,1) .3s forwards; }
.cer-arch-line.in { animation-delay: .7s; }
@keyframes cerDraw { to { stroke-dashoffset: 0; } }

/* text inside the arch */
.cer-head { position: absolute; left: 14%; right: 14%; top: 15%; z-index: 4; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.cer-head p, .cer-head h1 { margin: 0; }
.cer-greet { font-family: var(--f-script); font-size: calc(24px * var(--ss)); color: var(--cer-gold); margin-bottom: 6px !important; }
.cer-ornament { width: 46px; height: 46px; margin-bottom: 14px; opacity: 0; animation: cerRise 1s ease .9s forwards; }
.cer-ornament.i-mother { height: 64px; width: 48px; }
.cer-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.cer-icon .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cerDraw 2.6s ease 1.1s forwards; }
.cer-eyebrow { font-family: var(--f-caps); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--cer-text); opacity: 0; animation: cerRise 1s ease 1.15s forwards; }
.cer-title {
  font-family: var(--f-caps); font-weight: 500; text-transform: uppercase; color: var(--cer-ink); line-height: 1.04; margin-top: 6px !important;
  font-size: min(clamp(30px, 10vw, 46px), calc(min(66vw, 420px) / (var(--len, 8) * .78))); letter-spacing: .1em;
  opacity: 0; animation: cerTitle 1.6s cubic-bezier(.2,.7,.2,1) 1.3s forwards;
}
.cer-title span { display: block; font-size: 1.35em; letter-spacing: .06em; }
.cer-title small { display: block; font-size: .5em; letter-spacing: .32em; margin-top: 4px; }
.cer-title.big { font-size: min(clamp(64px, 24vw, 110px), calc(min(66vw, 420px) / (var(--len, 3) * .72))); letter-spacing: .08em; font-weight: 400; }
@keyframes cerTitle { from { opacity: 0; transform: translateY(14px) scale(.96); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
@keyframes cerRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cer-divider { width: 150px; height: 16px; margin: 14px 0 10px; opacity: 0; animation: cerRise 1s ease 1.7s forwards; }
.cer-div { display: block; width: 100%; height: 100%; }
.cer-of { font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .3em; line-height: 1.9; white-space: pre-line; text-transform: uppercase; color: var(--cer-text); opacity: 0; animation: cerRise 1s ease 1.9s forwards; }
.cer-name { font-family: var(--f-script); font-size: calc(clamp(34px, 10vw, 46px) * var(--ss)); line-height: 1.2; color: var(--cer-name, var(--cer-gold)); margin-top: 2px !important; opacity: 0; animation: cerRise 1.2s ease 2.05s forwards; }
.cer-parents { font-size: 13px; color: var(--cer-text); opacity: 0; animation: cerRise 1s ease 2.25s forwards; }

/* the styled scene at the foot of the arch */
.cer-props-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 3; will-change: transform; }
.cer-props { display: block; width: 100%; height: 100%; overflow: visible; }
.cer-props-wrap { opacity: 0; animation: cerProps 1.4s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes cerProps { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.cer-extras { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.cer-extras > * { position: absolute; }

/* "scroll down" button: a ring with a chevron and a thread */
.cer-down { position: absolute; left: 50%; bottom: 3%; z-index: 5; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 1px solid var(--cer-gold); background: var(--cer-panel); display: grid; place-items: center; animation: cerBob 2.4s ease-in-out infinite; }
.cer-down span { width: 8px; height: 8px; border-right: 1.5px solid var(--cer-gold); border-bottom: 1.5px solid var(--cer-gold); transform: translateY(-2px) rotate(45deg); }
.cer-down::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: 40px; background: linear-gradient(var(--cer-gold), transparent); }
@keyframes cerBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* light through leaves on the wall */
.cer-gobo { position: absolute; inset: -10% -20%; z-index: 0; opacity: var(--cer-gobo, .1); filter: blur(5px); mix-blend-mode: multiply; will-change: transform; }
.cer-gobo-svg { width: 100%; height: 100%; animation: cerGobo 18s ease-in-out infinite alternate; }
@keyframes cerGobo { from { transform: translate3d(-3%, 0, 0) rotate(-2deg); } to { transform: translate3d(3%, 1.5%, 0) rotate(2deg); } }

/* continuous motion in the props */
.cer-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: cerSway 5s ease-in-out infinite alternate; }
.cer-sway.slow { animation-duration: 7s; }
@keyframes cerSway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.cer-mobile { transform-box: view-box; transform-origin: 150px 18px; animation: cerSway 4s ease-in-out infinite alternate; }
.cer-bob { transform-box: fill-box; transform-origin: 50% 0; animation: cerSwing 3s ease-in-out infinite alternate; }
.cer-bob.b { animation-delay: -1s; } .cer-bob.c { animation-delay: -2s; animation-duration: 3.6s; } .cer-bob.d { animation-delay: -.5s; animation-duration: 2.6s; }
@keyframes cerSwing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.cer-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.4s ease-in-out infinite alternate; }
.cer-glow { transform-box: fill-box; transform-origin: 50% 50%; animation: cerGlow 2.2s ease-in-out infinite alternate; }
@keyframes cerGlow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.cer-ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: cerRipple 3.6s ease-out infinite; }
@keyframes cerRipple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.cer-steam path { animation: cerSteam 4s ease-in infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cer-steam path:nth-child(2) { animation-delay: -1.3s; } .cer-steam path:nth-child(3) { animation-delay: -2.6s; }
@keyframes cerSteam { 0% { opacity: 0; transform: translateY(10px) scaleY(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scaleY(1.1); } }
.cer-silk { transform-box: fill-box; transform-origin: 100% 0; animation: cerSilk 6s ease-in-out infinite alternate; }
.cer-silk.b { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes cerSilk { from { transform: skewX(-3deg) translateX(-4px); } to { transform: skewX(3deg) translateX(4px); } }
.cer-bear { transform-box: fill-box; transform-origin: 50% 100%; animation: cerBreath 4s ease-in-out infinite; }
@keyframes cerBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012, .992); } }

/* ---------- photo mode: realistic background photo with a slow zoom and a light sweep ---------- */
.cer-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: cerKen 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes cerKen { from { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.02) translate3d(1.5%, 1%, 0); } }
.cer.has-photo .cer-scene::before { z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 40%, rgba(0,0,0,.18)); }
.cer.has-photo .cer-arch-fill { fill: var(--cer-panel-photo, var(--cer-panel)); }
.cer.has-photo .cer-extras { display: none; }
.cer-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,250,235,.28) 48%, transparent 60%); transform: translateX(-100%); animation: cerSweep 7s ease-in-out 1.5s infinite; }
@keyframes cerSweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }

/* ---------- details below the scene ---------- */
.cer-details { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 54px 24px 100px; background: var(--cer-wall); color: var(--cer-text); }
.cer-details p { margin: 0; }
.cer-invite { font-family: var(--f-caps); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; line-height: 1.8; max-width: 340px; }
.cer-when { margin-top: 18px; display: grid; justify-items: center; gap: 6px; }
.cer-wd { font-family: var(--f-caps); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--cer-gold); }
.cer-date { display: flex; align-items: center; gap: 16px; font-family: var(--f-caps); font-size: clamp(22px, 7vw, 30px); letter-spacing: .14em; text-transform: uppercase; color: var(--cer-ink); }
.cer-date i { width: 1px; height: 26px; background: var(--cer-gold); }
.cer-where { font-size: 15px; color: var(--cer-ink); margin-top: 6px !important; }
.cer-city { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
.cer-closing { font-family: var(--f-script); font-size: calc(28px * var(--ss)); color: var(--cer-gold); margin-top: 18px !important; line-height: 1.3; }
.cer .hx-count > div { background: var(--cer-panel); }
.cer .hx-cta { --hx-btn: var(--cer-btn); --hx-btn-ink: var(--cer-btn-ink); }
.cer + main { padding-top: 10px; }

/* ================= designs ================= */
/* 1. nursery: warm cream, sheer curtain, crib */
.cer-nursery { --cer-wall: #f3e9da; --cer-wallpaint: radial-gradient(ellipse at 70% 20%, #fffaf0, #f1e5d3 60%, #e6d6bf); --cer-panel: #fbf5ea; --cer-gold: #b38a46; --cer-ink: #7a5a32; --cer-text: #8a7356; --cer-btn: #9a7440; --cer-btn-ink: #fffaf0; --cer-gobo: .11; }
.cer-curtain { left: -4%; top: -2%; width: 34%; height: 64%; z-index: 2; background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 9px, rgba(255,253,246,.55) 9px 20px, rgba(255,255,255,.85) 20px 26px); clip-path: polygon(0 0, 100% 0, 62% 46%, 30% 100%, 0 100%); opacity: .92; transform-origin: 0 0; animation: cerCurtain 7s ease-in-out infinite alternate; }
@keyframes cerCurtain { from { transform: skewX(-1.5deg); } to { transform: skewX(1.5deg); } }
.cer-nursery .cer-corner-wrap { right: -4%; bottom: 26%; width: 30%; height: 30%; opacity: .9; }
.cer-corner { width: 100%; height: 100%; }

/* 2. aqiqah: deep green, gold lattice, brass lantern */
.cer-aqiqah { --cer-wall: #10342a; --cer-wallpaint: radial-gradient(ellipse at 50% 40%, #1d4d3e, #123a2f 55%, #0a241c); --cer-panel: #17463a; --cer-panel-photo: rgba(16,58,46,.72); --cer-gold: #d8b15f; --cer-ink: #f2d690; --cer-text: #e6dcc0; --cer-btn: #d8b15f; --cer-btn-ink: #10342a; --cer-gobo: .18; --cer-shadow: rgba(0,0,0,.4); --cer-name: #f2d690; }
.cer-lattice-wrap { left: 0; right: 0; top: 0; height: 36%; opacity: .55; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.cer-lattice { width: 100%; height: 100%; }
.cer-lantern { right: 4%; top: 0; width: 58px; height: 34%; z-index: 4; transform-origin: 50% 0; animation: sway 3.6s ease-in-out infinite alternate; }
.cer-lantern-svg { width: 100%; height: 100%; overflow: visible; }
.cer-aqiqah .cer-gobo { mix-blend-mode: normal; }
.cer-aqiqah .cer-down { background: #17463a; }

/* 3. first birthday "ONE": blush ivory, pleats, balloons, teddy */
.cer-one { --cer-wall: #f6ece4; --cer-wallpaint: linear-gradient(180deg, #fbf4ee, #f1e3d8); --cer-panel: #fdf8f3; --cer-gold: #b6915a; --cer-ink: #a4804b; --cer-text: #8f7764; --cer-btn: #a4804b; --cer-btn-ink: #fffaf3; --cer-gobo: .07; }
.cer-pleats { left: 0; top: 0; bottom: 0; width: 14%; background: repeating-linear-gradient(90deg, #f7ede4 0 8px, #ecdcce 8px 12px, #fbf5ef 12px 18px); box-shadow: inset -10px 0 18px -10px rgba(120,80,40,.25); }
.cer-balloon { width: 22%; height: 30%; z-index: 4; animation: cerFloat 6s ease-in-out infinite alternate; }
.cer-balloon.a { right: -3%; top: 30%; } .cer-balloon.b { right: 12%; top: 40%; width: 18%; animation-delay: -2s; } .cer-balloon.c { right: 0; top: 50%; width: 20%; animation-delay: -4s; animation-duration: 7s; }
.cer-balloon-svg { width: 100%; height: 100%; overflow: visible; }
@keyframes cerFloat { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-16px) rotate(3deg); } }
.cer-one .cer-head { top: 16%; }

/* 4. christening: pale stone, window light, candle */
.cer-christening { --cer-wall: #eef0ee; --cer-wallpaint: radial-gradient(ellipse at 80% 10%, #ffffff, #eceeea 55%, #d9dcd6); --cer-panel: #f9f8f4; --cer-gold: #a8894f; --cer-ink: #6c5a3a; --cer-text: #77705f; --cer-btn: #6c5a3a; --cer-btn-ink: #fbfaf5; --cer-gobo: .1; }
.cer-rays { right: -20%; top: -10%; width: 90%; height: 90%; z-index: 1; background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 40px, rgba(255,255,255,.55) 40px 70px, rgba(255,255,255,0) 70px 120px); -webkit-mask-image: radial-gradient(ellipse at 80% 10%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 10%, #000, transparent 70%); animation: cerRays 9s ease-in-out infinite alternate; }
@keyframes cerRays { from { opacity: .5; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }

/* 5. baby shower: blush pink, peonies, silk */
.cer-babyshower { --cer-wall: #f6e3e1; --cer-wallpaint: linear-gradient(160deg, #fbefec, #f2d7d6); --cer-panel: #fdf4f0; --cer-gold: #bf8c6f; --cer-ink: #a6606a; --cer-text: #9a7473; --cer-btn: #a6606a; --cer-btn-ink: #fff6f4; --cer-gobo: .06; --cer-name: #a6606a; }
.cer-panel-back { left: 4%; right: 22%; top: 3%; bottom: 10%; background: linear-gradient(180deg, #ecc0bd, #e6b2b1); border-radius: 50% 50% 0 0 / 30% 30% 0 0; opacity: .7; transform: translateX(-4%); }

/* 6. annaprashan / choroonu: deep maroon, jasmine strands, brass */
.cer-annaprashan { --cer-wall: #5a0f18; --cer-wallpaint: radial-gradient(ellipse at 50% 35%, #7d1a26, #5a0f18 60%, #380810); --cer-panel: #6e1520; --cer-panel-photo: rgba(90,15,24,.75); --cer-gold: #e0b766; --cer-ink: #f3d491; --cer-text: #f0dcc4; --cer-btn: #e0b766; --cer-btn-ink: #4a0b13; --cer-gobo: .2; --cer-shadow: rgba(0,0,0,.45); --cer-name: #f3d491; }
.cer-strand-wrap { top: 0; width: 18px; height: 34%; margin-left: -9px; z-index: 4; transform-origin: 50% 0; animation: sway 4.5s ease-in-out infinite alternate; }
.cer-strand-wrap:nth-child(odd) { animation-delay: -2s; height: 26%; }
.cer-strand { width: 100%; height: 100%; overflow: visible; }
.cer-annaprashan .cer-gobo, .cer-aqiqah .cer-gobo { opacity: .14; filter: blur(6px); }
.cer-annaprashan .cer-down { background: #6e1520; }

/* bottom menu colours */
.hx-nav-nursery { --hx-navbg: rgba(251, 245, 234, .94); --hx-navink: #7a5a32; }
.hx-nav-one { --hx-navbg: rgba(253, 248, 243, .94); --hx-navink: #8f6f44; }
.hx-nav-christening { --hx-navbg: rgba(249, 248, 244, .94); --hx-navink: #6c5a3a; }
.hx-nav-babyshower { --hx-navbg: rgba(253, 244, 240, .94); --hx-navink: #a6606a; }
.hx-nav-aqiqah { --hx-navbg: rgba(16, 52, 42, .9); }
.hx-nav-annaprashan { --hx-navbg: rgba(74, 11, 19, .9); }
.hx-nav-nursery .pi, .hx-nav-one .pi, .hx-nav-christening .pi, .hx-nav-babyshower .pi { color: #b38a46; }
.hx-nav-nursery a + a, .hx-nav-one a + a, .hx-nav-christening a + a, .hx-nav-babyshower a + a { border-left-color: rgba(0,0,0,.1); }

@media (prefers-reduced-motion: reduce) {
  .cer *, .cer-scene * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

/* with the bottom menu on: keep the scene, the arch foot and the scroll button above it */
body.has-hxnav .cer-props-wrap { bottom: calc(66px + env(safe-area-inset-bottom)); height: 40%; }
body.has-hxnav .cer-arch { bottom: calc(70px + env(safe-area-inset-bottom)); }
body.has-hxnav .cer-down { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.has-hxnav .cer-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom)); z-index: 2; background: var(--cer-floor, transparent); }
.cer-aqiqah { --cer-floor: #1d2a4a; } .cer-annaprashan { --cer-floor: #4a0b13; } .cer-one { --cer-floor: #e9ddd0; }
.cer-nursery { --cer-floor: #e6d6bf; } .cer-christening { --cer-floor: #d9dcd6; } .cer-babyshower { --cer-floor: #efd0cf; }
body.has-hxnav .cer-props-wrap { bottom: calc(80px + env(safe-area-inset-bottom)); height: 38%; }
body.has-hxnav .cer-scene::after { height: calc(84px + env(safe-area-inset-bottom)); }
.cer-aqiqah .cer-head, .cer-annaprashan .cer-head { top: 21%; }
/* the scene fills the screen below the sticky top bar */
.cer-scene { height: max(calc(100svh - 44px), 600px); }
.cer-nursery, .cer-one, .cer-christening, .cer-babyshower { --cer-panel-photo: rgba(255, 251, 244, .84); }

/* ================= photo templates (finished scene images brought to life) ================= */
.tp .cer-scene { background: var(--cer-wall); }
.tp .cer-scene::before { display: none; }
/* the picture always covers the screen without stretching; overlays are placed in picture coordinates */
.tp-frame {
  position: absolute; left: 50%; top: 50%; aspect-ratio: var(--ar);
  width: max(100%, calc((100svh - 44px) * var(--ar))); height: auto;
  transform: translate(-50%, calc(-50% + var(--py, 0px))); will-change: transform;
}
.tp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: tpZoom 24s ease-in-out infinite alternate; transform-origin: 50% 42%; }
@keyframes tpZoom { from { transform: scale(1.0); } to { transform: scale(1.06); } }
.tp-frame { animation: tpIn 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tpIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }

/* warm light that breathes (lantern, candle) */
.tp-glow { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,236,180,.95), rgba(255,190,90,.45) 35%, rgba(255,150,40,0) 70%); animation: tpGlow 2.6s ease-in-out infinite alternate; }
@keyframes tpGlow { 0% { opacity: .45; transform: translate(-50%, -50%) scale(.9); } 40% { opacity: .85; } 100% { opacity: .65; transform: translate(-50%, -50%) scale(1.08); } }

/* steam rising from the rice */
.tp-steam { position: absolute; width: 18%; height: 18%; transform: translate(-50%, -100%); }
.tp-steam i { position: absolute; bottom: 0; left: 40%; width: 16%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); filter: blur(4px); animation: tpSteam 4.5s ease-in infinite; }
.tp-steam i:nth-child(2) { left: 20%; animation-delay: -1.5s; } .tp-steam i:nth-child(3) { left: 60%; animation-delay: -3s; }
@keyframes tpSteam { 0% { opacity: 0; transform: translateY(20%) scale(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-80%) scale(1.4, 1.6); } }

/* floating particles: dust in the sunlight, gold sparkles, falling petals */
.tp-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tp-fx i { position: absolute; will-change: transform, opacity; }
.tp-motes i { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: rgba(255,248,225,.9); box-shadow: 0 0 6px rgba(255,236,190,.9); animation: tpMote var(--d) ease-in-out var(--dl) infinite; }
@keyframes tpMote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--x), -70px); } }
.tp-sparkle i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); background: radial-gradient(circle, #fff6d8 0 18%, transparent 22%), linear-gradient(90deg, transparent 45%, rgba(255,230,160,.95) 50%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(255,230,160,.95) 50%, transparent 55%); animation: tpTwinkle calc(var(--d) / 3) ease-in-out var(--dl) infinite; }
@keyframes tpTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.tp-petals i { top: -6% !important; width: calc(14px * var(--s)); height: calc(10px * var(--s)); border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #fbd3da, #e99aab); opacity: .9; animation: tpPetal var(--d) linear var(--dl) infinite; }
@keyframes tpPetal { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--x), 110vh) rotate(540deg); } }

/* a slow band of light across the picture */
.tp-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,250,235,.22) 48%, transparent 58%); transform: translateX(-100%); animation: cerSweep 8s ease-in-out 2s infinite; }
/* tap target over the scroll button drawn in the picture */
.tp-down { position: absolute; left: 50%; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.tp-down::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); animation: tpPing 2.4s ease-out infinite; }
@keyframes tpPing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* details panel under the picture, in the picture's colours */
.tp .cer-details { padding-top: 40px; }
.cer-divider.in { opacity: 1; animation: none; margin: 0 0 14px; }
.tp .cer-of, .tp .cer-name, .tp .cer-parents { opacity: 1; animation: none; }
.tp-naming { --cer-wall: #f2e8d8; --cer-panel: #fbf5ea; --cer-gold: #b38a46; --cer-ink: #7a5a32; --cer-text: #8a7356; --cer-btn: #9a7440; --cer-btn-ink: #fffaf0; }
.tp-aqiqah { --cer-wall: #123a2f; --cer-panel: #17463a; --cer-gold: #d8b15f; --cer-ink: #f2d690; --cer-text: #e6dcc0; --cer-btn: #d8b15f; --cer-btn-ink: #10342a; --cer-name: #f2d690; }
.tp-one { --cer-wall: #f5ebe3; --cer-panel: #fdf8f3; --cer-gold: #b6915a; --cer-ink: #a4804b; --cer-text: #8f7764; --cer-btn: #a4804b; --cer-btn-ink: #fffaf3; }
.tp-christening { --cer-wall: #eceee9; --cer-panel: #f9f8f4; --cer-gold: #a8894f; --cer-ink: #6c5a3a; --cer-text: #77705f; --cer-btn: #6c5a3a; --cer-btn-ink: #fbfaf5; }
.tp-babyshower { --cer-wall: #f6e3e0; --cer-panel: #fdf4f0; --cer-gold: #bf8c6f; --cer-ink: #a6606a; --cer-text: #9a7473; --cer-btn: #a6606a; --cer-btn-ink: #fff6f4; --cer-name: #a6606a; }
.tp-annaprashan { --cer-wall: #5a0f18; --cer-panel: #6e1520; --cer-gold: #e0b766; --cer-ink: #f3d491; --cer-text: #f0dcc4; --cer-btn: #e0b766; --cer-btn-ink: #4a0b13; --cer-name: #f3d491; }
.hx-nav-p-aqiqah, .hx-nav-p-annaprashan { --hx-navbg: rgba(20, 12, 10, .88); }
.hx-nav-p-naming, .hx-nav-p-one, .hx-nav-p-christening, .hx-nav-p-babyshower { --hx-navbg: rgba(253, 248, 241, .94); --hx-navink: #7a5a32; }
.hx-nav-p-naming .pi, .hx-nav-p-one .pi, .hx-nav-p-christening .pi, .hx-nav-p-babyshower .pi { color: #b38a46; }
@media (prefers-reduced-motion: reduce) { .tp-fx, .tp-sweep { display: none; } }

/* ================= envelope: photo reveal ================= */
.envelope.ev-photo { background: var(--cer-wall, #f2e8d8); overflow: hidden; }
.cover-photoreveal { --cover-text: var(--cer-ink, #7a5a32); }
.evp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evp-img.blur { filter: blur(16px) saturate(1.1); transform: scale(1.12); }
.evp-img.sharp { opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease .2s, transform 1.7s cubic-bezier(.2,.7,.2,1); }
.evp-frost { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,252,246,.42), rgba(255,250,240,.2) 50%, rgba(255,252,246,.5)); transition: opacity .9s ease; }
.ev-photo.tp-aqiqah .evp-frost, .ev-photo.tp-annaprashan .evp-frost { background: linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.15) 50%, rgba(10,8,6,.45)); }
.evp-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 34px; text-align: center; color: var(--cer-ink, #7a5a32); transition: opacity .6s ease, transform .9s ease; }
.evp-card p { margin: 0; }
.evp-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); }
.evp-l1 { font-family: var(--f-caps); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 18px !important; }
.evp-l2 { font-family: var(--f-script); font-size: calc(26px * var(--ss)); line-height: 1.3; margin-top: 18px !important; max-width: 320px; }
.evp-cta { font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; opacity: .8; margin-top: 10px !important; animation: cerBob 2.4s ease-in-out infinite; }
.ev-photo.tp-aqiqah .evp-card, .ev-photo.tp-annaprashan .evp-card { color: #f6e3b4; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ev-photo .seal { position: relative; left: auto; top: auto; transform: none; margin: 0; }
.cover-photoreveal.opening .evp-img.sharp { opacity: 1; transform: scale(1); }
.cover-photoreveal.opening .evp-frost { opacity: 0; }
.cover-photoreveal.opening .evp-card { opacity: 0; transform: scale(1.06); }
.cover-photoreveal.opening .envelope.ev-photo { opacity: 0; transition: opacity .45s ease 1.25s; }

/* ================= whole page in the hero design's colours (page.matchPage) ================= */
body[data-page="garland"] {
  --bg: #0a2619; --paper: #113424; --ink: #ecc977; --text: #f1e9d2; --muted: #b5c2b0; --gold: #e0b45e; --soft: rgba(224,180,94,.12);
  --env: #0f3a27; --env-2: #0b2e1f; --env-deep: #04150d; --cover-text: #f6e7c4; --dark-1: #0f3a27; --dark-2: #04150d; --on-dark: #f6e7c4;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}
body[data-page="templedoor"] {
  --bg: #1e0f06; --paper: #2d170a; --ink: #f0c36e; --text: #f4e4cc; --muted: #c4a888; --gold: #e3ad55; --soft: rgba(227,173,85,.12);
  --env: #5a2c12; --env-2: #46200b; --env-deep: #1c0b03; --cover-text: #f8e6c2; --dark-1: #46200b; --dark-2: #120702; --on-dark: #f8e6c2;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}
body[data-page="arch"] {
  --bg: #fbf3e4; --paper: #fffaf0; --ink: #8a1f2b; --text: #6a4632; --muted: #9a7b62; --gold: #b58a3a; --soft: #f0dcc0;
  --env: #8a1f2b; --env-2: #741a24; --env-deep: #3e0c12; --cover-text: #fbefd9; --dark-1: #8a1f2b; --dark-2: #4a0f16; --on-dark: #fbefd9;
}
body[data-page="backwater"] {
  --bg: #f6e9da; --paper: #fffaf2; --ink: #4a2e1c; --text: #5e4636; --muted: #8f7562; --gold: #b58a3a; --soft: #ecd6bd;
  --env: #6f8f96; --env-2: #5f7f86; --env-deep: #2e4247; --cover-text: #fdf6ea; --dark-1: #4a2e1c; --dark-2: #2a190e; --on-dark: #fdf3e2;
}
body[data-page="lanterns"] {
  --bg: #0b1028; --paper: #141b3a; --ink: #f1cd7c; --text: #e8e0f2; --muted: #a9a6c4; --gold: #e6b85c; --soft: rgba(230,184,92,.12);
  --env: #121a3c; --env-2: #0d1430; --env-deep: #050817; --cover-text: #f3e6c4; --dark-1: #1c2550; --dark-2: #070b22; --on-dark: #f3e6c4;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}
body[data-page="blush"] {
  --bg: #fdf1f1; --paper: #fffafa; --ink: #8f2240; --text: #7a4a56; --muted: #a07f86; --gold: #c08a5a; --soft: #f6d6db;
  --env: #c7868c; --env-2: #b8767d; --env-deep: #6e3a40; --cover-text: #fff4f1; --dark-1: #8f2240; --dark-2: #5a1428; --on-dark: #fff1ec;
}
body[data-page="poster"] {
  --bg: #0b0906; --paper: #17130d; --ink: #f3d27e; --text: #f3ead8; --muted: #b1a58f; --gold: #d9b15f; --soft: rgba(217,177,95,.12);
  --env: #1a140c; --env-2: #120e08; --env-deep: #050403; --cover-text: #f3e6c4; --dark-1: #1a140c; --dark-2: #050403; --on-dark: #f3e6c4;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}
body[data-page="nursery"], body[data-page="p-naming"] {
  --bg: #f3e9da; --paper: #fbf5ea; --ink: #7a5a32; --text: #6e5a44; --muted: #9a8670; --gold: #b38a46; --soft: #ebdcc4;
  --env: #e6d6bf; --env-2: #dccaae; --env-deep: #7a5a32; --cover-text: #5e4630; --dark-1: #7a5a32; --dark-2: #4a3518; --on-dark: #fbf3e4;
}
body[data-page="aqiqah"], body[data-page="p-aqiqah"] {
  --bg: #0f3127; --paper: #17463a; --ink: #f2d690; --text: #e6dcc0; --muted: #a9bfb3; --gold: #d8b15f; --soft: rgba(216,177,95,.12);
  --env: #17463a; --env-2: #123a2f; --env-deep: #08201a; --cover-text: #f2e2b8; --dark-1: #17463a; --dark-2: #08201a; --on-dark: #f2e2b8;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}
body[data-page="one"], body[data-page="p-one"] {
  --bg: #f6ece4; --paper: #fdf8f3; --ink: #a4804b; --text: #7d6553; --muted: #a08c7c; --gold: #b6915a; --soft: #efdccd;
  --env: #efe1d4; --env-2: #e6d4c4; --env-deep: #8f6f44; --cover-text: #6e5338; --dark-1: #a4804b; --dark-2: #6e5338; --on-dark: #fffaf3;
}
body[data-page="christening"], body[data-page="p-christening"] {
  --bg: #eef0ec; --paper: #fbfaf6; --ink: #5f4f33; --text: #5f5a4c; --muted: #8c8778; --gold: #a8894f; --soft: #e2e4dc;
  --env: #e3e5df; --env-2: #d6d9d1; --env-deep: #5f4f33; --cover-text: #4f4430; --dark-1: #6c5a3a; --dark-2: #3e3422; --on-dark: #fbfaf5;
}
body[data-page="babyshower"], body[data-page="p-babyshower"] {
  --bg: #f8e8e5; --paper: #fef7f4; --ink: #a6606a; --text: #7e5c5c; --muted: #a68a89; --gold: #bf8c6f; --soft: #f2d3d2;
  --env: #e9b9b9; --env-2: #dfa9aa; --env-deep: #8a4a54; --cover-text: #fff6f4; --dark-1: #a6606a; --dark-2: #6e3a42; --on-dark: #fff6f4;
}
body[data-page="annaprashan"], body[data-page="p-annaprashan"] {
  --bg: #4a0b13; --paper: #63131d; --ink: #f3d491; --text: #f0dcc4; --muted: #c9a99a; --gold: #e0b766; --soft: rgba(224,183,102,.14);
  --env: #6e1520; --env-2: #5a0f18; --env-deep: #2a050a; --cover-text: #f6e3b4; --dark-1: #6e1520; --dark-2: #2a050a; --on-dark: #f6e3b4;
  --seal: #e6c67f; --seal-edge: #b48a3a; --seal-ink: #5c4312; color-scheme: dark;
}