/* =========================================================================
   BeezInvite — invitation page (shared base + 8 layout skins)
   Responsive rules that apply to EVERY template:
   - fluid type with clamp(); long names wrap (overflow-wrap:anywhere) & auto-shrink (.long/.xlong)
   - every photo lives in a fixed aspect-ratio frame with object-fit:cover (any photo shape works)
   - grids reflow with auto-fit/minmax and never exceed the viewport
   ========================================================================= */
:root {
  /* readable text versions of the theme colours; the invite page overrides these with server-computed values */
  --p-ink: var(--p);
  --a-ink: var(--a);
  --muted: color-mix(in srgb, var(--t) 74%, var(--bg));
  --line: color-mix(in srgb, var(--p) 28%, transparent);
  --card-bg: color-mix(in srgb, var(--bg) 88%, #fff);
  --card-border: 1px solid var(--line);
  --card-radius: 22px;
  --card-shadow: 0 18px 40px -24px color-mix(in srgb, var(--p) 45%, transparent);
  --field-bg: color-mix(in srgb, var(--bg) 92%, var(--t) 5%);
  --btn-text: var(--bg);
}
.is-dark { --card-bg: color-mix(in srgb, var(--bg) 82%, #fff 6%); --field-bg: color-mix(in srgb, var(--bg) 80%, #fff 8%); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.inv { margin: 0; background: var(--bg); color: var(--t); font-family: var(--bf); font-size: clamp(15px, .45vw + 13.5px, 17.5px); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.intro-on { overflow: hidden; height: 100vh; height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
.center { text-align: center; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; } /* the hidden attribute always wins over component display rules */
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }

.inv-main { position: relative; z-index: 2; }
.sec { padding: clamp(56px, 10vw, 110px) clamp(16px, 4vw, 32px); position: relative; }
.wrap { width: min(760px, 100%); margin-inline: auto; }
.wrap-wide { width: min(1080px, 100%); }
.sec-title { text-align: center; margin-bottom: clamp(26px, 5vw, 44px); }
.sec-title .kick { display: block; letter-spacing: .32em; text-transform: uppercase; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.sec-title h2 { font-family: var(--hf); font-size: clamp(2rem, 7vw, 3.3rem); color: var(--p-ink); line-height: 1.1; overflow-wrap: anywhere; }
.divider { display: flex; justify-content: center; color: var(--p-ink); margin: 18px 0; }
.divider svg { width: min(220px, 70%); height: auto; }
.card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: clamp(20px, 4vw, 30px); overflow-wrap: anywhere; min-width: 0; }

/* Buttons */
.ibtn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.6em; border-radius: 999px; border: 1.5px solid var(--p); background: var(--p); color: var(--btn-text); font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; max-width: 100%; text-align: center; }
.ibtn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--p); }
.ibtn-ghost { background: transparent; color: var(--p-ink); }
.ibtn-sm { padding: .55em 1.1em; font-size: .85rem; }
.ibtn-block { width: 100%; }
.ibtn[disabled] { opacity: .6; cursor: wait; }

/* ---------- HERO (shared) ---------- */
/* minmax(0,1fr): the hero column can never grow wider than the screen, whatever the content */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; position: relative; overflow: hidden; padding: clamp(70px, 10vw, 110px) clamp(18px, 5vw, 40px) clamp(80px, 10vw, 110px); isolation: isolate; }
.hero-in { position: relative; z-index: 2; width: min(680px, 100%); display: grid; justify-items: center; gap: clamp(18px, 3vw, 28px); }
.h-head { letter-spacing: .3em; text-transform: uppercase; font-size: clamp(.68rem, 1.6vw, .8rem); color: var(--muted); margin: 0 0 .6em; }
.names { font-family: var(--hf); color: var(--p-ink); font-size: clamp(2.7rem, 12vw, 6.2rem); line-height: 1.04; margin: .1em 0 .15em; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; max-width: 100%; }
.names.long { font-size: clamp(2.1rem, 9vw, 4.6rem); }
.names.xlong { font-size: clamp(1.75rem, 7vw, 3.5rem); }
.names .amp { display: block; font-size: .48em; color: var(--a-ink); line-height: 1.2; margin: .05em 0; }
.h-second { font-family: var(--hf); font-size: clamp(1.2rem, 4vw, 1.8rem); color: var(--a-ink); margin: 0; }
.h-sub { font-size: clamp(.95rem, 2.4vw, 1.15rem); color: var(--muted); font-style: italic; margin: .3em auto .9em; max-width: 34ch; overflow-wrap: anywhere; }
.h-date { display: inline-flex; align-items: center; gap: clamp(10px, 3vw, 18px); text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.68rem, 1.8vw, .82rem); color: var(--t); }
.h-date span { padding: 6px 0; border-block: 1px solid var(--line); min-width: 0; }
.h-date b { font-family: var(--hf); font-size: clamp(2rem, 6vw, 2.8rem); color: var(--p-ink); letter-spacing: 0; line-height: 1; font-weight: 400; }
.big-num { font-family: var(--hf); font-size: clamp(6rem, 30vw, 12rem); line-height: .9; color: var(--a-ink); -webkit-text-stroke: 3px var(--p); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--p); animation: bounce 2.4s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-10px) rotate(-3deg); } }

.scroll-cue { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 2px solid var(--p); border-radius: 20px; opacity: .7; }
.scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--p); animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Sections ---------- */
.dear { font-size: 1.1rem; margin-bottom: 0; }
.dear b { font-family: var(--hf); color: var(--p-ink); font-size: 1.6em; font-weight: 400; }
.message { font-size: clamp(1.02rem, 2.4vw, 1.25rem); line-height: 1.85; max-width: 46ch; margin: 0 auto; overflow-wrap: anywhere; }

.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2.5vw, 18px); max-width: 560px; margin: 0 auto; }
.cd > div { background: var(--card-bg); border: var(--card-border); border-radius: 18px; padding: clamp(12px, 3vw, 22px) 4px; box-shadow: var(--card-shadow); min-width: 0; }
.cd b { display: block; font-family: var(--hf); font-size: clamp(1.7rem, 7.5vw, 3rem); line-height: 1.1; color: var(--p-ink); font-variant-numeric: tabular-nums; font-weight: 400; }
.cd span { font-size: clamp(.58rem, 1.8vw, .75rem); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.cd b.tick { animation: tick .45s ease; }
@keyframes tick { 0% { transform: translateY(-30%); opacity: .2; } 100% { transform: none; opacity: 1; } }
.cd-done { font-family: var(--hf); font-size: 1.8rem; color: var(--p-ink); }

.events { display: grid; gap: clamp(14px, 2.5vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.events.n1 { max-width: 460px; margin: 0 auto; grid-template-columns: 1fr; }
.events.n2 { max-width: 820px; margin: 0 auto; }
.event { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .35s; }
.event:hover { transform: translateY(-4px); }
.ev-date { width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; background: var(--p); color: var(--btn-text); line-height: 1; margin-bottom: 4px; flex: none; }
.ev-date b { font-family: var(--hf); font-size: 1.9rem; font-weight: 400; }
.ev-date span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.event h3 { font-family: var(--hf); font-size: clamp(1.5rem, 4.5vw, 2rem); color: var(--p-ink); line-height: 1.15; }
.ev-when, .ev-where { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 0; color: var(--muted); font-size: .95rem; text-align: left; }
.ev-when svg, .ev-where svg { flex: none; margin-top: 4px; color: var(--p-ink); }
.ev-where b { color: var(--t); font-weight: 600; }
.event .ibtn { margin-top: auto; }

.map { padding: 8px; overflow: hidden; }
.map iframe { display: block; width: 100%; height: clamp(240px, 45vw, 360px); border: 0; border-radius: calc(var(--card-radius) - 8px); filter: saturate(.85); }

.gal { display: grid; gap: clamp(6px, 1.4vw, 12px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--field-bg); min-width: 0; }
.gal figure button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.gal figure:hover img { transform: scale(1.07); }
.gal.n1 { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.gal.n1 figure { aspect-ratio: 4 / 3; }
.gal.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.gal.n2 figure { aspect-ratio: 4 / 5; }
.gal.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.gal.n5 figure:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 560px) {
  .gal.n3, .gal.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal.n3 figure:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .gal.n5 figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .gal.n5.even figure:first-child { grid-column: auto; aspect-ratio: 1; } /* even count: keep rows full */
}

.details { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.detail { text-align: center; }
.detail .d-ico { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: color-mix(in srgb, var(--p) 12%, var(--card-bg)); color: var(--p-ink); font-weight: 700; font-size: 1.2rem; }
.detail small { text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: var(--muted); }
.detail p { margin: 6px 0 0; font-weight: 600; }
.detail a { color: var(--p-ink); }

/* Story timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); transform: translateX(-50%); }
.timeline li { position: relative; width: 50%; padding: 0 34px 26px; }
.timeline li:nth-child(odd) { margin-left: 0; text-align: right; }
.timeline li:nth-child(even) { margin-left: 50%; }
.tl-dot { position: absolute; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 6px color-mix(in srgb, var(--p) 20%, transparent); }
.timeline li:nth-child(odd) .tl-dot { right: -8px; }
.timeline li:nth-child(even) .tl-dot { left: -8px; }
.tl-card small { color: var(--p-ink); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
.tl-card h3 { font-family: var(--hf); font-size: clamp(1.4rem, 4vw, 1.8rem); color: var(--p-ink); margin: 4px 0; line-height: 1.2; }
.tl-card p { margin: 0; color: var(--muted); }
@media (max-width: 640px) {
  .timeline::before { left: 8px; }
  .timeline li, .timeline li:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 20px 36px; text-align: left; }
  .timeline li .tl-dot, .timeline li:nth-child(odd) .tl-dot { left: 0; right: auto; }
}

/* Forms */
.form { display: grid; gap: 14px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld span { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; padding: .8em 1em; border-radius: 14px; border: 1.5px solid var(--line); background: var(--field-bg); color: var(--t); min-width: 0; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 18%, transparent); }
.fld textarea { resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: .75em .6em; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; font-size: .9rem; transition: .2s; background: var(--field-bg); }
.seg input:checked + span { background: var(--p); color: var(--btn-text); border-color: var(--p); transform: scale(1.02); }
.seg input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.form-msg { margin: 0; text-align: center; font-weight: 600; color: var(--p-ink); min-height: 1.2em; }
.form-msg.err { color: #e5484d; }
.form.done { animation: pulse .6s; }
@keyframes pulse { 50% { transform: scale(1.015); } }

.wishes { columns: 2 260px; column-gap: 14px; margin-top: 22px; }
.wish { break-inside: avoid; margin: 0 0 14px; padding: 18px 20px; }
.wish p { margin: 0 0 8px; font-style: italic; }
.wish cite { font-size: .8rem; color: var(--muted); font-style: normal; }
.wish.new { animation: pop .6s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

.inv-footer { padding-bottom: 130px; }
.closing { font-style: italic; color: var(--muted); margin-bottom: 4px; }
.foot-names { font-family: var(--hf); font-size: clamp(2rem, 8vw, 3.4rem); color: var(--p-ink); line-height: 1.15; overflow-wrap: anywhere; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.made-with { display: inline-block; margin-top: 30px; font-size: .78rem; color: var(--muted); text-decoration: none; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); }

/* Dock */
.dock { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 4px; padding: 6px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--line); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35); }
.dock a, .dock button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--p-ink); background: none; border: 0; cursor: pointer; transition: .2s; }
.dock a:hover, .dock button:hover { background: color-mix(in srgb, var(--p) 14%, transparent); }
.music-btn.playing { background: var(--p) !important; color: var(--btn-text) !important; animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.intro-on .dock { opacity: 0; pointer-events: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 50px 12px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; animation: pop .35s; }
.lb-x, .lb-nav { position: absolute; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; }
.lb-x { top: 14px; right: 14px; font-size: 1.1rem; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* Toast */
.itoast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 300; background: var(--t); color: var(--bg); padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: .9rem; opacity: 0; transition: .3s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.itoast.on { opacity: 1; transform: translate(-50%, 0); }

/* Top bar (demo / preview) */
.topbar { position: sticky; top: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; background: #1d1230; color: #fff; font: 600 .85rem/1.3 system-ui, sans-serif; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-btn { padding: 8px 14px; border-radius: 99px; background: linear-gradient(120deg, #e8467c, #8b5cf6); color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.tb-btn.ghost { background: rgba(255, 255, 255, .12); }
.intro-on .topbar { position: fixed; left: 0; right: 0; z-index: 160; }

/* Template usage notes (demo page) */
.tips-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 170; width: min(380px, 100%); overflow-y: auto; background: #fff; color: #1d1230; padding: 26px 22px 30px; box-shadow: -20px 0 50px rgba(0, 0, 0, .25); font: 400 .92rem/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; animation: slideIn .35s cubic-bezier(.2, .8, .2, 1); }
.tips-panel[hidden] { display: none; }
.tips-panel h3 { font-size: 1.2rem; font-weight: 800; margin: 0 30px 10px 0; }
.tips-panel h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #7b6f8c; margin: 18px 0 6px; }
.tips-panel p { margin: 0; }
.tips-panel ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.tips-panel a { color: #8b5cf6; }
.tips-panel .tb-btn { color: #fff; }
.tips-plan { background: #f6f1fc; border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.tips-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f3eff8; cursor: pointer; }
@keyframes slideIn { from { transform: translateX(100%); } }
.topbar button.tb-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Watermark for unpaid premium preview */
.watermark { position: fixed; inset: -50%; z-index: 150; pointer-events: none; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 60px 90px; transform: rotate(-28deg); }
.watermark span { font: 900 clamp(2rem, 7vw, 4rem)/1 system-ui, sans-serif; color: rgba(128, 128, 128, .13); letter-spacing: .1em; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.is-embed .reveal { transition-duration: .5s; }

/* Effects layer */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fx { position: absolute; top: -8vh; will-change: transform; }
.fx svg { width: 100%; height: 100%; display: block; }
.fx.fall { animation: fxFall var(--dur) linear var(--delay) infinite; }
.fx.rise { top: auto; bottom: -12vh; animation: fxRise var(--dur) ease-in var(--delay) infinite; }
.fx.twinkle { top: var(--y); animation: fxTwinkle var(--dur) ease-in-out var(--delay) infinite; }
@keyframes fxFall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 8% { opacity: var(--op, .9); } 50% { transform: translate3d(var(--sway), 55vh, 0) rotate(calc(var(--rot) / 2)); } 92% { opacity: var(--op, .9); } 100% { transform: translate3d(calc(var(--sway) * -1), 115vh, 0) rotate(var(--rot)); opacity: 0; } }
@keyframes fxRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: var(--op, .85); } 50% { transform: translate3d(var(--sway), -60vh, 0) rotate(8deg); } 100% { transform: translate3d(calc(var(--sway) * -1), -125vh, 0) rotate(-8deg); opacity: 0; } }
@keyframes fxTwinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
.twinkle { transform-origin: center; transform-box: fill-box; animation: fxTwinkle 3s ease-in-out infinite; }

/* ---------- INTROS ---------- */
.intro { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bg) 85%, #fff), var(--bg)); transition: opacity .9s ease .3s, visibility 0s 1.3s; }
.intro.opened { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-to { font-family: var(--hf); font-size: clamp(1.4rem, 5vw, 2rem); color: var(--p-ink); text-align: center; margin: 0 0 22px; overflow-wrap: anywhere; }
.intro-btn { margin-top: 28px; padding: .9em 2em; border-radius: 99px; border: 1.5px solid var(--p); background: transparent; color: var(--p-ink); letter-spacing: .25em; text-transform: uppercase; font-size: .75rem; font-weight: 700; cursor: pointer; animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--p) 12%, transparent); } }

/* Envelope */
.env-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
.envelope { position: relative; width: min(360px, 84vw); aspect-ratio: 1.45; perspective: 1000px; cursor: pointer; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }
.env-back { position: absolute; inset: 0; border-radius: 10px; background: color-mix(in srgb, var(--p) 80%, #000); }
.env-letter { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; border-radius: 6px; background: color-mix(in srgb, var(--bg) 90%, #fff); display: grid; place-content: center; text-align: center; padding: 10px; transition: transform 1s cubic-bezier(.3, .8, .3, 1) .6s; z-index: 1; }
.env-letter span { font-family: var(--hf); color: var(--p-ink); font-size: clamp(1.2rem, 5vw, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; }
.env-letter small { letter-spacing: .25em; font-size: .7rem; color: var(--muted); margin-top: 6px; }
.env-front { position: absolute; inset: 0; z-index: 2; border-radius: 10px; background: linear-gradient(to top right, var(--p) 50%, transparent 50.5%) left / 50.5% 100% no-repeat, linear-gradient(to top left, color-mix(in srgb, var(--p) 92%, #000) 50%, transparent 50.5%) right / 50.5% 100% no-repeat; }
.env-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--p) 85%, #fff) 0 44%, transparent 44.5%); clip-path: polygon(0 100%, 50% 40%, 100% 100%); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 3; background: color-mix(in srgb, var(--p) 90%, #fff 10%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .8s cubic-bezier(.4, 0, .2, 1), z-index 0s .4s; }
.env-seal { position: absolute; left: 50%; top: 58%; width: 68px; height: 68px; transform: translate(-50%, -50%); z-index: 4; background: none; border: 0; padding: 0; cursor: pointer; color: var(--a-ink); transition: transform .5s, opacity .4s; display: grid; place-items: center; }
.env-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.env-seal b { position: relative; font-family: var(--hf); color: var(--p-ink); font-size: 1.1rem; font-weight: 400; }
.intro.opening .env-seal { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
.intro.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.intro.opening .env-letter { transform: translateY(-48%); z-index: 3; }

/* Curtain */
.intro-curtain { background: var(--bg); overflow: hidden; }
.cur { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; transition: transform 1.6s cubic-bezier(.7, 0, .3, 1); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--p) 75%, #000) 0 18px, var(--p) 18px 30px, color-mix(in srgb, var(--p) 85%, #000) 30px 46px); box-shadow: inset 0 -60px 80px -40px rgba(0, 0, 0, .5); }
.cur-l { left: 0; border-right: 3px solid var(--a); }
.cur-r { right: 0; border-left: 3px solid var(--a); }
.cur-center { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; padding: 30px 22px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px); max-width: min(440px, 100%); transition: opacity .5s; }
.cur-orn { width: 110px; color: var(--a-ink); animation: spin 30s linear infinite; margin-bottom: 10px; }
.intro-names { font-family: var(--hf); font-size: clamp(2rem, 9vw, 3.4rem); color: var(--a-ink); line-height: 1.1; overflow-wrap: anywhere; }
.intro-curtain .intro-to { color: var(--t); font-size: 1.1rem; margin-bottom: 8px; }
.intro-curtain .intro-btn { color: var(--a-ink); border-color: var(--a); }
.intro.opening .cur-l { transform: translateX(-102%); }
.intro.opening .cur-r { transform: translateX(102%); }
.intro.opening .cur-center { opacity: 0; }
.intro-curtain.opened { transition-delay: 1.2s; }

/* Seal */
.seal-stage { display: grid; justify-items: center; text-align: center; }
.big-seal { position: relative; width: clamp(140px, 40vw, 190px); aspect-ratio: 1; border: 0; background: none; cursor: pointer; color: var(--p-ink); display: grid; place-items: center; padding: 0; animation: wobble 3s ease-in-out infinite; transition: transform .7s cubic-bezier(.5, -0.4, .5, 1.4), opacity .6s; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3)); }
.big-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.big-seal b { position: relative; font-family: var(--hf); font-size: clamp(2rem, 7vw, 2.8rem); color: var(--bg); font-weight: 400; }
.intro-hint { margin-top: 22px; letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; color: var(--muted); }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.03); } }
.intro.opening .big-seal { transform: scale(2.2) rotate(40deg); opacity: 0; animation: none; }

/* =========================================================================
   LAYOUT SKINS
   ========================================================================= */

/* --- FLORAL --- */
.layout-floral { background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--a) 18%, transparent), transparent 40%), radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--a) 14%, transparent), transparent 40%), var(--bg); background-attachment: fixed; }
.layout-floral { --card-bg: color-mix(in srgb, var(--bg) 70%, #fff); --card-radius: 28px; }
.fl-corner { position: absolute; width: clamp(130px, 36vw, 300px); color: var(--p-ink); z-index: 1; pointer-events: none; opacity: .95; }
.fl-corner svg { width: 100%; height: auto; display: block; }
.fl-corner.tl { top: -10px; left: -10px; transform: scaleY(-1); animation: sway2 7s ease-in-out infinite; transform-origin: top left; }
.fl-corner.tr { top: -10px; right: -10px; transform: rotate(180deg); animation: sway 8s ease-in-out infinite; transform-origin: top right; }
.fl-corner.bl { bottom: -10px; left: -10px; animation: sway 9s ease-in-out infinite; transform-origin: bottom left; }
.fl-corner.br { bottom: -10px; right: -10px; transform: scaleX(-1); animation: sway2 7.5s ease-in-out infinite; transform-origin: bottom right; }
@keyframes sway { 50% { rotate: 2.5deg; } }
@keyframes sway2 { 50% { rotate: -2.5deg; } }
.photo-arch { width: min(280px, 64vw); aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 0 1.5px var(--a), 0 30px 50px -24px color-mix(in srgb, var(--p) 60%, transparent); }
.photo-arch img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.12) translate(-2%, -2%); } }
.fl-bloom { width: clamp(90px, 22vw, 130px); color: var(--p-ink); animation: spin 40s linear infinite; }
.layout-floral .names { font-weight: 400; }

