/* Hero page designs + Kerala Garland / Temple Door envelopes — see pages.js. Motion = transform/opacity only. */

/* ---------- shared decor ---------- */
.toran, .strand, .lamp, .banana, .carving, .lantern2, .flowers, .blossoms, .palm { display: block; width: 100%; height: 100%; overflow: visible; }
.banana.flip, .palm.flip { transform: scaleX(-1); }
.lamp .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite alternate; will-change: transform, opacity; }
.lamp .fl.b { animation-duration: 1.2s; animation-delay: -.4s; }
.lamp .fl.c { animation-duration: 1.9s; animation-delay: -.9s; }
@keyframes flicker { 0% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.88, 1.12); opacity: .85; } 100% { transform: scale(1.06, .94); opacity: 1; } }
.carving .cv-sh { color: rgba(0,0,0,.45); transform: translate(1.5px, 1.5px); }
.carving .cv-hl { color: rgba(255,214,160,.32); }
.pi { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.pi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pi.sm { width: 16px; height: 16px; }

/* ============ Envelope: Kerala Garland ============ */
.envelope.ev-garland { --fade-at: 1.6s; background: radial-gradient(ellipse at 50% 42%, #14603d, #0b3d27 55%, #04190f); }
.cover-garland { --cover-text: #f6e7c4; }
.eg-toran { position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 3; will-change: transform; transition: transform 1s cubic-bezier(.6,0,.3,1) .3s; }
.eg-strand { position: absolute; top: 0; bottom: 6%; width: 22px; z-index: 3; will-change: transform; transition: transform 1s cubic-bezier(.6,0,.3,1) .3s; }
.eg-strand.l { left: 8px; } .eg-strand.r { right: 8px; }
.eg-petals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.eg-petals i { position: absolute; top: -5%; width: 12px; height: 9px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #ffc84a, #ef7d16); will-change: transform; animation: petalFall var(--d) linear var(--dl) infinite; --sway: 30px; }
.eg-text { position: absolute; left: 0; right: 0; top: 24%; z-index: 4; padding: 0 30px; text-align: center; color: #f6e7c4; transition: opacity .5s; }
.eg-text p { margin: 0; }
.eg-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); margin-bottom: 10px !important; }
.eg-eyebrow { font-size: 12.5px; letter-spacing: .32em; opacity: .9; margin-bottom: 14px !important; }
.eg-name { font-family: var(--f-body); font-weight: 500; font-size: calc(clamp(52px, 15vw, 74px) * var(--bs)); line-height: 1.05; background: linear-gradient(180deg, #fff3c9, #e6b85c 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eg-and { font-family: var(--f-script); font-size: calc(30px * var(--ss)); color: #e6b85c; margin: -2px 0 -6px !important; }
.eg-line2 { font-size: 12.5px; letter-spacing: .3em; margin-top: 18px !important; opacity: .9; }
.cover-garland .seal { top: 74%; z-index: 5; }
.eg-cta { position: absolute; left: 0; right: 0; top: calc(74% + 76px); z-index: 4; margin: 0; text-align: center; color: #f6e7c4; font-size: 12px; letter-spacing: .3em; opacity: .85; transition: opacity .4s; }
.cover-garland.opening .eg-toran { transform: translateY(-105%); }
.cover-garland.opening .eg-strand.l { transform: translateX(-140%); }
.cover-garland.opening .eg-strand.r { transform: translateX(140%); }
.cover-garland.opening .eg-text, .cover-garland.opening .eg-cta { opacity: 0; }
.cover.opening .envelope.ev-garland, .cover.opening .envelope.ev-templedoor { opacity: 0; transition: opacity .5s var(--fade-at, 1.6s); }

/* ============ Envelope: Temple Door ============ */
.envelope.ev-templedoor { --fade-at: 1.75s; background: radial-gradient(ellipse at 50% 40%, #5a2a10, #2b1206 60%, #120602); }
.cover-templedoor { --cover-text: #f8e6c2; }
.td-light { position: absolute; left: 12%; right: 12%; top: 10%; bottom: 12%; background: radial-gradient(ellipse at 50% 45%, #fff6dc, #ffd88a 30%, #e79a3a 65%, #7a3b10); }
.td-frame { position: absolute; left: 11%; right: 11%; top: 8%; bottom: 11%; z-index: 2; display: flex; flex-direction: column; }
.td-lintel {
  height: 13%; border-radius: 10px 10px 0 0; display: grid; place-items: center; position: relative;
  background: linear-gradient(180deg, #8a4216, #5c2a0e); box-shadow: inset 0 -4px 0 #3a1806, inset 0 3px 0 rgba(255,200,140,.25);
}
.td-lintel-carve { width: 70px; height: 70px; color: #2a1205; }
.td-doors { flex: 1; display: flex; perspective: 1400px; border: 10px solid #4a220b; border-top: 0; box-shadow: 0 30px 50px -20px rgba(0,0,0,.7); }
.td-leaf {
  position: relative; flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 14px 12px;
  background: repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px), linear-gradient(90deg, #7c3a12, #9b4e1b 50%, #6e3210);
  backface-visibility: hidden; will-change: transform; transition: transform 1.4s cubic-bezier(.55,0,.2,1) .3s;
}
.td-leaf.l { transform-origin: 0 50%; box-shadow: inset -2px 0 0 rgba(0,0,0,.45); }
.td-leaf.r { transform-origin: 100% 50%; box-shadow: inset 2px 0 0 rgba(0,0,0,.45); }
.td-panel { border-radius: 6px; display: grid; place-items: center; background: linear-gradient(180deg, #6a300e, #8a4318); box-shadow: inset 0 0 0 4px #5a280c, inset 0 0 0 6px rgba(255,200,140,.18), inset 0 6px 14px rgba(0,0,0,.4); }
.td-carve { width: 66%; aspect-ratio: 1; color: #2a1205; }
.td-ring { position: absolute; top: 52%; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #e6b85c; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.td-leaf.l .td-ring { right: 8px; } .td-leaf.r .td-ring { left: 8px; }
.td-strand { position: absolute; top: 8%; width: 18px; height: 42%; z-index: 3; }
.td-strand.l { left: calc(11% - 4px); } .td-strand.r { right: calc(11% - 4px); }
.td-banana { position: absolute; bottom: 4%; width: 30%; height: 58%; z-index: 1; }
.td-banana.l { left: -10%; } .td-banana.r { right: -10%; }
.td-lamp { position: absolute; bottom: 3%; width: 48px; height: 136px; z-index: 4; }
.td-lamp.l { left: 3%; } .td-lamp.r { right: 3%; }
.td-text { position: absolute; left: 0; right: 0; top: 62%; z-index: 5; padding: 0 22%; text-align: center; color: #f8e6c2; text-shadow: 0 2px 10px rgba(0,0,0,.7); transition: opacity .4s; }
.td-text p { margin: 0; }
.td-greet { font-family: var(--f-script); font-size: calc(24px * var(--ss)); }
.td-line1 { font-size: 11.5px; letter-spacing: .3em; margin-bottom: 4px !important; }
.td-names { font-family: var(--f-script); font-size: calc(clamp(36px, 10vw, 50px) * var(--ss)); line-height: 1.15; background: linear-gradient(180deg, #fff3c9, #e6b85c 60%, #b07a22); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-templedoor .seal { top: 48%; z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cover-templedoor .seal::after { display: none; }
.cover-templedoor .seal .seal-mono { font-size: calc(24px * var(--ss)); }
.td-cta { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 5; margin: 0; text-align: center; color: #f8e6c2; font-size: 11.5px; letter-spacing: .3em; transition: opacity .4s; }
.cover-templedoor.opening .td-leaf.l { transform: rotateY(-108deg); }
.cover-templedoor.opening .td-leaf.r { transform: rotateY(108deg); }
.cover-templedoor.opening .td-text, .cover-templedoor.opening .td-cta { opacity: 0; }

/* ============ Hero page: shared ============ */
.hx {
  --hx-ink: var(--ink); --hx-text: var(--text); --hx-gold: var(--gold); --hx-btn: var(--gold); --hx-btn-ink: #1d1206;
  position: relative; min-height: calc(100svh - 60px); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 96px;
}
.hx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hx.has-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hx-veil, linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,.7))); }
.hx-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-body { position: relative; width: 100%; max-width: 540px; padding: 40px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hx-body p, .hx-body h1 { margin: 0; }
.hx-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); color: var(--hx-gold); margin-bottom: 8px !important; }
.hx-mono { font-family: var(--f-caps); letter-spacing: .3em; font-size: 22px; color: var(--hx-gold); padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--hx-gold) 60%, transparent); border-radius: 50%; margin-bottom: 10px !important; aspect-ratio: 1; display: grid; place-items: center; min-width: 74px; }
.hx-eyebrow { font-size: 12.5px; letter-spacing: .32em; color: var(--hx-text); margin-bottom: 12px !important; }
.hx-name { font-family: var(--f-body); font-weight: 500; font-size: calc(clamp(54px, 15.5vw, 78px) * var(--bs)); line-height: 1.04; color: var(--hx-ink); }
.hx-and { font-family: var(--f-script); font-size: calc(32px * var(--ss)); color: var(--hx-gold); margin: -4px 0 -8px !important; }
.hx-invite { font-size: 12.5px; letter-spacing: .3em; line-height: 1.7; color: var(--hx-text); margin-top: 16px !important; max-width: 340px; }
/* Date · venue · time: phone sizes up to ~400px wide, growing on tablets and desktops so the block keeps up with the
   big names. The venue column is a little wider because venue names are the longest. */
.hx-info { display: grid; grid-template-columns: 1fr 1.4fr 1fr; width: max(100%, min(calc(100vw - 48px), 640px)); margin-top: clamp(22px, 3vw, 32px); }
.hx-info > div { display: grid; justify-items: center; align-content: start; gap: clamp(4px, .6vw, 7px); padding: 0 clamp(6px, 1.4vw, 16px); color: var(--hx-text); }
.hx-info > div + div { border-left: 1px solid color-mix(in srgb, var(--hx-gold) 45%, transparent); }
.hx-info .pi { color: var(--hx-gold); margin-bottom: 2px; width: clamp(26px, 2.2vw + 18px, 34px); height: clamp(26px, 2.2vw + 18px, 34px); }
.hx-info b { font-size: clamp(15px, 1.1vw + 11px, 20px); font-weight: 600; color: var(--hx-ink); line-height: 1.25; }
.hx-info span { font-size: clamp(12.5px, .5vw + 10.5px, 14.5px); letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; opacity: .8; }
.hx-bigdate { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-family: var(--f-caps); font-size: 26px; letter-spacing: .14em; color: var(--hx-ink); }
.hx-bigdate i { width: 1px; height: 26px; background: var(--hx-gold); }
.hx-city { flex-basis: 100%; font-size: 13px; letter-spacing: .3em; color: var(--hx-text); margin-top: 4px !important; }
.hx-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 12px); width: 100%; max-width: clamp(330px, 20vw + 250px, 430px); margin-top: clamp(20px, 2.6vw, 30px); }
.hx-count > div { display: grid; padding: clamp(10px, 1vw, 14px) 2px clamp(8px, .8vw, 12px); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hx-gold) 40%, transparent); background: color-mix(in srgb, var(--hx-card, #fff) 70%, transparent); }
.hx-count b { font-family: var(--f-caps); font-size: clamp(24px, 1.2vw + 20px, 32px); color: var(--hx-ink); font-weight: 500; }
.hx-count span { font-size: clamp(10.5px, .3vw + 9.5px, 12px); letter-spacing: .14em; text-transform: uppercase; color: var(--hx-text); }
.hx-photo, .hx-product { width: min(92%, 420px); max-height: 46svh; object-fit: contain; margin-top: 22px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); border-radius: 0; }
.hx-closing { font-family: var(--f-script); font-size: calc(28px * var(--ss)); color: var(--hx-gold); margin-top: 18px !important; line-height: 1.3; }
.hx-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 15px 30px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-caps); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--hx-btn-ink); background: var(--hx-btn);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.6);
}
.hx-nav {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35; transform: translateX(-50%);
  width: min(560px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px; border-radius: 20px;
  background: var(--hx-navbg, rgba(10, 30, 20, .82)); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.hx-nav a { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--hx-navink, #f6e7c4); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 2px; }
.hx-nav a + a { border-left: 1px solid rgba(255,255,255,.12); }
.hx-nav .pi { width: 22px; height: 22px; color: var(--gold); }
body.has-hxnav .music { bottom: calc(92px + env(safe-area-inset-bottom)); }
body.has-hxnav .brand { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.hx + main { padding-top: 28px; }

/* ---------- garland (green) ---------- */
.hx-garland { --hx-ink: #f1cd7c; --hx-text: #f6e7c4; --hx-gold: #e6b85c; background: radial-gradient(ellipse at 50% 35%, #14603d, #0b3d27 55%, #052016); --hx-navbg: rgba(6, 32, 21, .86); }
.hx-garland .hx-toran { position: absolute; left: 0; right: 0; top: 0; height: 150px; }
.hx-garland .hx-body { padding-top: 170px; }
.hx-garland .hx-name { background: linear-gradient(180deg, #fff3c9, #e6b85c 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- temple door (wood) ---------- */
.hx-templedoor { --hx-ink: #f3c978; --hx-text: #f8e6c2; --hx-gold: #e6b85c; background: radial-gradient(ellipse at 50% 30%, #5a2a10, #2b1206 65%, #120602); --hx-navbg: rgba(30, 12, 4, .88); }
.hx-door { position: absolute; left: 9%; right: 9%; top: 4%; bottom: 14%; }
.hx-door-arch { position: absolute; inset: 0; border-radius: 48% 48% 10px 10px / 22% 22% 10px 10px; border: 12px solid #4a220b; box-shadow: inset 0 0 0 3px rgba(230,184,92,.5), 0 30px 50px -20px rgba(0,0,0,.7); }
.hx-door-leaves { position: absolute; inset: 12px; display: flex; border-radius: 46% 46% 4px 4px / 21% 21% 4px 4px; overflow: hidden; }
.hx-door-leaves i { flex: 1; background: radial-gradient(ellipse at 50% 40%, rgba(255,214,140,.18), transparent 60%), repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px), linear-gradient(90deg, #6e3210, #8f4518 50%, #622b0d); }
.hx-door-leaves i + i { box-shadow: inset 3px 0 0 rgba(0,0,0,.45); }
.hx-templedoor .hx-strand { position: absolute; top: 4%; width: 18px; height: 38%; }
.hx-templedoor .hx-strand.l { left: calc(9% - 6px); } .hx-templedoor .hx-strand.r { right: calc(9% - 6px); }
.hx-templedoor .hx-banana { position: absolute; bottom: 8%; width: 32%; height: 48%; }
.hx-templedoor .hx-banana.l { left: -14%; } .hx-templedoor .hx-banana.r { right: -14%; }
.hx-templedoor .hx-lamp, .hx-arch .hx-lamp { position: absolute; bottom: 9%; width: 44px; height: 124px; }
.hx-templedoor .hx-lamp.l, .hx-arch .hx-lamp.l { left: 3%; } .hx-templedoor .hx-lamp.r, .hx-arch .hx-lamp.r { right: 3%; }
.hx-templedoor .hx-body { padding-top: 15%; }
.hx-templedoor .hx-name { font-family: var(--f-script); font-weight: 400; font-size: calc(clamp(52px, 15vw, 72px) * var(--ss)); background: linear-gradient(180deg, #fff3c9, #e6b85c 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.hx-templedoor .hx-cta { background: transparent; color: var(--hx-ink); border: 1.5px solid var(--hx-gold); }

/* ---------- temple arch (cream) ---------- */
.hx-arch { --hx-ink: #8a1f2b; --hx-text: #6a4632; --hx-gold: #b58a3a; --hx-btn: #8a1f2b; --hx-btn-ink: #fff4e6; --hx-card: #fff8ec; background: linear-gradient(180deg, #fbf3e4, #f3e4c8); --hx-navbg: rgba(255, 248, 236, .92); --hx-navink: #8a1f2b; --hx-veil: linear-gradient(180deg, rgba(251,243,228,.88), rgba(251,243,228,.7) 50%, rgba(251,243,228,.92)); }
.hx-arch .hx-archframe { position: absolute; left: 7%; right: 7%; top: 3%; bottom: 10%; border-radius: 50% 50% 14px 14px / 26% 26% 14px 14px; border: 2px solid #c9a35a; box-shadow: inset 0 0 0 8px rgba(201,163,90,.12), inset 0 0 0 9px rgba(201,163,90,.5); }
.hx-arch .hx-flowers { position: absolute; top: 0; width: 46%; height: 26%; }
.hx-arch .hx-flowers.l { left: -6%; } .hx-arch .hx-flowers.r { right: -6%; transform: scaleX(-1); }
.hx-arch .hx-strand { position: absolute; top: 10%; width: 18px; height: 44%; }
.hx-arch .hx-strand.l { left: calc(7% - 9px); } .hx-arch .hx-strand.r { right: calc(7% - 9px); }
.hx-arch .hx-body { padding-top: 22%; }

/* ---------- lakeside drapes (backwater) ---------- */
.hx-backwater { --hx-ink: #4a2e1c; --hx-text: #6b5240; --hx-gold: #b58a3a; --hx-btn: #fffaf0; --hx-btn-ink: #4a2e1c; --hx-card: #fffaf0; background: #f4e3cf; --hx-navbg: rgba(255, 250, 240, .9); --hx-navink: #4a2e1c; --hx-veil: linear-gradient(180deg, rgba(255,248,236,.85), rgba(255,248,236,.35) 55%, rgba(255,248,236,.2)); }
.hx-sky { position: absolute; inset: 0 0 32% 0; background: linear-gradient(180deg, #fff6ea, #f9dcc0 60%, #f3c49e); }
.hx-water { position: absolute; inset: 68% 0 0 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 2px, transparent 2px 12px), linear-gradient(180deg, #e7b893, #9fb5b8 60%, #6f8f96); }
.has-bg .hx-sky, .has-bg .hx-water { display: none; }
.hx-backwater .hx-palm { position: absolute; bottom: 26%; width: 46%; height: 42%; opacity: .85; }
.hx-backwater .hx-palm.l { left: -12%; } .hx-backwater .hx-palm.r { right: -12%; }
.hx-drape { position: absolute; top: 0; bottom: 0; width: 24%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 10px, rgba(255,255,255,.55) 10px 22px, rgba(255,255,255,.85) 22px 30px); opacity: .9; }
.hx-drape.l { left: 0; clip-path: polygon(0 0, 100% 0, 40% 40%, 70% 100%, 0 100%); }
.hx-drape.r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 60% 40%); }
.hx-backwater .hx-body { padding-top: 54px; }

/* ---------- lantern night ---------- */
.hx-lanterns { --hx-ink: #f1cd7c; --hx-text: #e8e0f2; --hx-gold: #e6b85c; background: linear-gradient(180deg, #070b22, #121a3c 50%, #1c1f3f); --hx-navbg: rgba(8, 12, 34, .86); --hx-veil: linear-gradient(180deg, rgba(7,11,34,.8), rgba(7,11,34,.35) 50%, rgba(7,11,34,.85)); }
.hx-stars { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 12%, #fff, transparent), radial-gradient(1.6px 1.6px at 66% 28%, #fff, transparent), radial-gradient(1.2px 1.2px at 84% 18%, #fff, transparent), radial-gradient(1.4px 1.4px at 46% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 8% 52%, #fff, transparent), radial-gradient(1.4px 1.4px at 92% 48%, #fff, transparent); opacity: .8; }
.hx-lights { position: absolute; left: -5%; right: -5%; top: 14px; height: 60px; border-top: 1px solid rgba(255,220,150,.35); border-radius: 50%; background: radial-gradient(circle, #ffd88a 0 2.5px, rgba(255,210,120,.35) 3px, transparent 7px) 0 0 / 34px 30px repeat-x; }
.hx-lantern { position: absolute; top: 0; width: calc(52px * var(--s, 1)); height: calc(116px * var(--s, 1) + var(--t, 0px)); padding-top: var(--t, 0px); transform-origin: 50% 0; animation: sway 4s ease-in-out infinite alternate; will-change: transform; }
.hx-lantern:nth-child(odd) { animation-delay: -2s; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.hx-lanterns .hx-body { padding-top: 150px; }
.hx-lanterns .hx-name { background: linear-gradient(180deg, #fff3c9, #e6b85c 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- blush garden ---------- */
.hx-blush { --hx-ink: #8f2240; --hx-text: #7a4a56; --hx-gold: #c08a5a; --hx-btn: #8f2240; --hx-btn-ink: #fff2f4; --hx-card: #fff; background: linear-gradient(180deg, #fff4f3, #fbe2e4); --hx-navbg: rgba(255, 244, 243, .92); --hx-navink: #8f2240; --hx-veil: linear-gradient(180deg, rgba(255,244,243,.9), rgba(255,244,243,.55) 55%, rgba(255,244,243,.4)); }
/* Branches sit in the corners at a fixed size: % of the hero's height put them across the names, time and closing
   line once long names or the countdown made the hero taller. */
.hx-bloss { position: absolute; width: clamp(100px, 28vw, 150px); aspect-ratio: 1; }
.hx-bloss.l { left: -22px; top: -14px; } .hx-bloss.r { right: -22px; top: -14px; transform: scaleX(-1); }
.hx-bloss.b { left: -18px; bottom: -14px; width: clamp(90px, 24vw, 140px); transform: rotate(180deg) scaleX(-1); }
.hx-blush .hx-body { padding-top: 46px; }
/* soft halo in the paper colour keeps text readable if a petal still reaches it on a very narrow phone */
.hx-blush .hx-body > p, .hx-blush .hx-name, .hx-blush .hx-info b, .hx-blush .hx-info span { text-shadow: 0 0 10px rgba(255, 244, 243, .95), 0 0 3px rgba(255, 244, 243, .9); }

/* ---------- shop poster ---------- */
.hx-poster { --hx-ink: #f3d27e; --hx-text: #f3ead8; --hx-gold: var(--gold); background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--env) 80%, #4a3a20), var(--bg) 70%); --hx-navbg: rgba(10, 8, 6, .86); --hx-veil: linear-gradient(180deg, rgba(8,6,4,.86), rgba(8,6,4,.45) 40%, rgba(8,6,4,.88)); }
.hx-logo { max-width: 60%; max-height: 14svh; object-fit: contain; margin-bottom: 6px; }
.hx-brand { font-family: var(--f-caps); font-size: clamp(26px, 8vw, 36px); letter-spacing: .14em; color: #fff; }
.hx-tag { font-size: 11px; letter-spacing: .3em; color: var(--hx-gold); margin-bottom: 18px !important; }
.hx-poster .hx-eyebrow { font-size: 12px; }
.hx-title { font-family: var(--f-caps); font-weight: 500; font-size: min(clamp(46px, 14vw, 70px), calc(min(86vw, 560px) / (var(--hx-len, 7) * .74))); line-height: 1.02; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(180deg, #fff3c9, #e6b85c 55%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-sub { font-size: 12.5px; letter-spacing: .26em; line-height: 1.8; white-space: pre-line; color: var(--hx-text); margin-top: 10px !important; }
.hx-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 22px; }
.hx-feats > div { display: grid; justify-items: center; gap: 6px; color: var(--hx-text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.hx-feats .shop-ico { width: 30px; height: 30px; color: var(--hx-gold); }
.hx-poster .hx-info { margin-top: 18px; padding: 14px 6px; border-radius: 16px; background: rgba(0,0,0,.4); border: 1px solid color-mix(in srgb, var(--hx-gold) 35%, transparent); backdrop-filter: blur(6px); }
.hx-poster .hx-product { max-height: 30svh; }

@media (prefers-reduced-motion: reduce) { .hx-lantern, .lamp .fl, .eg-petals i { animation: none; } }

/* bottom menu colours follow the design (the menu sits outside the hero section) */
.hx-nav-garland { --hx-navbg: rgba(6, 32, 21, .88); }
.hx-nav-templedoor { --hx-navbg: rgba(30, 12, 4, .9); }
.hx-nav-arch { --hx-navbg: rgba(255, 248, 236, .94); --hx-navink: #8a1f2b; }
.hx-nav-backwater { --hx-navbg: rgba(255, 250, 240, .92); --hx-navink: #4a2e1c; }
.hx-nav-lanterns { --hx-navbg: rgba(8, 12, 34, .88); }
.hx-nav-blush { --hx-navbg: rgba(255, 244, 243, .94); --hx-navink: #8f2240; }
.hx-nav-poster { --hx-navbg: rgba(10, 8, 6, .9); }
.hx-nav-arch .pi, .hx-nav-blush .pi, .hx-nav-backwater .pi { color: #b58a3a; }
.hx-nav-arch a + a, .hx-nav-blush a + a, .hx-nav-backwater a + a { border-left-color: rgba(0,0,0,.1); }
/* the shop poster is always dark (a dark shade of the theme colour), like a printed opening poster */
.hx.hx-poster { background: radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--env) 45%, #1a1308), #070504 72%); }
/* palms beside the water, clear of the names */
.hx-backwater .hx-palm { bottom: 4%; width: 34%; height: 34%; }
.hx-backwater .hx-palm.l { left: -14%; } .hx-backwater .hx-palm.r { right: -14%; }
/* temple door: a little tighter so the button stays on the first screen */
.hx-templedoor .hx-body { padding-top: 11%; }
.hx-templedoor .hx-name { font-size: calc(clamp(46px, 13.5vw, 66px) * var(--ss)); }