/*
 * Candlelight Story — styles.
 *
 * One interaction (light the candle); then the luxury table illuminates
 * itself and the invitation becomes a normal, scrollable page of fine
 * stationery on the table. The objects are visual only (pointer-events:none);
 * the only interactive elements are the scratch wax seal and the RSVP form.
 * The three admin theme colors (--primary warm mood, --secondary deep shadow,
 * --accent gold) tint the scene; ivory paper + dark ink keep text legible.
 */

:root{
	--cl-bg:var(--secondary);
	--cl-bg-2:color-mix(in srgb, var(--secondary) 84%, #ffffff 16%);
	--cl-warm:color-mix(in srgb, var(--accent) 55%, #ff9d3c 45%);
	--cl-flame:#ffce6a;

	--cl-paper:#f5ecd8;
	--cl-paper-2:#ece0c6;
	--cl-ink-dark:#3a2a1c;
	--cl-ink-soft:#6d5940;

	--cl-gold:var(--accent);
	--cl-gold-soft:color-mix(in srgb, var(--accent) 55%, #fff2cf 45%);
	--cl-gold-deep:color-mix(in srgb, var(--accent) 64%, #5a3f10 36%);
	--cl-ivory:#f4ecdd;
	--cl-ivory-dim:rgba(244,236,221,0.72);

	--cl-ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }

.cl-body{
	background:var(--cl-bg-2);
	color:var(--cl-ink-dark);
	font-family:var(--cl-font-sans);
	font-size:16px; line-height:1.7;
	-webkit-tap-highlight-color:transparent;
}
.cl-body.cl-locked{ overflow:hidden; height:100vh; }

/* ===================== Ambient candlelight ===================== */
.cl-ambient{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(120% 90% at 50% 28%, color-mix(in srgb, var(--primary) 42%, #ffffff 58%) 0%, var(--cl-bg-2) 64%); }
.cl-ambient-photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.10; filter:blur(3px) brightness(1.05) saturate(0.9); }
.cl-ambient-glow{ position:absolute; left:50%; top:34%; width:80vmax; height:80vmax; transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb, var(--cl-warm) 22%, transparent) 0%, transparent 58%); opacity:0; transition:opacity 2.4s ease; }
.cl-body.is-lighting .cl-ambient-glow{ opacity:0.6; }
.cl-bokeh{ position:absolute; inset:0; }
.cl-bokeh span{ position:absolute; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--cl-warm) 60%, #fff 40%), transparent 70%); opacity:0; filter:blur(3px); animation:clBokeh var(--tw,5s) ease-in-out infinite; }
.cl-body.is-lighting .cl-bokeh span{ opacity:0.24; }
@keyframes clBokeh{ 0%,100%{ transform:translateY(0); opacity:0.14; } 50%{ transform:translateY(-16px); opacity:0.4; } }
.cl-vignette{ position:absolute; inset:0; background:radial-gradient(circle at 50% 48%, transparent 62%, color-mix(in srgb, var(--primary) 44%, #d8c7a8 56%) 100%); opacity:0.4; }

/* ===================== Candle component ===================== */
.cl-candle{ position:relative; display:inline-block; width:26px; }
.cl-candle-body{ position:relative; display:block; width:20px; height:78px; margin:0 auto; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg, #d7c6a3 0%, #fffdf6 44%, #efe3c8 64%, #cbb891 100%); box-shadow:inset 0 -6px 10px rgba(140,110,60,0.22), inset 0 2px 3px rgba(255,255,255,0.8), 0 6px 14px rgba(150,120,80,0.28); }
.cl-candle-drip{ position:absolute; left:4px; top:10px; width:5px; height:22px; border-radius:0 0 4px 4px; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(220,200,160,0.2)); }
/* The wick — a visible string on top, so the candle clearly reads as
   something to be lit. The flame sits on this wick once lit. */
.cl-wick{ position:absolute; left:50%; top:-8px; transform:translateX(-50%); width:2px; height:10px; border-radius:1px 1px 0 0; background:linear-gradient(180deg, #241a12 0%, #4a3626 55%, #6b5334 100%); }
.cl-candle.is-lit .cl-wick{ background:linear-gradient(180deg, #140d09 0%, #3a2a1c 100%); box-shadow:0 -1px 4px color-mix(in srgb, var(--cl-warm) 70%, transparent); }
.cl-candle-holder{ position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:30px; height:14px; border-radius:0 0 50% 50%; background:linear-gradient(180deg, var(--cl-gold-soft), var(--cl-gold-deep)); box-shadow:0 3px 6px rgba(0,0,0,0.4); }
.cl-candle-tall .cl-candle-body{ height:120px; }
.cl-flame{ position:absolute; left:50%; top:-32px; transform:translateX(-50%); width:14px; height:28px; border-radius:50% 50% 50% 50% / 62% 62% 40% 40%; background:radial-gradient(ellipse at 50% 74%, #fff6cf 0 18%, var(--cl-flame) 44%, #ff9d3c 72%, transparent 86%); transform-origin:50% 100%; opacity:0; transition:opacity 0.5s ease; filter:blur(0.3px); pointer-events:none; }
.cl-flame-core{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:5px; height:12px; border-radius:50%; background:radial-gradient(ellipse at 50% 80%, #cfe4ff 0 30%, #fff 60%, transparent); opacity:0.85; }
.cl-candle-tall .cl-flame{ top:-32px; }
.cl-candle-glow{ position:absolute; left:50%; top:-38px; transform:translateX(-50%); width:130px; height:150px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--cl-warm) 40%, transparent) 0%, transparent 62%); opacity:0; transition:opacity 0.9s ease; pointer-events:none; }
.cl-candle.is-lit .cl-flame{ opacity:1; animation:clFlicker 0.26s ease-in-out infinite alternate; }
.cl-candle.is-lit .cl-candle-glow{ opacity:0.5; animation:clGlow 3.2s ease-in-out infinite; }
@keyframes clFlicker{ from{ transform:translateX(-50%) scaleY(0.98) rotate(-1.5deg); } to{ transform:translateX(-50%) scaleY(1.08) rotate(1.5deg); } }
@keyframes clGlow{ 0%,100%{ opacity:0.7; } 50%{ opacity:0.95; } }

/* ===================== The gate (one interaction) ===================== */
.cl-gate{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 50% 42%, #ffffff 0%, color-mix(in srgb, var(--secondary) 66%, #ffffff 34%) 62%); transition:opacity 1.3s ease; }
.cl-gate.is-hidden{ opacity:0; pointer-events:none; }
.cl-gate-inner{ text-align:center; }
.cl-gate-candle{ appearance:none; border:0; background:transparent; cursor:pointer; padding:20px 40px; }
.cl-gate-candle .cl-candle{ transform:scale(1.5); }
.cl-gate-text{ margin-top:34px; }
.cl-gate-names{ font-family:var(--cl-font-display); font-weight:600; font-size:clamp(26px,6vw,40px); color:var(--cl-ink-dark); letter-spacing:0.06em; }
.cl-gate-names span{ font-family:var(--cl-font-script); font-size:0.62em; color:var(--cl-gold-deep); margin:0 6px; }
.cl-gate-hint{ margin-top:12px; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cl-gold-deep); animation:clHint 2.6s ease-in-out infinite; }
.cl-gate-hint.is-lit-msg{ animation:none; opacity:0.7; }
@keyframes clHint{ 0%,100%{ opacity:0.4; } 50%{ opacity:1; } }

/* ===================== Page + hero ===================== */
.cl-page{ position:relative; z-index:2; }
.cl-hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 20px; overflow:hidden; }

.cl-table{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1.8s ease 0.5s; pointer-events:none; }
.cl-body.is-lighting .cl-table{ opacity:1; }
.cl-tablecloth{ position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--secondary) 52%, #ece2cf 48%) 100%); box-shadow:inset 0 12px 30px rgba(170,140,100,0.16); }
.cl-tablecloth::before{ content:''; position:absolute; inset:0; opacity:0.16; background:repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 7px); }
.cl-tablecloth::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cl-gold) 40%, transparent), transparent); }

/* Candle placement in the hero */
.cl-hero .cl-candle{ position:absolute; }
.cl-candle-1{ left:13%; bottom:30%; }
.cl-candle-2{ left:29%; bottom:21%; }
.cl-candle-3{ left:50%; bottom:50%; }
.cl-candle-4{ left:71%; bottom:21%; }
.cl-candle-5{ left:87%; bottom:30%; }

/* Floral centerpiece */
.cl-centerpiece{ position:absolute; left:50%; bottom:30%; transform:translateX(-50%); width:220px; height:120px; }
.cl-greens{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:220px; height:70px; background:radial-gradient(40% 60% at 20% 60%, color-mix(in srgb, #4a6b3e 80%, var(--primary) 20%), transparent 70%), radial-gradient(40% 60% at 80% 60%, color-mix(in srgb, #3d5c34 80%, var(--primary) 20%), transparent 70%), radial-gradient(50% 70% at 50% 70%, color-mix(in srgb, #45643a 80%, var(--primary) 20%), transparent 72%); filter:blur(1px); }
.cl-rose{ position:absolute; width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 40% 34%, color-mix(in srgb, #f4c9cf 70%, #fff 30%), color-mix(in srgb, var(--primary) 40%, #b5636e 60%) 78%); box-shadow:inset 0 -4px 8px rgba(120,40,60,0.35), inset 0 3px 5px rgba(255,255,255,0.4); }
.cl-rose::before{ content:''; position:absolute; inset:26%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, #b5636e 70%, #7a2f3c 30%), transparent 70%); }
.cl-rose-1{ left:32%; bottom:34px; } .cl-rose-2{ left:50%; bottom:44px; width:46px; height:46px; } .cl-rose-3{ right:30%; bottom:34px; }
.cl-bud{ position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0; background:radial-gradient(circle at 40% 34%, #f0bcc4, #a85763); transform:rotate(45deg); }
.cl-bud-1{ left:24%; bottom:20px; } .cl-bud-2{ right:22%; bottom:22px; }

/* Place setting */
.cl-plate{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:clamp(130px,32vw,180px); aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 50% 40%, #fbf6ec 0 60%, #e6dcc7 78%, #cdbf9f 100%); box-shadow:0 10px 24px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(0,0,0,0.04); }
.cl-plate-inner{ position:absolute; inset:14%; border-radius:50%; border:2px solid var(--cl-gold-deep); box-shadow:inset 0 0 14px rgba(120,90,40,0.14); }
.cl-napkin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52%; height:64%; border-radius:6px 6px 30px 30px; background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 30%, #efe6d2 70%), color-mix(in srgb, var(--primary) 46%, #d8cbb0 54%)); box-shadow:inset 0 4px 8px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.2); }
.cl-napkin-ring{ position:absolute; left:50%; bottom:24%; transform:translateX(-50%); width:70%; height:12px; border-radius:8px; background:linear-gradient(180deg, var(--cl-gold-soft), var(--cl-gold-deep)); box-shadow:0 2px 4px rgba(0,0,0,0.3); }
.cl-setting{ position:absolute; bottom:9%; display:flex; gap:5px; }
.cl-setting-left{ left:calc(50% - clamp(96px,25vw,140px)); } .cl-setting-right{ right:calc(50% - clamp(96px,25vw,140px)); }
.cl-fork,.cl-knife,.cl-spoon{ width:6px; height:clamp(70px,16vw,96px); border-radius:3px; background:linear-gradient(90deg, var(--cl-gold-deep), var(--cl-gold-soft) 45%, var(--cl-gold-deep)); box-shadow:0 2px 5px rgba(0,0,0,0.4); }
.cl-fork::before{ content:''; position:absolute; }
.cl-knife{ width:7px; } .cl-spoon{ width:9px; border-radius:5px 5px 3px 3px; }
.cl-glass{ position:absolute; bottom:24%; width:40px; }
.cl-glass-wine{ right:calc(50% - clamp(120px,30vw,168px)); }
.cl-glass-flute{ right:calc(50% - clamp(150px,37vw,208px)); bottom:24%; }
.cl-glass-bowl{ display:block; width:40px; height:46px; margin:0 auto; border-radius:0 0 50% 50%; background:linear-gradient(180deg, rgba(255,255,255,0.14), color-mix(in srgb, #7a1f2e 40%, rgba(180,60,80,0.35) 60%) 60%); border:1px solid rgba(255,255,255,0.35); box-shadow:inset 4px 0 6px rgba(255,255,255,0.25); }
.cl-flute-bowl{ position:relative; display:block; width:20px; height:64px; margin:0 auto; border-radius:0 0 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(240,220,150,0.3) 70%); border:1px solid rgba(255,255,255,0.4); overflow:hidden; }
.cl-flute-bowl i{ position:absolute; left:50%; bottom:6px; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.9); animation:clBubble 2.4s linear infinite; }
.cl-flute-bowl i:nth-child(2){ left:38%; animation-delay:0.8s; } .cl-flute-bowl i:nth-child(3){ left:62%; animation-delay:1.5s; }
@keyframes clBubble{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-52px); opacity:0; } }
.cl-glass-stem{ display:block; width:3px; height:28px; margin:0 auto; background:rgba(255,255,255,0.3); }
.cl-glass-stem::after{ content:''; display:block; width:24px; height:4px; margin:0 auto; border-radius:50%; background:rgba(255,255,255,0.25); }
.cl-champagne{ position:absolute; left:8%; bottom:24%; width:44px; }
.cl-champagne-neck{ display:block; width:14px; height:34px; margin:0 auto; border-radius:6px 6px 0 0; background:linear-gradient(90deg, #1c3a2a, #3f6b4f 45%, #14261c); }
.cl-champagne-body{ display:block; width:44px; height:120px; margin:0 auto; border-radius:14px 14px 10px 10px; background:linear-gradient(90deg, #16261c, #3f6b4f 40%, #16261c); box-shadow:inset 6px 0 10px rgba(255,255,255,0.12); }
.cl-champagne-body::after{ content:''; position:absolute; left:50%; top:52px; transform:translateX(-50%); width:34px; height:40px; background:linear-gradient(180deg, var(--cl-gold-soft), var(--cl-gold-deep)); border-radius:3px; opacity:0.9; }
.cl-envelope{ position:absolute; right:10%; bottom:16%; width:96px; height:64px; border-radius:4px; background:linear-gradient(160deg, var(--cl-paper), var(--cl-paper-2)); box-shadow:0 8px 18px rgba(0,0,0,0.45); border:1px solid rgba(120,90,50,0.2); transform:rotate(-6deg); }
.cl-env-flap{ position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 58%); background:linear-gradient(180deg, var(--cl-paper-2), color-mix(in srgb, var(--cl-paper-2) 80%, #000 20%)); }
.cl-env-seal{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; background:radial-gradient(circle at 40% 34%, #b5424c, #7a1f2e); box-shadow:0 2px 5px rgba(0,0,0,0.4); }
.cl-petals{ position:absolute; inset:0; }
.cl-petals span{ position:absolute; top:-4%; width:12px; height:10px; border-radius:74% 8% 74% 8%; background:radial-gradient(circle at 30% 30%, #f4c9cf, #b5636e); opacity:0; animation:clPetal 9s linear infinite; animation-delay:var(--pd,0s); }
.cl-body.is-lit .cl-petals span{ opacity:1; }
@keyframes clPetal{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 10%{ opacity:0.8; } 100%{ transform:translateY(96vh) rotate(300deg); opacity:0; } }

/* ===================== Stationery cards ===================== */
.cl-announce{ position:relative; z-index:3; text-align:center; }
.cl-section{ position:relative; z-index:2; padding:70px 20px; display:flex; flex-direction:column; align-items:center; }
.cl-section-final{ padding:90px 20px 22vh; text-align:center; }

.cl-reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s var(--cl-ease); }
.cl-reveal.is-visible{ opacity:1; transform:none; }

.cl-card{ position:relative; z-index:1; width:min(440px,90vw); margin:0 auto; padding:40px 32px; text-align:center; color:var(--cl-ink-dark); background:linear-gradient(158deg, var(--cl-paper) 0%, var(--cl-paper-2) 100%); border:1px solid color-mix(in srgb, var(--cl-gold) 50%, #b9a06a 50%); border-radius:3px; box-shadow:0 26px 50px -24px rgba(0,0,0,0.7), inset 0 0 0 3px rgba(255,255,255,0.35), inset 0 0 26px rgba(150,120,70,0.12); }
.cl-card::before{ content:''; position:absolute; inset:7px; border:1px solid color-mix(in srgb, var(--cl-gold-deep) 60%, transparent); border-radius:2px; pointer-events:none; }
.cl-card::after{ content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none; opacity:0.5; background:repeating-linear-gradient(45deg, rgba(120,90,50,0.03) 0 2px, transparent 2px 5px); }
.cl-card-hero{ width:min(500px,92vw); padding:46px 36px; }
.cl-card-corner{ position:absolute; width:14px; height:14px; border:1.5px solid var(--cl-gold-deep); opacity:0.7; z-index:1; }
.cl-card-corner.tl{ left:12px; top:12px; border-right:0; border-bottom:0; } .cl-card-corner.tr{ right:12px; top:12px; border-left:0; border-bottom:0; }
.cl-card-corner.bl{ left:12px; bottom:12px; border-right:0; border-top:0; } .cl-card-corner.br{ right:12px; bottom:12px; border-left:0; border-top:0; }

/* Spotlight halo behind each card as it scrolls into view (guides the eye
   without any interaction). Falls back gracefully where :has isn't supported
   — the card simply has no halo. */
.cl-section::before{ content:''; position:absolute; left:50%; top:50%; width:min(620px,120vw); height:min(620px,120vw); transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb, var(--cl-warm) 20%, transparent) 0%, transparent 60%); opacity:0; transition:opacity 1.3s ease; z-index:0; pointer-events:none; }
.cl-section:has(.is-visible)::before{ opacity:0.42; }

.cl-eyebrow{ font-family:var(--cl-font-sans); font-size:12px; letter-spacing:0.34em; text-transform:uppercase; color:var(--cl-ink-soft); position:relative; z-index:1; }
.cl-plabel{ position:relative; z-index:1; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--cl-gold-deep); margin-bottom:14px; }
.cl-names{ position:relative; z-index:1; margin:14px 0 12px; font-family:var(--cl-font-display); font-weight:600; line-height:1.02; color:var(--cl-ink-dark); }
.cl-name-bride,.cl-name-groom{ display:block; font-size:clamp(38px,9vw,60px); letter-spacing:0.02em; }
.cl-amp{ display:block; font-family:var(--cl-font-script); font-size:clamp(30px,7vw,46px); color:var(--cl-gold-deep); margin:-2px 0; }
.cl-announce-sub{ position:relative; z-index:1; color:var(--cl-ink-soft); font-size:16px; max-width:420px; margin:10px auto 0; }
.cl-scroll-cue{ margin-top:30px; font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--cl-gold-deep); text-align:center; }
.cl-scroll-cue span{ display:block; width:1px; height:34px; margin:0 auto 10px; background:linear-gradient(180deg, var(--cl-gold-soft), transparent); animation:clCue 2.4s ease-in-out infinite; }
@keyframes clCue{ 0%,100%{ opacity:0.4; transform:scaleY(0.7); } 50%{ opacity:1; transform:scaleY(1); } }

.cl-date-big{ position:relative; z-index:1; font-family:var(--cl-font-display); font-weight:600; font-size:clamp(24px,5.4vw,34px); color:var(--cl-ink-dark); }
.cl-subline{ position:relative; z-index:1; color:var(--cl-ink-soft); font-size:15px; margin-top:8px; }
.cl-venue-name{ position:relative; z-index:1; font-family:var(--cl-font-display); font-weight:600; font-size:clamp(22px,5vw,28px); color:var(--cl-ink-dark); }

/* Menu */
.cl-card-menu{ width:min(480px,92vw); }
.cl-menu{ position:relative; z-index:1; text-align:left; }
.cl-menu-row{ display:flex; align-items:baseline; gap:8px; padding:12px 0; border-bottom:1px dashed color-mix(in srgb, var(--cl-gold-deep) 40%, transparent); }
.cl-menu-row:last-child{ border-bottom:0; }
.cl-menu-name{ font-family:var(--cl-font-display); font-weight:600; font-size:20px; color:var(--cl-ink-dark); white-space:nowrap; }
.cl-menu-dots{ flex:1; border-bottom:1px dotted color-mix(in srgb, var(--cl-ink-soft) 50%, transparent); transform:translateY(-4px); }
.cl-menu-meta{ text-align:right; color:var(--cl-ink-soft); font-size:13px; }
.cl-menu-meta span{ display:block; }

/* Story */
.cl-story-chapter{ position:relative; z-index:1; margin-top:16px; text-align:left; }
.cl-story-chapter:first-of-type{ margin-top:0; }
.cl-story-title{ font-family:var(--cl-font-script); font-size:26px; color:var(--cl-gold-deep); }
.cl-story-text{ color:var(--cl-ink-soft); font-size:15px; margin:4px 0 0; }

/* Countdown */
.cl-countdown{ position:relative; z-index:1; display:flex; justify-content:center; gap:clamp(8px,3vw,18px); }
.cl-cd{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:clamp(52px,15vw,68px); padding:14px 8px; border-radius:4px; background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(200,180,140,0.18)); border:1px solid color-mix(in srgb, var(--cl-gold-deep) 46%, transparent); }
.cl-cd-num{ font-family:var(--cl-font-display); font-weight:600; font-size:clamp(24px,6vw,32px); color:var(--cl-ink-dark); transition:transform 0.2s ease; }
.cl-cd-label{ font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cl-ink-soft); }
.cl-countdown-passed{ position:relative; z-index:1; font-family:var(--cl-font-display); font-size:22px; color:var(--cl-gold-deep); }
.cl-countdown-passed[hidden]{ display:none; }

/* ===================== Scratch wax seal (circular) ===================== */
.cl-seal-wrap{ position:relative; z-index:1; width:min(230px,66vw); aspect-ratio:1/1; margin:0 auto; border-radius:50%; }
.cl-seal-wrap.is-glowing{ box-shadow:0 0 50px -6px color-mix(in srgb, var(--cl-gold) 70%, transparent); }
.cl-seal-prize{ position:absolute; inset:0; border-radius:50%; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; padding:18px; background:radial-gradient(circle at 50% 42%, #f7eeda, #e7d9bb 76%); border:2px solid var(--cl-gold-deep); }
.cl-seal-rays{ position:absolute; left:50%; top:50%; width:150px; height:150px; z-index:0; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, transparent 0 36%, color-mix(in srgb, var(--cl-gold) 30%, transparent) 48%, transparent 70%); opacity:0; box-shadow:0 0 26px 2px color-mix(in srgb, var(--cl-gold) 24%, transparent); transition:opacity 0.9s ease; }
.cl-seal-plabel{ position:relative; z-index:2; font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--cl-gold-deep); }
.cl-seal-date{ position:relative; z-index:2; font-family:var(--cl-font-display); font-weight:600; font-size:clamp(18px,4.4vw,24px); color:var(--cl-ink-dark); }
.cl-seal-day{ position:relative; z-index:2; font-size:12px; letter-spacing:0.14em; color:var(--cl-ink-soft); }
.cl-seal-shimmer{ position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none; background:linear-gradient(105deg, transparent 42%, rgba(255,240,200,0.5) 50%, transparent 58%); background-size:250% 100%; animation:clShimmer 3.6s ease-in-out infinite; }
.cl-seal-shimmer.is-hidden{ opacity:0; }
@keyframes clShimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.cl-seal-canvas{ position:absolute; inset:0; z-index:4; border-radius:50%; cursor:pointer; touch-action:none; transition:opacity 0.6s ease; }
.cl-seal-canvas.is-cleared{ opacity:0; pointer-events:none; }
/* Hide the prize until scratched (no pre-paint flash); the script adds
   .cl-revealed via MutationObserver when the module clears the foil. */
.cl-seal-prize .cl-seal-plabel,
.cl-seal-prize .cl-seal-date,
.cl-seal-prize .cl-seal-day{ opacity:0; transition:opacity 0.9s ease; }
.cl-seal-wrap.cl-revealed .cl-seal-plabel,
.cl-seal-wrap.cl-revealed .cl-seal-date,
.cl-seal-wrap.cl-revealed .cl-seal-day{ opacity:1; }
.cl-seal-wrap.cl-revealed .cl-seal-rays{ opacity:0.6; }
.cl-hint{ position:relative; z-index:1; margin-top:14px; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cl-gold-deep); }

/* ===================== RSVP ===================== */
.cl-rsvp-names{ position:relative; z-index:1; font-family:var(--cl-font-display); font-weight:600; font-size:clamp(22px,5vw,30px); color:var(--cl-ink-dark); margin:6px 0 18px; }
.cl-rsvp-form{ position:relative; z-index:1; text-align:left; }
.cl-rsvp-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.cl-rsvp-choice{ flex:1; appearance:none; cursor:pointer; padding:11px 8px; border-radius:6px; border:1px solid color-mix(in srgb, var(--cl-gold-deep) 50%, transparent); background:rgba(255,255,255,0.4); color:var(--cl-ink-soft); font-family:var(--cl-font-sans); font-size:12.5px; transition:all 0.25s ease; }
.cl-rsvp-choice.is-active{ border-color:var(--cl-gold-deep); color:var(--cl-ink-dark); background:color-mix(in srgb, var(--cl-gold) 26%, #fff 74%); box-shadow:0 0 16px -8px var(--cl-gold-deep); }
.cl-rsvp-field{ display:block; margin-bottom:12px; }
.cl-rsvp-field span{ display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cl-ink-soft); margin-bottom:5px; }
.cl-rsvp-field input,.cl-rsvp-field textarea{ width:100%; padding:11px 13px; border-radius:6px; font-family:var(--cl-font-sans); font-size:15px; color:var(--cl-ink-dark); background:rgba(255,255,255,0.55); border:1px solid color-mix(in srgb, var(--cl-gold-deep) 40%, transparent); transition:border-color 0.25s, box-shadow 0.25s; }
.cl-rsvp-field input:focus,.cl-rsvp-field textarea:focus{ outline:none; border-color:var(--cl-gold-deep); box-shadow:0 0 0 3px color-mix(in srgb, var(--cl-gold) 18%, transparent); }
.cl-rsvp-field textarea{ resize:vertical; min-height:64px; }
.cl-rsvp-status{ margin-top:12px; text-align:center; font-size:14px; min-height:20px; }
.cl-rsvp-status.is-success{ color:#4f8f5f; }
.cl-rsvp-status.is-error{ color:#b3564f; }

/* Buttons */
.cl-actions{ position:relative; z-index:1; margin-top:18px; }
.cl-btn{ display:inline-block; padding:12px 28px; border-radius:3px; cursor:pointer; text-decoration:none; border:1px solid var(--cl-gold-deep); background:linear-gradient(180deg, color-mix(in srgb, var(--cl-gold) 30%, #f0e2c2), color-mix(in srgb, var(--cl-gold-deep) 40%, #d8c49a 60%)); color:var(--cl-ink-dark); font-family:var(--cl-font-sans); font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; box-shadow:0 6px 16px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5); transition:transform 0.3s var(--cl-ease), box-shadow 0.3s ease; }
.cl-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,0.6), 0 0 18px -6px color-mix(in srgb, var(--cl-gold) 60%, transparent); }
.cl-btn-lg{ padding:14px 34px; font-size:12.5px; }
.cl-btn-block{ display:block; width:100%; text-align:center; }
.cl-hashtag{ position:relative; z-index:1; margin-top:20px; font-family:var(--cl-font-script); font-size:24px; color:var(--cl-gold-deep); }

/* Final */
.cl-final-kicker{ font-family:var(--cl-font-script); font-size:clamp(24px,5vw,34px); color:var(--cl-gold-deep); }
.cl-final-names{ margin-top:4px; font-family:var(--cl-font-display); font-weight:600; font-size:clamp(24px,5vw,40px); letter-spacing:0.08em; color:var(--cl-ink-dark); }

/* Music button */
.cl-music-btn{ position:fixed; right:18px; bottom:18px; z-index:60; width:46px; height:46px; border-radius:50%; border:1px solid var(--cl-gold-deep); background:#fffdf7; color:var(--cl-gold-deep); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 0.5s ease, transform 0.5s ease, color 0.3s ease; box-shadow:0 8px 22px -12px rgba(120,90,50,0.6); }
.cl-music-btn.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.cl-music-btn.is-playing{ color:var(--cl-flame); box-shadow:0 0 20px -4px color-mix(in srgb, var(--cl-warm) 70%, transparent); }
.cl-music-btn.is-playing svg{ animation:clMusicSpin 6s linear infinite; }
@keyframes clMusicSpin{ to{ transform:rotate(360deg); } }

/* Shared celebration — warm gold particles (no confetti) */
.wcard-shared-spark{ position:fixed; z-index:1200; width:7px; height:7px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, #fff 0 30%, var(--cl-flame) 75%, transparent); box-shadow:0 0 9px 2px color-mix(in srgb, var(--cl-warm) 70%, transparent); animation:clSpark 0.9s ease-out forwards; }
@keyframes clSpark{ 0%{ transform:translate(0,0) scale(1); opacity:1; } 100%{ transform:translate(var(--dx), var(--dy)) scale(0.2); opacity:0; } }
.wcard-shared-confetti{ position:fixed; z-index:1200; border-radius:50% !important; pointer-events:none; box-shadow:0 0 6px 1px color-mix(in srgb, var(--cl-warm) 50%, transparent); animation-name:clRise; animation-timing-function:ease-in; animation-fill-mode:forwards; }
@keyframes clRise{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:0.95; } 100%{ transform:translate(var(--drift,0), calc(var(--fall,110vh) * -0.5)); opacity:0; } }
.wcard-shared-petal-burst{ position:fixed; top:-16px; z-index:1190; width:5px; height:5px; border-radius:50%; pointer-events:none; background:var(--cl-gold-soft); box-shadow:0 0 6px 1px color-mix(in srgb, var(--cl-warm) 60%, transparent); animation-name:clFall; animation-timing-function:linear; animation-fill-mode:forwards; --fall:112vh; }
@keyframes clFall{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:0.9; } 100%{ transform:translate(var(--drift,0), var(--fall,112vh)); opacity:0; } }

/* ===================== Responsive ===================== */
@media (max-width:640px){
	.cl-candle-3{ bottom:56%; }
	.cl-glass-flute{ right:calc(50% - 120px); }
	.cl-champagne{ left:2%; }
	.cl-envelope{ right:4%; }
	.cl-countdown{ gap:6px; }
}
@media (max-width:400px){
	.cl-card{ padding:34px 22px; }
	.cl-cd{ min-width:48px; padding:10px 5px; }
}

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
	.cl-reveal{ opacity:1; transform:none; }
}