/* --- ROYAL --- */
.layout-royal { --card-bg: color-mix(in srgb, var(--bg) 88%, #000); --card-border: 1px solid color-mix(in srgb, var(--p) 55%, transparent); --card-radius: 6px; --card-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 88%, #000), 0 0 0 5px color-mix(in srgb, var(--p) 35%, transparent), 0 26px 50px -20px rgba(0, 0, 0, .6); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--bg) 70%, #fff 10%), var(--bg) 60%) fixed, var(--bg); }
.layout-royal .sec:nth-of-type(even) { background: repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--p) 5%, transparent) 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--p) 5%, transparent) 22px 23px); }
.ry-mandala { position: absolute; width: min(860px, 160vw); top: 50%; left: 50%; translate: -50% -50%; color: var(--p-ink); opacity: .16; animation: spin 90s linear infinite; z-index: 0; }
.ry-mandala svg { width: 100%; height: auto; display: block; }
.ry-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 30%, transparent), transparent 60%); top: 50%; left: 50%; translate: -50% -50%; z-index: 0; animation: glow 6s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .5; scale: 1.1; } }
.ry-arch { position: relative; width: min(260px, 60vw); aspect-ratio: 3 / 4; color: var(--p-ink); }
.ry-arch-svg, .ry-arch-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ry-arch-in { position: absolute; inset: 9% 8% 0; border-radius: 999px 999px 0 0; overflow: hidden; }
.ry-photo, .ry-photo img { width: 100%; height: 100%; object-fit: cover; }
.ry-mono { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--p) 25%, transparent), transparent 70%); }
.ry-mono span { font-family: var(--hf); font-size: clamp(2.5rem, 12vw, 4rem); color: var(--p-ink); }
.layout-royal .names, .layout-royal .sec-title h2, .layout-royal .foot-names { background: linear-gradient(100deg, var(--p) 20%, var(--a) 40%, #fff8dc 50%, var(--a) 60%, var(--p) 80%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 6s linear infinite; }
.layout-royal .names .amp { color: var(--a-ink); -webkit-text-fill-color: var(--a); }
@keyframes foil { to { background-position: 250% center; } }
.layout-royal .names { letter-spacing: .02em; }
.layout-royal .ev-date { background: transparent; border: 1.5px solid var(--p); color: var(--p-ink); border-radius: 0; rotate: 45deg; width: 66px; height: 66px; margin: 10px 0 14px; }
.layout-royal .ev-date > * { rotate: -45deg; }
.layout-royal .ibtn { --btn-text: var(--bg); background: linear-gradient(120deg, var(--p), var(--a), var(--p)); border: 0; }
.layout-royal .ibtn-ghost { background: transparent; border: 1.5px solid var(--p); color: var(--p-ink); }

/* --- MODERN (editorial) --- */
.layout-modern { --card-radius: 0; --card-shadow: none; --card-bg: transparent; --card-border: 1px solid color-mix(in srgb, var(--t) 18%, transparent); }
.layout-modern .hero { padding: 0; place-items: stretch; text-align: left; }
.md-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100svh; width: 100%; }
.md-photo { position: relative; overflow: hidden; background: var(--a); min-height: 0; }
.md-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.05); animation: kenburns 20s ease-in-out infinite alternate; }
.md-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, #000)); }
.md-placeholder span { font-family: var(--hf); font-size: clamp(5rem, 18vw, 12rem); color: var(--bg); opacity: .9; }
.md-vert { position: absolute; right: 18px; bottom: 24px; writing-mode: vertical-rl; letter-spacing: .4em; font-size: .78rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.md-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 7vw, 90px) clamp(22px, 6vw, 80px); min-width: 0; }
.md-issue { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 12px; margin-bottom: clamp(24px, 6vh, 60px); align-self: flex-start; }
.layout-modern .names { color: var(--t); text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 6.5rem); letter-spacing: -.01em; line-height: .95; }
.layout-modern .names.long { font-size: clamp(2.2rem, 6.2vw, 4.8rem); }
.layout-modern .names.xlong { font-size: clamp(1.8rem, 4.8vw, 3.6rem); }
.layout-modern .names .amp { font-size: .45em; font-style: italic; text-transform: none; color: var(--a-ink); }
.layout-modern .h-sub { margin-left: 0; }
.layout-modern .h-date { justify-content: flex-start; }
.layout-modern .sec-title { text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--t) 18%, transparent); padding-bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.layout-modern .sec-title h2 { color: var(--t); text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 3rem); }
.layout-modern .ev-date { border-radius: 0; background: var(--t); }
.layout-modern .event { text-align: left; align-items: flex-start; }
.layout-modern .ev-when, .layout-modern .ev-where { justify-content: flex-start; }
.layout-modern .ibtn { border-radius: 0; background: var(--t); border-color: var(--t); letter-spacing: .15em; text-transform: uppercase; font-size: .78rem; }
.layout-modern .ibtn-ghost { background: transparent; color: var(--t); }
.layout-modern .gal figure, .layout-modern .fld input, .layout-modern .fld select, .layout-modern .fld textarea, .layout-modern .seg span, .layout-modern .cd > div { border-radius: 0; }
.layout-modern .divider { display: none; }
.layout-modern .scroll-cue { left: 75%; border-color: var(--t); }
@media (max-width: 820px) {
  .md-grid { grid-template-columns: 1fr; grid-template-rows: minmax(52vh, 1fr) auto; }
  .md-text { padding-top: 34px; padding-bottom: 110px; }
  .layout-modern .scroll-cue { left: 50%; }
}

/* --- CLASSIC (boho card with sprigs + wax seal) --- */
.layout-classic { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--a) 16%, transparent), transparent 60%), var(--bg); --card-radius: 4px; --card-border: 1px solid var(--line); --card-shadow: 0 0 0 6px var(--card-bg), 0 0 0 7px var(--line), 0 24px 40px -26px rgba(0, 0, 0, .35); }
.cl-card { position: relative; z-index: 2; width: min(560px, 100%); padding: clamp(60px, 12vw, 90px) clamp(26px, 8vw, 70px) clamp(40px, 8vw, 70px); background: var(--card-bg); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -14px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .4); display: grid; justify-items: center; gap: 10px; }
.cl-sprig { position: absolute; top: 50%; width: clamp(34px, 10vw, 60px); color: var(--p-ink); opacity: .85; translate: 0 -50%; }
.cl-sprig svg { width: 100%; height: auto; display: block; }
.cl-sprig.l { left: clamp(-26px, -4vw, -10px); animation: sway 6s ease-in-out infinite; }
.cl-sprig.r { right: clamp(-26px, -4vw, -10px); transform: scaleX(-1); animation: sway2 6s ease-in-out infinite; }
.cl-seal { position: absolute; top: -38px; left: 50%; translate: -50% 0; width: 76px; height: 76px; color: var(--p-ink); display: grid; place-items: center; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.cl-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-seal b { position: relative; font-family: var(--hf); color: var(--bg); font-size: 1.15rem; font-weight: 400; }
.cl-oval { width: min(210px, 56vw); aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; border: 4px solid var(--card-bg); box-shadow: 0 0 0 1.5px var(--p); margin-bottom: 6px; }
.cl-oval img { width: 100%; height: 100%; object-fit: cover; }
.layout-classic .event { border-top: 3px solid var(--p); }

/* --- ROMANCE (polaroids + hearts) --- */
.layout-romance { background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--a) 30%, transparent), transparent 35%), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--a) 26%, transparent), transparent 35%), var(--bg); --card-radius: 26px; --card-bg: color-mix(in srgb, var(--bg) 55%, #fff); }
.rm-heart { position: absolute; z-index: 1; color: var(--a-ink); width: calc(18px + var(--i) * 6px); opacity: .55; left: calc(6% + var(--i) * 13%); top: calc(8% + var(--i) * 11%); animation: heartbeat calc(2.4s + var(--i) * .3s) ease-in-out infinite; }
.rm-heart:nth-child(odd) { color: var(--p-ink); opacity: .35; }
.rm-heart svg { width: 100%; height: auto; display: block; }
@keyframes heartbeat { 0%, 100% { transform: scale(1) translateY(0); } 15% { transform: scale(1.18) translateY(-4px); } 30% { transform: scale(1) translateY(-8px); } }
.rm-polaroids { position: relative; width: min(270px, 66vw); }
.pol { margin: 0; background: #fff; padding: 10px 10px 44px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .35); }
.pol img, .pol-ph { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pol-ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--a), var(--p)); color: #fff; }
.pol-ph svg { width: 40%; }
.pol figcaption { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--hf); color: #444; font-size: 1.3rem; }
.pol.front { position: relative; transform: rotate(-4deg); z-index: 2; transition: transform .5s; }
.pol.front:hover { transform: rotate(0) scale(1.03); }
.pol.back { position: absolute; inset: 0; transform: rotate(7deg) translate(14px, 8px); z-index: 1; }
.tape { position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--a) 60%, rgba(255, 255, 255, .6)); z-index: 3; opacity: .85; }
.layout-romance .ibtn { box-shadow: 0 10px 22px -10px var(--p); }

/* --- PARTY (playful neo-brutal) --- */
.layout-party { --card-radius: 22px; --card-border: 2.5px solid var(--t); --card-shadow: 6px 6px 0 var(--p); --card-bg: color-mix(in srgb, var(--bg) 80%, #fff); }
.pt-blob { position: absolute; z-index: 0; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); opacity: .5; animation: morph 12s ease-in-out infinite; }
.pt-blob.b1 { width: 46vmax; height: 46vmax; background: color-mix(in srgb, var(--a) 70%, transparent); top: -18vmax; left: -14vmax; }
.pt-blob.b2 { width: 34vmax; height: 34vmax; background: color-mix(in srgb, var(--p) 45%, transparent); bottom: -14vmax; right: -10vmax; animation-delay: -4s; }
.pt-blob.b3 { width: 14vmax; height: 14vmax; background: color-mix(in srgb, var(--p) 30%, var(--a)); top: 18%; right: 12%; animation-delay: -8s; }
@keyframes morph { 50% { border-radius: 63% 37% 38% 62% / 55% 61% 39% 45%; transform: rotate(30deg) scale(1.06); } }
.pt-balloons { position: absolute; z-index: 1; width: clamp(80px, 20vw, 170px); color: var(--p-ink); animation: floaty 6s ease-in-out infinite; }
.pt-balloons svg { width: 100%; height: auto; display: block; }
.pt-balloons.l { left: 2%; top: 12%; }
.pt-balloons.r { right: 2%; bottom: 14%; animation-delay: -3s; }
@keyframes floaty { 50% { transform: translateY(-22px) rotate(3deg); } }
.pt-photo { position: relative; width: min(220px, 56vw); aspect-ratio: 1; }
.pt-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--t); position: relative; z-index: 1; }
.pt-photo .ring { position: absolute; inset: -14px; border-radius: 50%; border: 3px dashed var(--p); animation: spin 18s linear infinite; }
.layout-party .h-head { display: inline-block; padding: 6px 16px; background: var(--a); color: var(--t); border: 2px solid var(--t); border-radius: 99px; letter-spacing: .15em; rotate: -3deg; font-weight: 700; }
.layout-party .names { color: var(--t); }
.layout-party .h-second { color: var(--p-ink); }
.layout-party .ibtn { border: 2.5px solid var(--t); box-shadow: 4px 4px 0 var(--t); color: var(--btn-text); }
.layout-party .ibtn:hover { box-shadow: 6px 6px 0 var(--t); }
.layout-party .ibtn-ghost { background: var(--card-bg); color: var(--t); }
.layout-party .sec-title h2 { color: var(--t); }
.layout-party .ev-date { background: var(--a); color: var(--t); border: 2.5px solid var(--t); }
.layout-party .gal figure { border: 2.5px solid var(--t); box-shadow: 4px 4px 0 var(--p); }

/* --- HOME (housewarming) --- */
.layout-home { background: linear-gradient(180deg, color-mix(in srgb, var(--a) 22%, var(--bg)) 0, var(--bg) 60vh), var(--bg); --card-radius: 20px; --card-border: 1.5px dashed color-mix(in srgb, var(--p) 45%, transparent); }
.hm-toran { position: absolute; top: 0; left: 0; right: 0; height: clamp(60px, 12vw, 100px); color: var(--p-ink); z-index: 3; }
.hm-toran svg { width: 100%; height: 100%; display: block; animation: swing 5s ease-in-out infinite; transform-origin: top; }
@keyframes swing { 50% { transform: scaleY(1.06); } }
.hm-house { width: min(260px, 62vw); color: var(--p-ink); animation: floaty 7s ease-in-out infinite; }
.hm-house svg { width: 100%; height: auto; display: block; }
.hm-window { position: relative; width: min(270px, 64vw); margin-top: 40px; }
.hm-window::before { content: ''; position: absolute; left: -9%; right: -9%; top: -28%; height: 34%; background: var(--p); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hm-window img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--p); border-top: 0; }
.layout-home .ev-date { border-radius: 16px; }

/* --- AURORA (glassmorphism) --- */
.layout-aurora { --card-bg: rgba(255, 255, 255, .07); --card-border: 1px solid rgba(255, 255, 255, .16); --card-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); --card-radius: 26px; --field-bg: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .18); --btn-text: #0b0b1a; }
.layout-aurora .card, .layout-aurora .cd > div { backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.au-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.au-bg i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .55; animation: aurora 18s ease-in-out infinite alternate; }
.au-bg i:nth-child(1) { background: var(--p); top: -20vmax; left: -15vmax; }
.au-bg i:nth-child(2) { background: var(--a); bottom: -25vmax; right: -20vmax; animation-delay: -6s; }
.au-bg i:nth-child(3) { background: color-mix(in srgb, var(--p) 50%, var(--a)); top: 30%; left: 30%; width: 40vmax; height: 40vmax; animation-delay: -12s; opacity: .35; }
@keyframes aurora { 50% { transform: translate(10vw, 8vh) scale(1.15); } 100% { transform: translate(-6vw, 12vh) scale(.9); } }
.layout-aurora .hero { position: relative; isolation: auto; }
.glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 32px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2); }
.au-card { padding: clamp(28px, 6vw, 54px) clamp(20px, 6vw, 56px); width: min(600px, 100%); display: grid; justify-items: center; }
.au-photo { width: min(220px, 56vw); aspect-ratio: 1; border-radius: 28px; padding: 3px; background: linear-gradient(135deg, var(--p), var(--a)); margin-bottom: 18px; }
.au-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }
.layout-aurora .names, .layout-aurora .sec-title h2, .layout-aurora .foot-names { background: linear-gradient(90deg, #fff, var(--a), var(--p), #fff); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 8s linear infinite; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--p) 60%, transparent)); }
.layout-aurora .names .amp { -webkit-text-fill-color: var(--a); }
.layout-aurora .ev-date { background: linear-gradient(135deg, var(--p), var(--a)); }
.layout-aurora .ibtn { background: linear-gradient(120deg, var(--p), var(--a)); border: 0; }
.layout-aurora .ibtn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); color: var(--t); }

/* --- FESTIVE (lanterns, rangoli, diyas) --- */
.layout-festive { --card-radius: 18px; --card-border: 1.5px solid color-mix(in srgb, var(--p) 45%, transparent); background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--p) 22%, transparent), transparent 60%) fixed, radial-gradient(circle at 50% 0, color-mix(in srgb, var(--a) 16%, transparent), transparent 50%) fixed, var(--bg); }
.fs-lanterns { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 1; pointer-events: none; }
.fs-lantern { display: block; width: clamp(34px, 7vw, 58px); margin-top: var(--len); color: var(--p-ink); transform-origin: top center; animation: lanternSwing calc(3.5s + var(--i) * .6s) ease-in-out infinite; position: relative; }
.fs-lantern::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 1.5px; height: var(--len); background: var(--p); opacity: .7; }
.fs-lantern svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--a) 70%, transparent)); }
@keyframes lanternSwing { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@media (max-width: 560px) { .fs-lantern:nth-child(2), .fs-lantern:nth-child(4) { display: none; } }
.fs-rangoli { position: absolute; width: min(760px, 150vw); top: 55%; left: 50%; translate: -50% -50%; color: var(--a-ink); opacity: .22; animation: spin 120s linear infinite; z-index: 0; }
.fs-rangoli svg { width: 100%; height: auto; display: block; }
.fs-photo { width: min(240px, 58vw); aspect-ratio: 1; border-radius: 50%; padding: 6px; background: conic-gradient(from 0deg, var(--p), var(--a), var(--p), var(--a), var(--p)); box-shadow: 0 0 40px -6px color-mix(in srgb, var(--a) 70%, transparent); margin-top: clamp(60px, 14vh, 120px); }
.fs-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg); }
.fs-diyas { display: flex; gap: clamp(16px, 5vw, 40px); justify-content: center; }
.fs-diyas span { width: clamp(54px, 13vw, 80px); color: var(--p-ink); }
.fs-diyas svg { width: 100%; height: auto; display: block; overflow: visible; }
.flame { transform-origin: 50% 100%; transform-box: fill-box; animation: flicker 1.6s ease-in-out infinite alternate; }
.flame-glow { animation: glow 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(0); } 40% { transform: scale(.94, 1.08) skewX(3deg); } 70% { transform: scale(1.04, .95) skewX(-3deg); } 100% { transform: scale(.98, 1.04) skewX(1deg); } }
.layout-festive .names { text-shadow: 0 0 30px color-mix(in srgb, var(--a) 45%, transparent); }
.layout-festive .ev-date { background: linear-gradient(135deg, var(--p), var(--a)); }
.layout-festive .event { position: relative; overflow: hidden; }
.layout-festive .event::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: repeating-linear-gradient(90deg, var(--p) 0 12px, var(--a) 12px 24px); }

/* =========================================================================
   15 ADDITIONAL LAYOUTS
   ========================================================================= */

/* --- TEMPLE (Kerala kasavu / South-Indian traditional) --- */
.layout-temple { --card-radius: 6px; --card-border: 2px solid var(--p); --card-shadow: 0 0 0 5px var(--card-bg), 0 0 0 6px color-mix(in srgb, var(--p) 40%, transparent); background: var(--bg); }
.tp-border { position: absolute; left: 0; right: 0; height: clamp(26px, 5vw, 40px); z-index: 2; background:
  linear-gradient(var(--p), var(--p)) 0 30% / 100% 34% no-repeat,
  repeating-linear-gradient(90deg, var(--a) 0 6px, transparent 6px 14px) 0 82% / 100% 14% no-repeat,
  linear-gradient(color-mix(in srgb, var(--p) 60%, transparent), color-mix(in srgb, var(--p) 60%, transparent)) 0 100% / 100% 2px no-repeat; }
.tp-border.top { top: 0; }
.tp-border.bottom { bottom: 0; transform: scaleY(-1); }
.tp-jasmine { position: absolute; top: clamp(26px, 5vw, 40px); left: 0; right: 0; height: 60px; z-index: 1; display: flex; justify-content: space-around; pointer-events: none; }
.tp-jasmine span { width: 33%; height: 48px; border-bottom: 3px dotted #fff; border-radius: 0 0 50% 50%; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--p) 60%, transparent)); animation: swing 6s ease-in-out infinite; transform-origin: top; }
.tp-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(6px, 3vw, 26px); margin-top: clamp(50px, 10vh, 80px); width: min(560px, 100%); }
.tp-lamp { color: var(--p-ink); justify-self: center; width: clamp(40px, 11vw, 74px); }
.tp-lamp svg { width: 100%; height: auto; display: block; overflow: visible; }
.tp-gopuram { width: min(230px, 50vw); aspect-ratio: 3 / 4; clip-path: polygon(50% 0, 62% 6%, 62% 12%, 74% 14%, 74% 22%, 86% 24%, 86% 32%, 100% 34%, 100% 100%, 0 100%, 0 34%, 14% 32%, 14% 24%, 26% 22%, 26% 14%, 38% 12%, 38% 6%); background: var(--p); padding: 0; position: relative; }
.tp-gopuram img, .tp-mono { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; clip-path: inherit; }
.tp-mono { display: grid; place-items: center; background: var(--bg); }
.tp-mono span { font-family: var(--hf); font-size: 3rem; color: var(--p-ink); }
.layout-temple .names { color: var(--p-ink); }
.layout-temple .ev-date { border-radius: 0; background: var(--p); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--a); }
.layout-temple .sec-title::after { content: ''; display: block; width: min(220px, 60%); height: 10px; margin: 14px auto 0; background: linear-gradient(var(--p), var(--p)) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, var(--a) 0 4px, transparent 4px 9px) 0 100% / 100% 3px no-repeat; }

/* --- DECO (Art Deco / Gatsby) --- */
.layout-deco { --card-radius: 0; --card-bg: color-mix(in srgb, var(--bg) 90%, #fff 4%); --card-border: 1px solid var(--p); --card-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--p) 50%, transparent); background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--p) 18%, transparent), transparent 60%), var(--bg); }
.dc-rays { position: absolute; left: 50%; bottom: 0; width: min(1100px, 190vw); translate: -50% 0; color: var(--p-ink); opacity: .35; z-index: 0; }
.dc-rays svg { width: 100%; height: auto; display: block; animation: rays 8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes rays { to { transform: scale(1.04); opacity: .8; } }
.dc-frame { position: relative; z-index: 2; width: min(560px, 100%); padding: clamp(34px, 7vw, 56px) clamp(18px, 6vw, 48px); border: 2px solid var(--p); outline: 1px solid var(--p); outline-offset: 7px; background: color-mix(in srgb, var(--bg) 92%, transparent); display: grid; justify-items: center; gap: 8px; }
.dc-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--p); rotate: 45deg; background: var(--bg); }
.dc-corner.tl { top: -14px; left: -14px; } .dc-corner.tr { top: -14px; right: -14px; } .dc-corner.bl { bottom: -14px; left: -14px; } .dc-corner.br { bottom: -14px; right: -14px; }
.dc-photo { width: min(200px, 52vw); aspect-ratio: 1; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: var(--p); padding: 4px; }
.dc-photo img { width: 100%; height: 100%; object-fit: cover; clip-path: inherit; }
.dc-mono { display: grid; place-items: center; }
.dc-mono span { font-family: var(--hf); font-size: 3rem; color: var(--bg); }
.dc-rule { display: flex; align-items: center; gap: 10px; width: 70%; color: var(--p-ink); margin: 10px 0 4px; }
.dc-rule i { flex: 1; height: 1px; background: var(--p); }
.layout-deco .names { text-transform: uppercase; letter-spacing: .12em; background: linear-gradient(100deg, var(--p) 20%, #fff6d0 50%, var(--p) 80%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 6s linear infinite; }
.layout-deco .names .amp { -webkit-text-fill-color: var(--a); letter-spacing: 0; }
.layout-deco .sec-title h2 { text-transform: uppercase; letter-spacing: .14em; }
.layout-deco .ev-date { border-radius: 0; rotate: 45deg; background: transparent; border: 1.5px solid var(--p); color: var(--p-ink); width: 62px; height: 62px; margin: 10px 0 14px; }
.layout-deco .ev-date > * { rotate: -45deg; }
.layout-deco .ibtn { border-radius: 0; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }

/* --- PEACOCK --- */
.layout-peacock { --card-radius: 24px; --card-border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--a) 22%, transparent), transparent 55%), var(--bg); }
.pk-stage { position: relative; width: min(340px, 86vw); aspect-ratio: 1.2; display: grid; place-items: end center; }
.pk-fan { position: absolute; inset: 0; }
.pk-feather { position: absolute; left: 50%; bottom: 8%; width: 18%; color: color-mix(in srgb, var(--p) 80%, #0a4); transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--r)) scale(.2); opacity: 0; animation: fanOpen 1.2s cubic-bezier(.2, .9, .3, 1.2) var(--d) forwards, featherSway 5s ease-in-out calc(var(--d) + 1.2s) infinite alternate; }
.pk-feather svg { width: 100%; height: auto; display: block; }
@keyframes fanOpen { to { transform: translateX(-50%) rotate(var(--r)) scale(1); opacity: 1; } }
@keyframes featherSway { from { transform: translateX(-50%) rotate(var(--r)) scale(1); } to { transform: translateX(-50%) rotate(calc(var(--r) + 3deg)) scale(1.02); } }
.pk-photo { position: relative; z-index: 2; width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--a); box-shadow: 0 0 0 3px var(--p), 0 18px 40px -12px rgba(0, 0, 0, .5); display: grid; place-items: center; background: var(--p); margin-bottom: 6%; }
.pk-photo img { width: 100%; height: 100%; object-fit: cover; }
.pk-photo span { font-family: var(--hf); font-size: 2.4rem; color: var(--bg); }
.layout-peacock .ev-date { background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--a) 70%, #0a4)); }

/* --- NEWSPAPER --- */
.layout-newspaper { --card-radius: 0; --card-shadow: none; --card-bg: transparent; --card-border: 1px solid color-mix(in srgb, var(--t) 35%, transparent); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
.layout-newspaper .hero { place-items: start center; }
.np-paper { position: relative; z-index: 2; width: min(860px, 100%); background: color-mix(in srgb, var(--bg) 92%, #fff); padding: clamp(16px, 4vw, 36px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); text-align: left; animation: paperSpin 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes paperSpin { from { transform: rotate(-540deg) scale(.1); opacity: 0; } to { transform: none; opacity: 1; } }
.np-mast { border-bottom: 3px double var(--t); padding-bottom: 8px; margin-bottom: 14px; text-align: center; }
.np-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--t); padding-bottom: 6px; }
.np-title { font-family: var(--hf); font-size: clamp(2rem, 8.5vw, 4.6rem); line-height: 1; margin: 10px 0 8px; color: var(--t); overflow-wrap: anywhere; }
.np-bar { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; border-top: 1px solid var(--t); padding-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.np-paper, .np-mast, .np-cols, .np-story { min-width: 0; max-width: 100%; }
.np-kicker { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: var(--p-ink); margin: 0 0 4px; font-weight: 700; }
.layout-newspaper .np-head { color: var(--t); text-transform: uppercase; text-align: left; line-height: .98; margin: 0 0 8px; font-size: clamp(2.2rem, 9vw, 5rem); }
.layout-newspaper .np-head.long { font-size: clamp(1.8rem, 7vw, 3.8rem); }
.layout-newspaper .np-head.xlong { font-size: clamp(1.5rem, 5.5vw, 3rem); }
.np-deck { font-style: italic; font-size: clamp(1rem, 2.6vw, 1.25rem); border-bottom: 1px solid var(--t); padding-bottom: 12px; margin-bottom: 14px; }
.np-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 26px); }
.np-photo { margin: 0; }
.np-photo img, .np-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.15); display: grid; place-items: center; background: color-mix(in srgb, var(--t) 15%, var(--bg)); font-family: var(--hf); font-size: 3rem; }
.np-photo figcaption { font-size: .72rem; font-style: italic; margin-top: 6px; color: var(--muted); }
.np-story { font-size: .95rem; line-height: 1.6; column-rule: 1px solid color-mix(in srgb, var(--t) 25%, transparent); overflow-wrap: anywhere; }
.np-drop::first-letter { float: left; font-family: var(--hf); font-size: 3.4em; line-height: .85; padding: 4px 6px 0 0; color: var(--p-ink); }
.np-when { margin: 6px 0 0; font-size: .9rem; }
@media (max-width: 640px) { .np-cols { grid-template-columns: 1fr; } }
.layout-newspaper .sec-title h2 { color: var(--t); text-transform: uppercase; border-block: 3px double var(--t); padding: 6px 0; }
.layout-newspaper .ev-date { border-radius: 0; background: var(--t); }
.layout-newspaper .ibtn { border-radius: 0; background: var(--t); border-color: var(--t); }
.layout-newspaper .ibtn-ghost { background: transparent; color: var(--t); }

/* --- TICKET (boarding pass) --- */
.layout-ticket { --card-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 45%, var(--bg)) 0, var(--bg) 70vh); }
.tk-sky { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.tk-cloud { position: absolute; width: 140px; height: 44px; border-radius: 40px; background: #fff; opacity: .75; filter: blur(1px); animation: cloud 26s linear infinite; }
.tk-cloud::before, .tk-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.tk-cloud::before { width: 60px; height: 60px; top: -28px; left: 22px; }
.tk-cloud::after { width: 46px; height: 46px; top: -18px; left: 70px; }
.tk-cloud.c1 { top: 12%; left: -20%; } .tk-cloud.c2 { top: 32%; left: -40%; animation-duration: 34s; animation-delay: -12s; scale: .7; } .tk-cloud.c3 { top: 70%; left: -30%; animation-duration: 40s; animation-delay: -22s; scale: .9; }
@keyframes cloud { to { transform: translateX(150vw); } }
.tk-plane { position: absolute; top: 18%; left: -60px; width: 46px; color: var(--p-ink); animation: fly 9s linear infinite; }
.tk-plane svg { width: 100%; height: auto; display: block; }
@keyframes fly { 0% { transform: translate(0, 30px) rotate(-8deg); } 100% { transform: translate(calc(100vw + 120px), -40px) rotate(-8deg); } }
.tk-pass { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 26%, 180px); width: min(680px, 100%); background: #fff; color: #1d1d2a; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); text-align: left; }
.tk-main { padding: clamp(16px, 4vw, 28px); border-right: 2px dashed #d5d5df; position: relative; min-width: 0; }
.tk-main::before, .tk-main::after { content: ''; position: absolute; right: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); }
.tk-main::before { top: -13px; } .tk-main::after { bottom: -13px; }
.tk-top { display: flex; justify-content: space-between; gap: 8px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--p-ink); border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tk-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.tk-route > div:not(.tk-path) { min-width: 0; }
.tk-route > div:last-child { text-align: right; }
.tk-route small, .tk-grid small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #66667c; }
.tk-route b { display: block; font-family: var(--hf); font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1; color: var(--p-ink); }
.tk-route span { display: block; font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.tk-path { display: flex; align-items: center; gap: 4px; color: var(--p-ink); width: clamp(50px, 14vw, 120px); }
.tk-path i { flex: 1; border-top: 2px dotted currentColor; }
.tk-path svg { width: 24px; flex: none; }
.tk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }
.tk-grid b { font-size: .9rem; overflow-wrap: anywhere; }
.tk-note { margin: 12px 0 0; font-size: .85rem; color: #555; font-style: italic; }
.tk-stub { padding: 16px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.tk-stub img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.tk-barcode { width: 100%; height: 54px; background: repeating-linear-gradient(90deg, #1d1d2a 0 2px, transparent 2px 4px, #1d1d2a 4px 7px, transparent 7px 8px, #1d1d2a 8px 9px, transparent 9px 12px); }
.tk-stub small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 560px) {
  .tk-pass { grid-template-columns: 1fr; }
  .tk-main { border-right: 0; border-bottom: 2px dashed #d5d5df; }
  .tk-main::before, .tk-main::after { top: auto; bottom: -13px; }
  .tk-main::before { left: -13px; right: auto; } .tk-main::after { right: -13px; }
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-stub { flex-direction: row; } .tk-stub img { width: 80px; flex: none; }
}
.layout-ticket .ev-date { border-radius: 12px; }

/* --- POSTCARD (vintage airmail) --- */
.layout-postcard { --card-radius: 4px; --card-border: 1px solid color-mix(in srgb, var(--t) 22%, transparent); background: var(--bg); }
.pc-card { position: relative; z-index: 2; width: min(760px, 100%); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 28px); padding: clamp(18px, 4vw, 34px); background: color-mix(in srgb, var(--bg) 85%, #fff); border: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--p) 0 12px, #fff 12px 20px, var(--a) 20px 32px, #fff 32px 40px) 10; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); text-align: left; transform: rotate(-1.2deg); }
.pc-left { border-right: 1px solid color-mix(in srgb, var(--t) 25%, transparent); padding-right: clamp(10px, 3vw, 24px); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.layout-postcard .names { text-align: left; }
.layout-postcard .h-sub { margin-left: 0; }
.pc-right { position: relative; min-width: 0; display: grid; align-content: start; gap: 10px; }
.pc-stamp { justify-self: end; width: clamp(90px, 22vw, 130px); aspect-ratio: .82; padding: 7px; background: #fff; -webkit-mask: radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 13px 13px; mask: radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 13px 13px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); display: grid; place-items: center; animation: stampIn .8s cubic-bezier(.3, 1.6, .5, 1) .4s both; }
@keyframes stampIn { from { transform: scale(2.2) rotate(12deg); opacity: 0; } }
.pc-stamp img { width: 100%; height: 100%; object-fit: cover; }
.pc-stamp span { font-family: var(--hf); font-size: 2rem; color: var(--p-ink); }
.pc-postmark { position: absolute; top: 18px; right: clamp(70px, 18vw, 110px); width: 86px; height: 86px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--p) 70%, transparent); display: grid; place-content: center; text-align: center; color: color-mix(in srgb, var(--p-ink) 92%, transparent); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; rotate: -14deg; }
.pc-postmark::after { content: ''; position: absolute; left: 70%; top: 30%; width: 110px; height: 34px; background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 9px); opacity: .6; border-radius: 30px; }
.pc-postmark b { font-size: 1rem; }
.pc-lines { margin-top: 30px; }
.pc-lines p { margin: 0; padding: 8px 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--t) 25%, transparent); font-family: var(--hf); font-size: 1.15rem; overflow-wrap: anywhere; min-height: 2.2em; }
@media (max-width: 620px) {
  .pc-card { grid-template-columns: 1fr; transform: none; }
  .pc-left { border-right: 0; padding-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--t) 25%, transparent); padding-bottom: 14px; }
  .pc-postmark { right: auto; left: 0; }
}
.layout-postcard .ev-date { background: var(--p); border-radius: 6px; }

/* --- CELESTIAL (night sky) --- */
.layout-celestial { --card-bg: color-mix(in srgb, var(--bg) 80%, #fff 6%); --card-border: 1px solid color-mix(in srgb, var(--p) 30%, transparent); --card-radius: 22px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--a) 22%, var(--bg)), var(--bg) 70%) fixed, var(--bg); }
.cs-stars { position: absolute; inset: 0; z-index: 0; }
.cs-stars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--t); box-shadow: 0 0 6px var(--t); animation: twinkleDot 3s ease-in-out var(--d) infinite; }
@keyframes twinkleDot { 50% { opacity: .2; transform: scale(.6); } }
.cs-constellation { position: absolute; top: 6%; left: 50%; width: min(620px, 96vw); translate: -50% 0; color: var(--p-ink); opacity: .7; z-index: 1; }
.cs-constellation polyline { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw 4s ease-out .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cs-moon { position: relative; width: min(240px, 60vw); aspect-ratio: 1; display: grid; place-items: center; margin-top: clamp(40px, 9vh, 80px); }
.cs-moon-svg { position: absolute; inset: 0; color: var(--p-ink); filter: drop-shadow(0 0 30px color-mix(in srgb, var(--p) 60%, transparent)); animation: floaty 7s ease-in-out infinite; }
.cs-moon-svg svg { width: 100%; height: 100%; display: block; }
.cs-photo { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--p); box-shadow: 0 0 40px -6px var(--p); translate: 22% 18%; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.layout-celestial .names { text-shadow: 0 0 24px color-mix(in srgb, var(--p) 55%, transparent); }
.layout-celestial .ev-date { background: transparent; border: 1.5px solid var(--p); color: var(--p-ink); box-shadow: 0 0 18px -4px var(--p); }

/* --- TROPICAL --- */
.layout-tropical { --card-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 70%, var(--bg)) 0, color-mix(in srgb, var(--p) 35%, var(--bg)) 45vh, var(--bg) 100vh); }
.tr-sun { position: absolute; left: 50%; top: 52%; width: min(420px, 80vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff2b3, color-mix(in srgb, var(--a) 80%, #ffb347) 60%, transparent 71%); opacity: .85; animation: sunset 12s ease-in-out infinite alternate; z-index: 0; }
@keyframes sunset { to { translate: -50% -42%; opacity: .65; } }
.tr-palm { position: absolute; bottom: 4%; width: clamp(150px, 34vw, 340px); color: color-mix(in srgb, var(--t) 85%, #000); z-index: 1; transform-origin: 10% 90%; animation: palmSway 6s ease-in-out infinite alternate; }
.tr-palm svg { width: 100%; height: auto; display: block; }
.tr-palm.l { left: -4%; }
.tr-palm.r { right: -4%; transform: scaleX(-1); animation-name: palmSwayR; }
@keyframes palmSway { to { rotate: 3deg; } }
@keyframes palmSwayR { to { transform: scaleX(-1) rotate(3deg); } }
.tr-photo { width: min(260px, 64vw); aspect-ratio: 4 / 5; border-radius: 140px 140px 24px 24px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .5); }
.tr-photo img { width: 100%; height: 100%; object-fit: cover; }
.tr-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(50px, 10vw, 110px); z-index: 1; overflow: hidden; }
.tr-waves path { animation: waves 9s linear infinite; }
.tr-waves .w1 { fill: color-mix(in srgb, var(--p) 55%, transparent); }
.tr-waves .w2 { fill: var(--bg); animation-duration: 6s; }
@keyframes waves { to { transform: translateX(-600px); } }
.layout-tropical .ev-date { background: linear-gradient(135deg, var(--p), var(--a)); }

/* --- RETRO (70s groovy) --- */
.layout-retro { --card-radius: 28px; --card-border: 3px solid var(--t); --card-shadow: 6px 6px 0 var(--a); background: var(--bg); }
.rt-stripes { position: absolute; left: 50%; bottom: -55vmax; width: 130vmax; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: repeating-radial-gradient(circle, var(--p) 0 6vmax, var(--a) 6vmax 12vmax, color-mix(in srgb, var(--p) 55%, var(--t)) 12vmax 18vmax, var(--bg) 18vmax 21vmax); opacity: .9; animation: spinSlow 60s linear infinite; z-index: 0; }
@keyframes spinSlow { to { rotate: 360deg; } }
.rt-daisy { position: absolute; width: clamp(60px, 14vw, 120px); color: var(--t); z-index: 1; animation: spin 14s linear infinite; }
.rt-daisy svg { width: 100%; height: auto; display: block; }
.rt-daisy.d1 { top: 10%; left: 6%; } .rt-daisy.d2 { top: 16%; right: 6%; animation-direction: reverse; width: clamp(44px, 10vw, 90px); }
.rt-photo { width: min(230px, 58vw); aspect-ratio: 1; overflow: hidden; border: 4px solid var(--t); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: morph 10s ease-in-out infinite; box-shadow: 8px 8px 0 var(--p); }
.rt-photo img { width: 100%; height: 100%; object-fit: cover; }
.rt-panel { background: var(--bg); border: 3px solid var(--t); border-radius: 30px; padding: clamp(18px, 4vw, 30px) clamp(16px, 5vw, 40px); box-shadow: 8px 8px 0 var(--t); max-width: 100%; }
.layout-retro .names { color: var(--p-ink); text-shadow: 3px 3px 0 var(--a), 6px 6px 0 var(--t); }
.layout-retro .names .amp { text-shadow: none; }
.rt-checker { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 2; background: conic-gradient(var(--t) 25%, var(--bg) 0 50%, var(--t) 0 75%, var(--bg) 0) 0 0 / 26px 26px; }
.layout-retro .ibtn { border: 3px solid var(--t); box-shadow: 4px 4px 0 var(--t); }
.layout-retro .ev-date { border: 3px solid var(--t); }

/* --- MARQUEE (theatre lights) --- */
.layout-marquee { --card-radius: 14px; --card-bg: color-mix(in srgb, var(--bg) 85%, #fff 5%); --card-border: 1px solid color-mix(in srgb, var(--a) 40%, transparent); background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--p) 25%, transparent), transparent 60%), var(--bg); }
.mq-spot { position: absolute; top: -10%; width: 60vmax; height: 140vmax; background: conic-gradient(from 170deg at 50% 0, transparent 0 8deg, color-mix(in srgb, var(--a) 22%, transparent) 10deg 18deg, transparent 20deg); z-index: 0; transform-origin: 50% 0; animation: spotlight 6s ease-in-out infinite alternate; }
.mq-spot.l { left: -20vmax; } .mq-spot.r { right: -20vmax; animation-delay: -3s; animation-direction: alternate-reverse; }
@keyframes spotlight { from { rotate: -18deg; } to { rotate: 18deg; } }
.mq-sign { position: relative; z-index: 2; width: min(600px, 100%); padding: 22px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 70%, #000); box-shadow: 0 0 0 4px var(--p), 0 30px 70px -20px rgba(0, 0, 0, .7); }
.mq-bulbs { position: absolute; inset: 8px; border-radius: 20px; background:
  radial-gradient(circle, #fff7cc 0 3px, var(--a) 4px, transparent 6px) 0 0 / 22px 22px repeat-x,
  radial-gradient(circle, #fff7cc 0 3px, var(--a) 4px, transparent 6px) 0 100% / 22px 22px repeat-x,
  radial-gradient(circle, #fff7cc 0 3px, var(--a) 4px, transparent 6px) 0 0 / 22px 22px repeat-y,
  radial-gradient(circle, #fff7cc 0 3px, var(--a) 4px, transparent 6px) 100% 0 / 22px 22px repeat-y;
  filter: drop-shadow(0 0 6px var(--a)); animation: bulbs 1.2s steps(2) infinite; pointer-events: none; }
@keyframes bulbs { 50% { filter: drop-shadow(0 0 1px var(--a)) brightness(.6); } }
.mq-inner { position: relative; padding: clamp(26px, 6vw, 44px) clamp(14px, 5vw, 34px); display: grid; justify-items: center; gap: 8px; }
.mq-photo { width: min(170px, 44vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--a); box-shadow: 0 0 30px -4px var(--a); margin-bottom: 8px; }
.mq-photo img { width: 100%; height: 100%; object-fit: cover; }
.layout-marquee .names { color: #fff; text-shadow: 0 0 6px var(--a), 0 0 20px var(--p), 0 0 40px var(--p); animation: neonFlicker 4s linear infinite; }
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; } 20%, 22% { opacity: .55; } }
.layout-marquee .ev-date { background: transparent; border: 2px solid var(--a); color: var(--a-ink); box-shadow: 0 0 14px -2px var(--a); }

/* --- BOHO (rainbow arch) --- */
.layout-boho { --card-radius: 120px 120px 22px 22px; --card-border: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent); background: var(--bg); }
.layout-boho .event { border-radius: 26px; }
.bh-sun { position: absolute; top: 9%; right: 10%; width: clamp(60px, 14vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 10px color-mix(in srgb, var(--a) 35%, transparent), 0 0 0 22px color-mix(in srgb, var(--a) 15%, transparent); animation: floaty 8s ease-in-out infinite; z-index: 0; }
.bh-pampas { position: absolute; bottom: 0; width: clamp(70px, 16vw, 150px); color: color-mix(in srgb, var(--t) 70%, var(--bg)); z-index: 1; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite; }
.bh-pampas svg { width: 100%; height: auto; display: block; }
.bh-pampas.l { left: 2%; } .bh-pampas.r { right: 2%; transform: scaleX(-1); }
.bh-arch { position: relative; width: min(320px, 82vw); display: grid; justify-items: center; }
.bh-rainbow { width: 100%; color: var(--p-ink); }
.bh-rainbow svg { width: 100%; height: auto; display: block; overflow: visible; }
.bh-rainbow path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 2.2s ease-out forwards; }
.bh-rainbow path:nth-child(2) { animation-delay: .25s; } .bh-rainbow path:nth-child(3) { animation-delay: .5s; } .bh-rainbow path:nth-child(4) { animation-delay: .75s; }
.bh-photo { width: 58%; aspect-ratio: 4 / 5; border-radius: 999px 999px 16px 16px; overflow: hidden; margin-top: -24%; border: 5px solid var(--bg); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .4); }
.bh-photo img { width: 100%; height: 100%; object-fit: cover; }
.layout-boho .ev-date { border-radius: 999px 999px 10px 10px; background: var(--p); }

/* --- WATERCOLOR --- */
.layout-watercolor { --card-radius: 30px; --card-bg: color-mix(in srgb, var(--bg) 75%, #fff); --card-border: 0; --card-shadow: 0 20px 40px -26px color-mix(in srgb, var(--p) 50%, transparent); background: var(--bg); }
.wc-wash { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.wc-wash i { position: absolute; width: 55vmax; aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 55% 44% 56% 45%; filter: blur(30px); opacity: .45; mix-blend-mode: multiply; animation: wash 18s ease-in-out infinite alternate; }
.is-dark .wc-wash i { mix-blend-mode: screen; }
.wc-wash i:nth-child(1) { background: var(--a); top: -20vmax; left: -15vmax; }
.wc-wash i:nth-child(2) { background: var(--p); bottom: -25vmax; right: -18vmax; opacity: .3; animation-delay: -6s; }
.wc-wash i:nth-child(3) { background: color-mix(in srgb, var(--a) 50%, #9be3d0); top: 30%; right: -25vmax; animation-delay: -10s; }
.wc-wash i:nth-child(4) { background: color-mix(in srgb, var(--p) 40%, #ffd6a5); bottom: -10vmax; left: -20vmax; animation-delay: -14s; }
@keyframes wash { to { transform: translate(6vw, 4vh) rotate(25deg) scale(1.1); border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; } }
.wc-photo { width: min(260px, 64vw); aspect-ratio: 1; overflow: hidden; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--p) 60%, transparent); animation: morph 14s ease-in-out infinite; }
.wc-photo img { width: 100%; height: 100%; object-fit: cover; }
.wc-names { position: relative; padding: 10px 6px; }
.wc-stroke { position: absolute; left: -6%; top: 22%; width: 112%; height: 56%; z-index: -1; fill: color-mix(in srgb, var(--a) 45%, transparent); }
.wc-stroke path { animation: brushIn 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; transform-origin: left; }
@keyframes brushIn { from { transform: scaleX(0); } }
.layout-watercolor .ev-date { border-radius: 46% 54% 52% 48% / 55% 44% 56% 45%; background: var(--p); }

/* --- LOTUS (pond) --- */
.layout-lotus { --card-radius: 22px; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--a) 18%, var(--bg)), var(--bg) 70%); }
.lt-ripples { position: absolute; left: 50%; top: 58%; width: 10px; height: 10px; z-index: 0; }
.lt-ripples i { position: absolute; left: 50%; top: 50%; width: 80vmax; aspect-ratio: 2.4; border: 2px solid color-mix(in srgb, var(--p) 35%, transparent); border-radius: 50%; translate: -50% -50%; scale: 0; opacity: 0; animation: ripple 8s ease-out infinite; }
.lt-ripples i:nth-child(2) { animation-delay: 2s; } .lt-ripples i:nth-child(3) { animation-delay: 4s; } .lt-ripples i:nth-child(4) { animation-delay: 6s; }
@keyframes ripple { 0% { scale: 0; opacity: .9; } 100% { scale: 1; opacity: 0; } }
.lt-pad { position: absolute; z-index: 1; width: clamp(60px, 14vw, 120px); aspect-ratio: 1.3; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 18deg, color-mix(in srgb, var(--p) 60%, #3f6b3f) 18deg); opacity: .65; animation: floaty 9s ease-in-out infinite; }
.lt-pad.p1 { left: 6%; top: 62%; } .lt-pad.p2 { right: 8%; top: 70%; animation-delay: -3s; scale: .8; } .lt-pad.p3 { left: 18%; top: 82%; animation-delay: -6s; scale: .6; }
.lt-photo { width: min(220px, 56vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--a), 0 24px 40px -20px rgba(0, 0, 0, .4); }
.lt-photo img { width: 100%; height: 100%; object-fit: cover; }
.lt-flower { width: min(200px, 52vw); color: var(--p-ink); margin-top: -14px; }
.lt-flower svg { width: 100%; height: auto; display: block; overflow: visible; }
.lt-flower .petal { transform-box: fill-box; transform-origin: 50% 100%; animation: bloom 1.6s cubic-bezier(.2, .9, .3, 1.2) both; }
.lt-flower g:nth-child(1) .petal, .lt-flower g:nth-child(7) .petal { animation-delay: .6s; } .lt-flower g:nth-child(2) .petal, .lt-flower g:nth-child(6) .petal { animation-delay: .4s; } .lt-flower g:nth-child(3) .petal, .lt-flower g:nth-child(5) .petal { animation-delay: .2s; }
@keyframes bloom { from { scale: 1 .1; opacity: 0; } }
.layout-lotus .ev-date { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--p); }

/* --- CHALK (chalkboard) --- */
.layout-chalk { --card-radius: 10px; --card-bg: color-mix(in srgb, var(--bg) 88%, #fff 4%); --card-border: 2px dashed color-mix(in srgb, var(--t) 40%, transparent); --card-shadow: none; background: var(--bg); }
.layout-chalk .hero { padding: clamp(14px, 3vw, 30px); }
.ck-board { position: relative; width: 100%; min-height: calc(100svh - 2 * clamp(14px, 3vw, 30px)); display: grid; place-items: center; padding: clamp(40px, 8vw, 70px) clamp(16px, 5vw, 50px) clamp(70px, 10vw, 90px); border: clamp(12px, 2.5vw, 20px) solid #8b5a2b; border-radius: 10px; box-shadow: inset 0 0 80px rgba(0, 0, 0, .45), 0 20px 40px -20px rgba(0, 0, 0, .6); background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--bg) 85%, #fff 8%), var(--bg) 70%); overflow: hidden; }
.ck-doodles { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--t) 70%, transparent); opacity: .7; }
.ck-doodles path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 3s ease-out .4s forwards; }
.ck-photo { position: relative; width: min(220px, 56vw); padding: 8px 8px 30px; background: #fff; rotate: -3deg; box-shadow: 0 10px 20px rgba(0, 0, 0, .35); }
.ck-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ck-ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #6e4520; display: flex; gap: 20px; padding-left: 20%; }
.ck-ledge i { width: 40px; height: 9px; margin-top: -6px; border-radius: 3px; background: #f5f5f0; }
.ck-ledge i + i { background: var(--a); width: 30px; }
.layout-chalk .names { color: var(--t); text-shadow: 0 0 1px currentColor, 1px 1px 0 color-mix(in srgb, var(--t) 30%, transparent); letter-spacing: .02em; }
.layout-chalk .names .amp, .layout-chalk .h-second { color: var(--a-ink); }
.layout-chalk .ev-date { background: transparent; border: 2px dashed var(--a); color: var(--a-ink); }
.layout-chalk .sec-title h2 { color: var(--t); }

/* --- STORY (Instagram-story) --- */
.layout-story { --card-radius: 22px; background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--a) 35%, transparent), transparent 50%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--p) 30%, transparent), transparent 50%), var(--bg); }
.layout-story .hero { padding: clamp(12px, 3vw, 40px); }
.st-card { position: relative; z-index: 2; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: calc(100svh - 24px); border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, var(--p), var(--a)); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55); color: #fff; text-align: left; }
.st-bg { position: absolute; inset: 0; }
.st-bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 16s ease-in-out infinite alternate; }
.st-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 45%, rgba(0, 0, 0, .7)); }
.st-bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; position: relative; }
.st-bars i.done { background: #fff; }
.st-bars i.now::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: storyBar 6s linear infinite; }
@keyframes storyBar { from { transform: scaleX(0); } }
.st-user { position: absolute; top: 26px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; z-index: 2; font-size: .85rem; }
.st-user b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.st-user small { opacity: .8; }
.st-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: #fff; color: color-mix(in srgb, var(--p) 55%, #1d1230); box-shadow: 0 0 0 2px var(--a), 0 0 0 4px #fff; flex: none; }
.st-content { position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 2; display: grid; gap: 10px; justify-items: start; }
.layout-story .names { color: #fff; text-align: left; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); font-size: clamp(2.2rem, 10vw, 3.4rem); margin: 0; }
.layout-story .names.long { font-size: clamp(1.8rem, 8vw, 2.7rem); }
.layout-story .names.xlong { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
.layout-story .names .amp { color: var(--a-ink); }
.st-sticker { display: inline-block; padding: 6px 12px; border-radius: 10px; background: #fff; color: color-mix(in srgb, var(--p) 55%, #1d1230); font-weight: 800; font-size: .82rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); max-width: 100%; overflow-wrap: anywhere; animation: pop .6s cubic-bezier(.2, .9, .3, 1.4) .6s both; }
.st-sticker.date { background: var(--a); color: #1d1230; }
.tilt-l { rotate: -4deg; } .tilt-r { rotate: 3deg; }
.st-poll { width: 100%; background: rgba(255, 255, 255, .95); color: #1d1230; border-radius: 16px; padding: 10px 12px; text-decoration: none; display: grid; gap: 8px; animation: pop .6s cubic-bezier(.2, .9, .3, 1.4) .9s both; }
.st-poll small { font-weight: 800; text-align: center; }
.st-poll span { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-poll b { text-align: center; padding: 8px; border-radius: 10px; background: #f1edf7; font-size: .85rem; }

/* Embedded preview (editor iframe / homepage phone): fewer distractions */
.is-embed .hero { min-height: 92vh; }
.is-embed.layout-modern .hero, .is-embed .md-grid { min-height: 92vh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .fx-layer { display: none; }
}
@media print {
  .intro, .fx-layer, .dock, .topbar, .watermark, .scroll-cue { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Readability & responsive fixes from visual QA ---- */
/* Second-name line: derive from the primary colour so it always contrasts with the background */
.h-second { color: color-mix(in srgb, var(--p-ink) 80%, var(--t)); }
/* Retro: lighter 3D shadow on long names / phones so letters stay crisp */
.layout-retro .names.long, .layout-retro .names.xlong { text-shadow: 3px 3px 0 var(--a); }
@media (max-width: 560px) { .layout-retro .names { text-shadow: 3px 3px 0 var(--a); } }
/* Watercolor: deeper name colour and a softer brush stroke */
.layout-watercolor .names, .layout-watercolor .h-second { color: color-mix(in srgb, var(--p) 50%, var(--t)); }
.layout-watercolor .wc-stroke { fill: color-mix(in srgb, var(--a) 30%, transparent); }
/* Lotus: smaller flower, lily pads kept clear of the text */
.lt-flower { width: min(170px, 42vw); margin-top: -34px; position: relative; z-index: 3; }
.lt-pad { opacity: .4; z-index: 0; }
.lt-pad.p1 { top: auto; bottom: 8%; left: 4%; } .lt-pad.p2 { top: auto; bottom: 4%; right: 6%; } .lt-pad.p3 { top: auto; bottom: 14%; left: 30%; }
.layout-lotus .names { color: color-mix(in srgb, var(--p) 85%, var(--t)); }
/* Tropical: smaller, softer palms on phones */
@media (max-width: 640px) { .tr-palm { width: clamp(100px, 30vw, 160px); opacity: .55; bottom: 2%; } }
/* Tropical: keep palms at the edges on wide screens so they never cover the text */
@media (min-width: 641px) { .tr-palm { width: clamp(150px, 20vw, 260px); opacity: .8; } }

/* =========================================================================
   INTERACTIVE SECTIONS (premium): scratch card, quiz, guest photo wall
   ========================================================================= */
.scratch { position: relative; width: min(340px, 100%); aspect-ratio: 1.6; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: var(--card-shadow), 0 0 0 1.5px var(--line); }
.scratch-under { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; background: var(--card-bg); }
.scratch-under small { letter-spacing: .25em; text-transform: uppercase; font-size: .7rem; color: var(--muted); }
.scratch-under b { font-family: var(--hf); font-size: clamp(3rem, 14vw, 4.4rem); line-height: 1; color: var(--p-ink); font-weight: 400; }
.scratch-under span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.scratch-under em { font-size: .85rem; color: var(--muted); }
.scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .6s; }
.scratch.revealed canvas { opacity: 0; pointer-events: none; }
.scratch.revealed .scratch-under b { animation: pop .6s cubic-bezier(.2, .9, .3, 1.4); }
.scratch-hint { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; transition: opacity .3s; animation: breathe 2s ease-in-out infinite; }

.quiz { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; text-align: center; }
.quiz-top { display: flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quiz-bar { flex: 1; height: 6px; border-radius: 9px; background: var(--field-bg); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; background: var(--p); border-radius: 9px; transition: width .4s; }
.quiz h3 { font-family: var(--hf); font-size: clamp(1.4rem, 5vw, 1.9rem); color: var(--p-ink); line-height: 1.25; overflow-wrap: anywhere; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { padding: .9em 1em; border-radius: 14px; border: 1.5px solid var(--line); background: var(--field-bg); color: var(--t); font-weight: 600; cursor: pointer; transition: transform .15s, background .2s, border-color .2s; overflow-wrap: anywhere; }
.quiz-opt:hover { transform: translateY(-2px); border-color: var(--p); }
.quiz-opt.right { background: #16a34a; border-color: #16a34a; color: #fff; animation: pop .4s; }
.quiz-opt.wrong { background: #dc2626; border-color: #dc2626; color: #fff; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz-result { display: grid; gap: 8px; justify-items: center; }
.quiz-score { font-family: var(--hf); font-size: clamp(3rem, 14vw, 4.5rem); color: var(--p-ink); line-height: 1; animation: pop .6s cubic-bezier(.2, .9, .3, 1.4); }

.pw-form { max-width: 640px; margin: 0 auto 22px; }
.pw-pick input[type=file] { padding: .6em; font-size: .85rem; }
.pw-grid { columns: 3 160px; column-gap: 10px; }
.pw-grid figure { break-inside: avoid; margin: 0 0 10px; border-radius: 14px; overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); }
.pw-grid figure.new { animation: pop .6s cubic-bezier(.2, .9, .3, 1.3); }
.pw-grid button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.pw-grid img { width: 100%; height: auto; display: block; }
.pw-grid figcaption { font-size: .75rem; padding: 6px 10px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 420px) { .pw-grid { columns: 2; } }

/* =========================================================================
   GEN-Z LAYOUTS: music player, streaming premiere, chat, pastel mandap, Bollywood poster, Y2K
   ========================================================================= */

/* --- MUSIC PLAYER --- */
.layout-spotify { --card-radius: 14px; --card-bg: color-mix(in srgb, var(--bg) 82%, #fff 7%); --card-border: 0; --card-shadow: none; --btn-text: #0b0b0b; background: var(--bg); }
.layout-spotify .hero { padding: clamp(16px, 4vw, 40px); }
.sp-bg { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 75%, var(--bg)) 0%, var(--bg) 75%); z-index: 0; }
.sp-player { position: relative; z-index: 2; width: min(420px, 100%); color: var(--t); display: grid; gap: 14px; text-align: left; }
.sp-top { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; text-align: center; font-size: 1.2rem; }
.sp-top small { font-size: .62rem; letter-spacing: .14em; line-height: 1.4; opacity: .85; }
.sp-top b { letter-spacing: 0; font-size: .82rem; text-transform: none; }
.sp-art { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); animation: artPulse 6s ease-in-out infinite; }
@keyframes artPulse { 50% { transform: scale(1.015); } }
.sp-art img { width: 100%; height: 100%; object-fit: cover; }
.sp-art-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--p), var(--a)); }
.sp-art-ph span { font-family: var(--hf); font-size: 4rem; color: #fff; }
.sp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.layout-spotify .names { font-family: var(--bf); font-weight: 800; font-size: clamp(1.5rem, 6.5vw, 2rem); color: var(--t); text-align: left; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.layout-spotify .names.long { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
.layout-spotify .names.xlong { font-size: clamp(1.1rem, 4.6vw, 1.45rem); }
.sp-artist { margin: 2px 0 0; opacity: .75; font-size: .95rem; }
.sp-heart { color: var(--p-ink); font-size: 1.6rem; animation: heartbeat 2s ease-in-out infinite; }
.sp-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--t) 25%, transparent); overflow: hidden; }
.sp-track i { display: block; height: 100%; width: var(--pct, 35%); background: var(--t); border-radius: 4px; animation: grow 2s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.sp-times { display: flex; justify-content: space-between; font-size: .72rem; opacity: .75; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sp-controls { display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; padding: 0 6px; }
.sp-play { width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--p); color: #0b0b0b; font-size: 1.4rem; display: grid; place-items: center; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -8px var(--p); transition: transform .2s; }
.sp-play:hover { transform: scale(1.06); }
.sp-play.playing { animation: none !important; }
.sp-date { margin: 0; text-align: center; font-size: .85rem; opacity: .8; }
.sp-lyrics { background: color-mix(in srgb, var(--a) 55%, #000); border-radius: 14px; padding: 16px; color: #fff; }
.sp-lyrics small { font-weight: 800; font-size: .8rem; }
.sp-lyrics p { margin: 6px 0 0; font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.2rem); line-height: 1.35; opacity: .45; animation: lyric 8s linear infinite; animation-delay: calc(var(--i) * 2s); overflow-wrap: anywhere; }
@keyframes lyric { 0%, 24% { opacity: 1; } 26%, 100% { opacity: .45; } }
.layout-spotify .event { text-align: left; align-items: flex-start; }
.layout-spotify .ev-when, .layout-spotify .ev-where { justify-content: flex-start; }
.layout-spotify .ev-date { border-radius: 8px; background: linear-gradient(135deg, var(--p), var(--a)); color: #0b0b0b; }
.layout-spotify .ibtn { --btn-text: #0b0b0b; font-weight: 800; }

/* --- STREAMING PREMIERE --- */
.layout-netflix { --card-radius: 6px; --card-bg: #181818; --card-border: 0; --card-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); --btn-text: #fff; background: var(--bg); }
.layout-netflix .hero { padding: 0; place-items: stretch; text-align: left; }
.nf-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
.nf-bg { position: absolute; inset: 0; }
.nf-bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
.nf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 75%), linear-gradient(90deg, color-mix(in srgb, var(--bg) 85%, transparent), transparent 70%); }
.nf-content { position: relative; z-index: 2; width: min(640px, 100%); padding: clamp(80px, 12vh, 140px) clamp(18px, 6vw, 70px) clamp(70px, 10vh, 110px); color: #fff; display: grid; gap: 12px; }
.nf-original { margin: 0; font-size: .78rem; letter-spacing: .35em; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #e5e5e5; }
.nf-original b { font-family: var(--hf); font-size: 1.8rem; color: var(--p-ink); letter-spacing: 0; line-height: 1; }
.layout-netflix .names { font-family: var(--hf); color: #fff; text-align: left; text-transform: uppercase; font-size: clamp(2.6rem, 11vw, 5.4rem); line-height: .92; letter-spacing: -.01em; margin: 0; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.layout-netflix .names.long { font-size: clamp(2rem, 8vw, 4rem); }
.layout-netflix .names.xlong { font-size: clamp(1.6rem, 6vw, 3rem); }
.nf-badges { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.nf-top10 { display: grid; place-items: center; width: 30px; height: 34px; background: var(--p); color: #fff; font-size: .55rem; font-weight: 900; line-height: 1; border-radius: 2px; text-align: center; }
.nf-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .9rem; color: #ddd; }
.nf-match { color: #46d369; font-weight: 800; }
.nf-rating, .nf-hd { border: 1px solid #999; padding: 0 6px; font-size: .75rem; border-radius: 3px; }
.nf-premiere { margin: 0; font-weight: 800; color: var(--p-ink); letter-spacing: .04em; }
.nf-desc { margin: 0; color: #e5e5e5; max-width: 52ch; font-size: .95rem; }
.nf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nf-play, .nf-list { padding: .7em 1.6em; border-radius: 6px; font-weight: 800; text-decoration: none; }
.nf-play { background: #fff; color: #111; }
.nf-list { background: rgba(109, 109, 110, .7); color: #fff; }
.nf-genres { margin: 0; font-size: .8rem; color: #aaa; }
.layout-netflix .sec-title { text-align: left; }
.layout-netflix .sec-title h2 { color: #fff; font-family: var(--bf); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2rem); }
.layout-netflix .event { text-align: left; align-items: flex-start; }
.layout-netflix .ev-when, .layout-netflix .ev-where { justify-content: flex-start; }
.layout-netflix .ev-date { border-radius: 4px; background: var(--p); color: #fff; }
.layout-netflix .ibtn { border-radius: 6px; }

/* --- CHAT --- */
.layout-chat { --card-radius: 18px; background: var(--bg); }
.layout-chat .hero { padding: clamp(12px, 3vw, 40px); }
.ch-phone { position: relative; z-index: 2; width: min(420px, 100%); height: min(780px, calc(100svh - 24px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45); background-color: color-mix(in srgb, var(--a) 22%, #efe7dd); background-image: radial-gradient(color-mix(in srgb, var(--p) 18%, transparent) 1.2px, transparent 1.3px); background-size: 18px 18px; text-align: left; }
.ch-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--p); color: #fff; }
.ch-back { font-size: 1.6rem; line-height: 1; }
.ch-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--p-ink); display: grid; place-items: center; font-weight: 800; font-size: .78rem; flex: none; }
.ch-who { display: grid; min-width: 0; flex: 1; }
.ch-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.ch-who small { opacity: .85; font-size: .75rem; }
.ch-icons { font-size: .9rem; flex: none; }
.ch-body { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 6px; }
.ch-day { align-self: center; margin: 4px 0 8px; font-size: .7rem; background: rgba(255, 255, 255, .85); color: #555; padding: 3px 10px; border-radius: 8px; }
.ch-msg { position: relative; align-self: flex-start; max-width: 82%; background: #fff; color: #111; padding: 8px 12px 18px; border-radius: 4px 14px 14px 14px; font-size: .95rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); overflow-wrap: anywhere; opacity: 0; transform: translateY(10px) scale(.96); animation: msgIn .4s cubic-bezier(.2, .9, .3, 1.2) forwards; animation-delay: calc(.4s + var(--i) * .85s); }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.ch-msg:nth-of-type(odd) { align-self: flex-end; background: color-mix(in srgb, var(--a) 45%, #fff); border-radius: 14px 4px 14px 14px; }
.ch-time { position: absolute; right: 8px; bottom: 3px; font-size: .62rem; color: #667; font-style: normal; }
.ch-time em { font-style: normal; color: #34b7f1; }
.ch-bigtext { display: block; font-family: var(--hf); font-size: clamp(1.4rem, 6vw, 1.9rem); color: var(--p-ink); line-height: 1.15; }
.ch-bigtext.long { font-size: clamp(1.2rem, 5vw, 1.6rem); }
.ch-bigtext.xlong { font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
.ch-photo { padding: 4px 4px 18px; }
.ch-photo img { width: min(240px, 60vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; }
.ch-card { display: grid; gap: 2px; }
.ch-card small { color: #667; font-size: .72rem; }
.ch-typing { align-self: flex-start; display: flex; gap: 4px; background: #fff; padding: 10px 14px; border-radius: 14px; }
.ch-typing i { width: 7px; height: 7px; border-radius: 50%; background: #999; animation: typing 1.2s infinite; }
.ch-typing i:nth-child(2) { animation-delay: .2s; } .ch-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }
.ch-replies { display: flex; gap: 6px; padding: 10px; overflow-x: auto; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.ch-replies a { flex: none; padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--p-ink); border: 1.5px solid var(--p); font-weight: 700; font-size: .85rem; text-decoration: none; }
.layout-chat .ev-date { background: var(--p); border-radius: 14px; }

/* --- PASTEL MANDAP (modern-traditional) --- */
.layout-mandap { --card-radius: 26px; --card-border: 1px solid color-mix(in srgb, var(--p) 30%, transparent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--a) 28%, var(--bg)), var(--bg) 65%); }
.mp-stage { position: relative; width: min(360px, 88vw); aspect-ratio: 320 / 300; color: var(--p-ink); }
.mp-mandap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-drape { transform-box: fill-box; transform-origin: 50% 0; animation: drape 6s ease-in-out infinite; }
.mp-drape.r { animation-delay: -3s; }
@keyframes drape { 50% { transform: skewX(3deg); } }
.mp-garland { transform-box: fill-box; transform-origin: 50% 0; animation: garland 4s ease-in-out var(--d) infinite; }
@keyframes garland { 50% { transform: rotate(4deg); } }
.mp-center { position: absolute; left: 21%; right: 21%; top: 30%; bottom: 3%; display: grid; place-items: end center; }
.mp-photo { width: 100%; aspect-ratio: 1; border-radius: 50% 50% 14px 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .45); }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-couple { width: 100%; height: auto; color: var(--p-ink); animation: floaty 7s ease-in-out infinite; }
.mp-stage { margin-bottom: clamp(18px, 5vw, 30px); }
.mp-diyas { position: absolute; left: 0; right: 0; bottom: -4%; display: flex; justify-content: space-between; padding: 0 2%; pointer-events: none; }
.mp-diyas span { width: 16%; color: var(--p-ink); }
.mp-diyas svg { width: 100%; height: auto; display: block; overflow: visible; }
.layout-mandap .names { color: color-mix(in srgb, var(--p) 85%, var(--t)); }
.layout-mandap .ev-date { background: var(--p); border-radius: 50% 50% 12px 12px; }

/* --- 90s BOLLYWOOD POSTER --- */
.layout-bollywood { --card-radius: 6px; --card-border: 3px solid var(--t); --card-shadow: 6px 6px 0 color-mix(in srgb, var(--p) 70%, #000); background: var(--bg); }
.layout-bollywood .hero { padding: clamp(10px, 3vw, 30px); }
.bw-poster { position: relative; width: min(560px, 100%); min-height: calc(100svh - 2 * clamp(10px, 3vw, 30px)); overflow: hidden; border: 8px solid var(--t); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); background: linear-gradient(180deg, color-mix(in srgb, var(--a) 90%, #fff) 0%, var(--p) 55%, color-mix(in srgb, var(--p) 60%, #000) 100%); }
.bw-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, .16) 0 8deg, transparent 8deg 20deg); animation: spinSlow 80s linear infinite; }
.bw-grain { position: absolute; inset: 0; opacity: .25; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bw-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: clamp(24px, 6vw, 40px) clamp(14px, 5vw, 30px) clamp(20px, 5vw, 30px); text-align: center; }
.bw-presents { margin: 0; letter-spacing: .3em; font-size: .72rem; font-weight: 800; color: var(--t); }
.bw-photo { position: relative; width: min(250px, 66vw); aspect-ratio: 4 / 5; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; }
.bw-photo img, .bw-photo > span:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: grid; place-items: center; border: 5px solid #fff8dc; box-shadow: 0 0 0 4px var(--t), 0 20px 40px -10px rgba(0, 0, 0, .6); filter: saturate(1.25) contrast(1.05); background: var(--a); font-family: var(--hf); font-size: 3rem; color: var(--t); }
.bw-sticker { position: absolute; right: -14%; top: 6%; width: 86px; height: 86px; display: grid; place-content: center; text-align: center; font: 900 .78rem/1 var(--bf); text-transform: uppercase; color: var(--t); background: #ffe94d; clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 56%, 96% 76%, 74% 78%, 70% 100%, 50% 86%, 30% 100%, 26% 78%, 4% 76%, 16% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%); animation: stickerSpin 3s ease-in-out infinite; }
@keyframes stickerSpin { 50% { transform: rotate(12deg) scale(1.08); } }
.layout-bollywood .bw-title { font-family: var(--hf); font-style: italic; font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: .95; color: #fff8dc; margin: 6px 0 0; -webkit-text-stroke: 2px var(--t); paint-order: stroke fill; text-shadow: 0 1px 0 var(--a), 0 2px 0 var(--a), 0 3px 0 var(--a), 0 4px 0 color-mix(in srgb, var(--a) 70%, #000), 0 5px 0 color-mix(in srgb, var(--a) 70%, #000), 0 8px 18px rgba(0, 0, 0, .6); }
.layout-bollywood .bw-title.long { font-size: clamp(2rem, 8.5vw, 3.6rem); }
.layout-bollywood .bw-title.xlong { font-size: clamp(1.6rem, 6.5vw, 2.8rem); }
.layout-bollywood .bw-title .amp { display: block; font-size: .42em; color: #ffe94d; -webkit-text-stroke: 1px var(--t); }
.bw-tagline { margin: 0; color: #fff8dc; font-style: italic; font-weight: 600; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bw-release { margin: 0; background: var(--t); color: #ffe94d; padding: 6px 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; transform: rotate(-2deg); }
.bw-credits { margin: 6px 0 0; color: #fff8dc; font-size: .62rem; letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; opacity: .9; max-width: 44ch; overflow-wrap: anywhere; }
.layout-bollywood .ev-date { background: #ffe94d; color: var(--t); border: 3px solid var(--t); }

/* --- Y2K CHROME --- */
.layout-y2k { --card-radius: 16px; --card-bg: rgba(255, 255, 255, .55); --card-border: 2px solid #fff; --card-shadow: 0 10px 30px -14px rgba(80, 40, 160, .45); background: var(--bg); }
.layout-y2k .card, .layout-y2k .cd > div { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.yk-bg { position: fixed; inset: 0; z-index: -1; background: linear-gradient(125deg, color-mix(in srgb, var(--p) 55%, #fff), color-mix(in srgb, var(--a) 55%, #fff), #e0f2ff, color-mix(in srgb, var(--p) 40%, #fff)); background-size: 300% 300%; animation: iridescent 14s ease infinite; }
@keyframes iridescent { 50% { background-position: 100% 50%; } }
.layout-y2k .hero { isolation: auto; }
.yk-sparkles i { position: absolute; left: var(--x); top: var(--y); font-style: normal; font-size: clamp(14px, 3vw, 26px); color: #fff; text-shadow: 0 0 10px var(--p); animation: fxTwinkle 2.6s ease-in-out var(--d) infinite; z-index: 1; }
.yk-window { width: min(480px, 100%); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .7); border: 2px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 40%, transparent), 0 30px 60px -20px rgba(80, 40, 160, .5); backdrop-filter: blur(10px); }
.yk-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(90deg, var(--p), var(--a)); color: #fff; font: 700 .8rem/1 system-ui, sans-serif; }
.yk-btns { display: flex; gap: 4px; }
.yk-btns i { width: 18px; height: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: #333; border-radius: 3px; font-style: normal; font-size: .7rem; }
.yk-body { padding: clamp(18px, 5vw, 30px); display: grid; justify-items: center; gap: 8px; color: var(--t); }
.yk-photo { width: min(200px, 52vw); aspect-ratio: 1; border-radius: 22px; padding: 4px; background: linear-gradient(135deg, #fff, var(--p), var(--a), #fff); }
.yk-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.layout-y2k .yk-chrome { font-family: var(--hf); font-size: clamp(2.2rem, 10vw, 4.2rem); line-height: 1.05; background: linear-gradient(180deg, #ffffff 0%, #c9c9de 28%, #3d3d5c 49%, #f4f4ff 53%, #8d8db0 78%, #e8e8f6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--p) 75%, #000); filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--p) 80%, #000)) drop-shadow(0 0 14px color-mix(in srgb, var(--p) 55%, transparent)); margin: 0; }
.layout-y2k .yk-chrome.long { font-size: clamp(1.8rem, 8vw, 3.2rem); }
.layout-y2k .yk-chrome.xlong { font-size: clamp(1.5rem, 6vw, 2.5rem); }
.yk-num { font-family: var(--hf); font-size: clamp(4rem, 20vw, 7rem); line-height: 1; background: linear-gradient(180deg, #fff, var(--a), var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--p) 60%, #000)); animation: bounce 2.4s ease-in-out infinite; }
.yk-date { margin: 4px 0 0; font-weight: 800; letter-spacing: .08em; color: var(--p-ink); }
.yk-load { width: 80%; height: 14px; border: 2px solid var(--p); border-radius: 4px; padding: 2px; margin-top: 6px; }
.yk-load i { display: block; height: 100%; width: 70%; background: repeating-linear-gradient(90deg, var(--p) 0 8px, transparent 8px 11px); animation: load 2.4s steps(8) infinite; }
@keyframes load { from { width: 6%; } to { width: 100%; } }
.yk-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; background: var(--t); color: #fff; padding: 6px 0; font: 800 .8rem/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.yk-ticker span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.layout-y2k .ev-date { background: linear-gradient(135deg, var(--p), var(--a)); border: 2px solid #fff; }
.layout-y2k .sec-title h2 { color: var(--p-ink); }

/* =========================================================================
   SECRET CAPSULE (premium) — daily-clue countdown + grand reveal overlay
   ========================================================================= */
.sec-capsule { overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--p) 16%, transparent), transparent 70%); }
.sec-capsule.cap-full { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--p) 26%, var(--bg)), var(--bg) 72%); }
.cap-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cap-sky i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); opacity: 0; animation: capTwinkle var(--d) ease-in-out infinite; }
@keyframes capTwinkle { 50% { opacity: .75; transform: scale(1.4); } }

.cap-orb-wrap { position: relative; width: clamp(210px, 58vw, 290px); aspect-ratio: 1; margin: 0 auto 18px; display: grid; place-items: center; }
.cap-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 80s linear infinite; overflow: visible; }
.cap-ring path { fill: none; stroke: color-mix(in srgb, var(--p) 22%, transparent); stroke-width: 5; stroke-linecap: round; }
.cap-ring path.on { stroke: var(--a); filter: drop-shadow(0 0 4px var(--a)); }
.cap-ring path.now { stroke: var(--p); animation: capSeg 1.6s ease-in-out infinite; }
@keyframes capSeg { 50% { stroke-width: 8; } }
.cap-orb { position: relative; width: 66%; aspect-ratio: 1; border-radius: 50%; animation: capFloat 5s ease-in-out infinite; filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--p) 45%, transparent)); }
.cap-orb::before { content: ''; position: absolute; inset: -20%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 55%, transparent), transparent 66%); animation: capPulse 3s ease-in-out infinite; }
@keyframes capFloat { 50% { transform: translateY(-10px); } }
@keyframes capPulse { 50% { transform: scale(1.12); opacity: .6; } }
.cap-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .78), transparent 22%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--a) 78%, #fff), var(--p) 70%, color-mix(in srgb, var(--p) 65%, #000)); background-size: 100% 200%; }
.cap-half.top { top: 0; border-radius: 999px 999px 0 0; background-position: top; }
.cap-half.bot { bottom: 0; border-radius: 0 0 999px 999px; background-position: bottom; }
.cap-half.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), var(--a), rgba(255, 255, 255, .95), transparent); }
.cap-core { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; color: #fff; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.cap-core b { font-family: var(--hf); font-weight: 400; font-size: clamp(2.6rem, 11vw, 3.7rem); }
.cap-core small { margin-top: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.cap-lock { position: absolute; left: 50%; bottom: -7%; translate: -50% 0; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--p-ink); border: 2px solid var(--a); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }

.cap-opens { color: var(--muted); margin: 8px 0 14px; line-height: 1.5; }
.cap-opens b { color: var(--t); font-weight: 600; }
.cap-cd { margin-bottom: 8px; }
.cap-today { position: relative; max-width: 580px; margin: 26px auto 0; text-align: center; border: 2px solid transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(120deg, var(--p), var(--a), var(--p)) border-box; }
.cap-badge { display: inline-block; margin-bottom: 12px; padding: 5px 14px; border-radius: 99px; background: var(--p); color: var(--btn-text); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cap-clue { margin: 0 0 12px; font-size: clamp(1.1rem, 3.4vw, 1.35rem); font-style: italic; line-height: 1.55; color: var(--t); min-height: 1.55em; }
.cap-clue.typing::after { content: '▍'; margin-left: 2px; color: var(--p-ink); animation: crBlink .8s steps(2) infinite; font-style: normal; }
.cap-next { color: var(--muted); }
.cap-next b { color: var(--p-ink); font-variant-numeric: tabular-nums; }

.cap-trail { list-style: none; margin: 26px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cap-tile { position: relative; min-height: 112px; padding: 12px 9px; border-radius: 16px; display: grid; align-content: start; justify-items: center; gap: 6px; text-align: center; font-size: .8rem; line-height: 1.4; color: var(--muted); background: var(--field-bg); border: 1.5px dashed var(--line); min-width: 0; }
.cap-tile .ct-day { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--p-ink); }
.cap-tile p { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
.cap-tile small { font-size: .7rem; }
.cap-tile.open { color: var(--t); background: var(--card-bg); border-style: solid; box-shadow: var(--card-shadow); }
.cap-tile.now { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 22%, transparent), var(--card-shadow); }
.ct-lock { color: var(--p-ink); opacity: .5; margin-top: 8px; }
@media (max-width: 640px) { .cap-trail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cap-tile { min-height: 96px; } }

.cap-guess { max-width: 620px; margin: 0 auto 22px; text-align: left; }
.cap-guess h3 { margin: 0; text-align: center; font-family: var(--hf); color: var(--p-ink); font-size: clamp(1.4rem, 4.4vw, 1.9rem); line-height: 1.2; }
.small-note { margin: 0; text-align: center; font-size: .82rem; color: var(--muted); }
.cap-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

.cap-is-open .message { margin-bottom: 8px; }
.cap-media { max-width: 720px; margin: 24px auto; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: var(--card-shadow); }
.cap-media video, .cap-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.cap-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr)); gap: 12px; margin: 24px 0; }
.cap-photos figure { margin: 0; }
.cap-photos button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cap-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: var(--card-shadow); }
.cap-guesses { margin-top: 34px; }
.cap-guesses h3 { font-family: var(--hf); color: var(--p-ink); font-size: clamp(1.5rem, 4.4vw, 2rem); margin-bottom: 14px; }
.cap-guesses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cap-guesses li { max-width: 100%; padding: 10px 16px; border-radius: 16px; background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); text-align: left; }
.cap-guesses li p { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.cap-guesses cite { font-size: .78rem; color: var(--muted); font-style: normal; }
.cap-all { margin-top: 26px; }
.cap-all summary { cursor: pointer; color: var(--p-ink); font-weight: 600; }

/* ---- Reveal overlay ---- */
.cap-reveal { position: fixed; inset: 0; z-index: 148; display: grid; place-items: center; overflow: hidden; color: #fff; font-family: var(--bf); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--p) 55%, #1a0b2e) 0%, #0b0618 58%, #030208 100%); animation: crIn .6s ease; }
.cap-reveal[hidden] { display: none; }
@keyframes crIn { from { opacity: 0; } }
.cap-reveal::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.cap-reveal.flash::after { animation: crFlash 1s ease-out; }
@keyframes crFlash { 12% { opacity: .92; } 100% { opacity: 0; } }
.cr-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.cr-rays { position: absolute; left: 50%; top: 50%; z-index: 0; width: 220vmax; height: 220vmax; translate: -50% -50%; opacity: 0; transition: opacity 1.2s; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--a) 24%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000, transparent 42%); mask-image: radial-gradient(circle, #000, transparent 42%); animation: spin 50s linear infinite; }
.cap-reveal.opened .cr-rays { opacity: 1; }
.cr-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.05rem; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cr-stage { position: relative; z-index: 2; width: min(640px, 100%); padding: 24px 18px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.cr-sealed { transition: opacity .6s, transform .6s; }
.cap-reveal.opened .cr-sealed { opacity: 0; transform: scale(1.08); pointer-events: none; }
.cr-kick { margin: 0; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.cr-tease { margin: 0; font-family: var(--hf); font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.15; color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--a) 70%, transparent); overflow-wrap: anywhere; }
.cr-orb { --hold: 0; position: relative; width: clamp(180px, 52vw, 240px); aspect-ratio: 1; margin: 16px 0 4px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; animation: capFloat 4s ease-in-out infinite; }
.cr-orb .cap-half { left: 13%; right: 13%; height: 37%; z-index: 1; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity 1s .2s; box-shadow: 0 0 40px color-mix(in srgb, var(--a) 40%, transparent); }
.cr-orb .cap-half.top { top: 13%; }
.cr-orb .cap-half.bot { bottom: 13%; }
.cr-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cr-ring circle { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 3; }
.cr-ring .cr-ring-fill { stroke: var(--a); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: calc(289.03 * (1 - var(--hold))); filter: drop-shadow(0 0 6px var(--a)); }
.cr-glow { position: absolute; left: 50%; top: 50%; z-index: 0; width: 26%; height: 26%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--a) 70%, #fff) 40%, transparent 70%); opacity: calc(.25 + var(--hold) * .75); scale: calc(1 + var(--hold) * 2.4); transition: scale 1.2s ease-out, opacity 1.4s ease .3s; }
.cr-lock { position: absolute; left: 50%; top: 50%; z-index: 2; width: 48px; height: 48px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--p-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .4s, opacity .4s; }
.cr-orb.holding { animation: crShake .14s linear infinite; }
.cr-orb.nudge { animation: crNudge .45s ease; }
@keyframes crShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(calc(var(--hold) * -4px), calc(var(--hold) * 2px)) rotate(calc(var(--hold) * -3deg)); } 75% { transform: translate(calc(var(--hold) * 4px), calc(var(--hold) * -2px)) rotate(calc(var(--hold) * 3deg)); } }
@keyframes crNudge { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.cap-reveal.opened .cr-orb { animation: none; }
.cap-reveal.opened .cr-orb .cap-half.top { transform: translateY(-140%) rotate(-28deg); opacity: 0; }
.cap-reveal.opened .cr-orb .cap-half.bot { transform: translateY(140%) rotate(18deg); opacity: 0; }
.cap-reveal.opened .cr-lock { transform: scale(0) rotate(90deg); opacity: 0; }
.cap-reveal.opened .cr-glow { scale: 16; opacity: 0; }
.cr-hint { margin: 0; font-size: .92rem; opacity: .9; animation: crBlink 2.2s ease-in-out infinite; }
@keyframes crBlink { 50% { opacity: .35; } }
.cr-skip { padding: 4px 8px; border: 0; background: none; color: rgba(255, 255, 255, .62); font-size: .8rem; text-decoration: underline; cursor: pointer; }

.cr-content { position: absolute; inset: 0; z-index: 2; width: 100%; max-width: none; padding: 0; display: block; }
.cr-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; align-content: center; justify-items: center; gap: 18px; padding: max(64px, env(safe-area-inset-top)) 18px max(40px, env(safe-area-inset-bottom)); text-align: center; }
.cr-scroll > .cr-kick { opacity: 0; animation: crUp .6s ease .15s forwards; }
.cr-title { width: min(760px, 100%); margin: 0; font-family: var(--hf); font-weight: 400; font-size: clamp(2.4rem, 10vw, 4.6rem); line-height: 1.1; color: #fff; text-shadow: 0 0 26px color-mix(in srgb, var(--a) 85%, transparent), 0 4px 0 color-mix(in srgb, var(--p) 60%, #000); overflow-wrap: anywhere; }
.cr-title .ch { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.6em) scale(.4) rotate(-12deg); filter: blur(8px); animation: crLetter .75s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(.35s + var(--i) * 45ms); }
@keyframes crLetter { to { opacity: 1; transform: none; filter: none; } }
@keyframes crUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cr-msg { width: min(560px, 100%); margin: 0; font-size: clamp(1rem, 2.8vw, 1.2rem); line-height: 1.75; opacity: 0; animation: crUp .9s ease forwards; animation-delay: var(--after, 1.2s); overflow-wrap: anywhere; }
.cr-media { width: min(640px, 100%); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .15); opacity: 0; animation: crUp .9s ease forwards; animation-delay: calc(var(--after, 1.2s) + .3s); }
.cr-media video, .cr-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.cr-photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 8px 0; width: min(700px, 100%); }
.cr-pol { width: clamp(110px, 28vw, 160px); padding: 8px 8px 26px; border: 0; border-radius: 4px; background: #fff; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); cursor: zoom-in; transform: rotate(var(--r)); opacity: 0; animation: crPol .85s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(var(--after, 1.2s) + .5s + var(--i) * .15s); }
.cr-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@keyframes crPol { from { opacity: 0; transform: translateY(90px) rotate(calc(var(--r) * -4)) scale(.6); } to { opacity: 1; transform: rotate(var(--r)); } }
.cr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; opacity: 0; animation: crUp .8s ease forwards; animation-delay: calc(var(--after, 1.2s) + .8s); }
.cr-btn { padding: .85em 1.6em; border: 0; border-radius: 99px; background: #fff; color: color-mix(in srgb, var(--p) 55%, #000); font-weight: 700; cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 45%, transparent), 0 14px 30px -10px rgba(0, 0, 0, .6); transition: transform .2s; }
.cr-btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.cr-btn:hover { transform: translateY(-2px); }
@media print { .cap-reveal { display: none !important; } }