html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--black: #080808;
--black2: #0e0e0e;
--black3: #161616;
--emerald: #0D3B2E;
--emerald2: #1A5C45;
--emerald3: #14493A;
--gold: #C9A84C;
--gold2: #E8C97A;
--gold3: #8B6914;
--gold4: #D4B85A;
--cream: #FAF3E0;
--white: #FFFFFF;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Cormorant Garamond', serif;
color: var(--cream);
overflow-x: hidden;
background: #050505;
text-align: center;
}
.heading { font-family: 'Cinzel Decorative', serif; letter-spacing: 3px; }
.cultural { font-family: 'Amiri', serif; }
#gate-zoom-portal {
position: fixed;
z-index: 10000;
pointer-events: none;
border-radius: 9999px;
background:
radial-gradient(circle at center, rgba(250,243,224,0.95) 0%, rgba(232,201,122,0.75) 18%, rgba(201,168,76,0.45) 42%, rgba(13,59,46,0.9) 72%, #050505 100%);
box-shadow:
0 0 35px rgba(232,201,122,0.75),
0 0 90px rgba(201,168,76,0.45),
inset 0 0 40px rgba(250,243,224,0.25);
opacity: 0;
transform: translateZ(0) scale(1);
transition:
left 1.15s cubic-bezier(0.76, 0, 0.24, 1),
top 1.15s cubic-bezier(0.76, 0, 0.24, 1),
width 1.15s cubic-bezier(0.76, 0, 0.24, 1),
height 1.15s cubic-bezier(0.76, 0, 0.24, 1),
transform 1.15s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.55s ease;
will-change: left, top, width, height, opacity;
}
#welcome-gate.gate-opening #welcome-stage {
transform: scale(1.1);
opacity: 0.45;
filter: blur(1px);
}
@media (max-width: 600px) {
#gate-zoom-portal { box-shadow: 0 0 24px rgba(232,201,122,0.7), 0 0 50px rgba(201,168,76,0.35); }
}
/* ═══════════════════════════════════════════════════════════
PREMIUM $10K BACKGROUND SYSTEM — 7 LAYERED COMPOSITION
═══════════════════════════════════════════════════════════ */
/* Layer 1: Deep black foundation with emerald nebula pools */
#bg-base {
position: fixed; inset: 0; z-index: -10; pointer-events: none;
background:
radial-gradient(ellipse 120% 80% at 15% 20%, rgba(13,59,46,0.55) 0%, transparent 60%),
radial-gradient(ellipse 100% 70% at 85% 75%, rgba(20,73,58,0.45) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 10%, rgba(201,168,76,0.08) 0%, transparent 50%),
radial-gradient(ellipse 80% 60% at 50% 90%, rgba(139,105,20,0.06) 0%, transparent 50%),
linear-gradient(180deg, #050505 0%, #0a0a0a 30%, #080808 70%, #050505 100%);
}
/* Layer 2: Animated golden aurora / light bleed */
#bg-aurora {
position: fixed; inset: 0; z-index: -9; pointer-events: none;
background:
radial-gradient(ellipse 40% 35% at var(--ax, 30%) var(--ay, 25%), rgba(201,168,76,0.12) 0%, transparent 70%),
radial-gradient(ellipse 35% 40% at var(--bx, 70%) var(--by, 70%), rgba(232,201,122,0.08) 0%, transparent 65%);
transition: background 3s ease;
}
/* Layer 3: Islamic geometric mashrabiya pattern */
#bg-pattern {
position: fixed; inset: 0; z-index: -8; pointer-events: none;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.5'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z'/%3E%3Cpath d='M40 10L70 40L40 70L10 40Z'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cline x1='40' y1='0' x2='40' y2='80'/%3E%3Cline x1='0' y1='40' x2='80' y2='40'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100px 100px;
background-attachment: fixed;
}
/* Layer 4: Fine diagonal lattice */
#bg-lattice {
position: fixed; inset: 0; z-index: -7; pointer-events: none;
background-image:
linear-gradient(45deg, rgba(201,168,76,0.04) 1px, transparent 1px),
linear-gradient(-45deg, rgba(201,168,76,0.04) 1px, transparent 1px);
background-size: 24px 24px;
background-attachment: fixed;
}
/* Layer 5: Edge vignette — deep shadow framing */
#bg-vignette {
position: fixed; inset: 0; z-index: -6; pointer-events: none;
background: radial-gradient(ellipse 70% 60% at center, transparent 30%, rgba(0,0,0,0.7) 100%);
}
/* Layer 6: Sweeping golden shimmer */
#bg-shimmer {
position: fixed; inset: 0; z-index: -5; pointer-events: none;
background: linear-gradient(105deg,
transparent 38%,
rgba(232,201,122,0.03) 44%,
rgba(232,201,122,0.09) 50%,
rgba(232,201,122,0.03) 56%,
transparent 62%);
background-size: 200% 100%;
animation: shimmerSweep 8s ease-in-out infinite;
}
@keyframes shimmerSweep {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
/* Layer 7: Film grain texture */
#bg-grain {
position: fixed; inset: 0; z-index: -4; pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* Ambient particle canvas */
#particle-canvas {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: -3; pointer-events: none; opacity: 0.7;
}
/* Golden border running along screen edges */
.edge-border {
position: fixed; z-index: 2; pointer-events: none;
}
.edge-border.top { top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(201,168,76,0.3) 30%, rgba(232,201,122,0.5) 50%, rgba(201,168,76,0.3) 70%, transparent 95%); }
.edge-border.bottom { bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(201,168,76,0.3) 30%, rgba(232,201,122,0.5) 50%, rgba(201,168,76,0.3) 70%, transparent 95%); }
.edge-border.left { top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent 5%, rgba(201,168,76,0.25) 30%, rgba(232,201,122,0.4) 50%, rgba(201,168,76,0.25) 70%, transparent 95%); }
.edge-border.right { top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent 5%, rgba(201,168,76,0.25) 30%, rgba(232,201,122,0.4) 50%, rgba(201,168,76,0.25) 70%, transparent 95%); }
/* Corner ornaments */
.corner-ornament {
position: fixed; width: 140px; height: 140px;
pointer-events: none; z-index: 3; opacity: 0.25;
}
.corner-ornament.tl { top: 8px; left: 8px; }
.corner-ornament.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.corner-ornament.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.corner-ornament.br { bottom: 8px; right: 8px; transform: scale(-1,-1); }
/* Section glass-card panels */
.glass-panel {
background: linear-gradient(160deg,
rgba(13,59,46,0.35) 0%,
rgba(8,8,8,0.6) 50%,
rgba(13,59,46,0.25) 100%);
backdrop-filter: blur(4s);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(201,168,76,0.15);
}
/* ═══════════════════════ ANIMATIONS ═══════════════════════ */
.reveal {
opacity: 0;
transform: translateY(45px);
transition:
opacity 0.5s ease,
transform 0.5s ease;
}
.reveal.fade-up { transform: translateY(65px); }
.reveal.scale-up { transform: scale(0.82); }
.reveal.slide-left { transform: translateX(-90px); }
.reveal.slide-right{ transform: translateX(90px); }
.reveal.fade-in { transform: translateY(0); }
.reveal.zoom-in { transform: scale(0.55); }
.invitation-opened .reveal.active { opacity: 1; transform: translate(0,0) scale(1); transition-delay: 0.8s; }
.reveal-stagger > * {
opacity: 0; transform: translateY(35px);
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.invitation-opened .reveal-stagger.active > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0s; }
.invitation-opened .reveal-stagger.active > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
.invitation-opened .reveal-stagger.active > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.3s; }
.invitation-opened .reveal-stagger.active > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.4s; }
.invitation-opened .reveal-stagger.active > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.5s; }
.invitation-opened .reveal-stagger.active > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.6s; }
.invitation-opened .reveal-stagger.active > *:nth-child(7) { opacity:1; transform:translateY(0); transition-delay:0.7s; }
.invitation-opened .reveal-stagger.active > *:nth-child(8) { opacity:1; transform:translateY(0); transition-delay:0.8s; }
.invitation-opened .reveal-stagger.active > *:nth-child(9) { opacity:1; transform:translateY(0); transition-delay:0.9s; }
.invitation-opened .reveal-stagger.active > *:nth-child(10) { opacity:1; transform:translateY(0); transition-delay:1s; }
.invitation-opened .reveal-stagger.active > *:nth-child(n+11) { opacity:1; transform:translateY(0); transition-delay:1.1s; }
/* Hero letter-by-letter */
.hero-title { line-height: 1.08; perspective: 600px; }
.hero-title .letter {
display: inline-block;
opacity: 0;
transform: translateY(35px) rotateX(-50deg);
background: linear-gradient(180deg, #fff 0%, #E8C97A 30%, #C9A84C 60%, #8B6914 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.invitation-opened .hero-title .letter {
animation: letterReveal 1s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes letterReveal {
0% { opacity:0; transform:translateY(50px) rotateX(-70deg) scale(0.5); filter:blur(8px) drop-shadow(0 4px 8px rgba(0,0,0,0.7)); }
55% { opacity:1; transform:translateY(-6px) rotateX(6deg) scale(1.06); filter:blur(0) drop-shadow(0 8px 16px rgba(201,168,76,0.5)); }
100% { opacity:1; transform:translateY(0) rotateX(0) scale(1); filter:blur(0) drop-shadow(0 4px 8px rgba(0,0,0,0.7)); }
}
.hero-flourish {
width: 0; height: 2px; margin: 22px auto 0;
background: linear-gradient(90deg, transparent, #8B6914, #C9A84C, #E8C97A, #C9A84C, #8B6914, transparent);
}
.invitation-opened .hero-flourish {
animation: flourishExpand 1.6s ease 2.8s forwards;
}
@keyframes flourishExpand { to { width: 360px; max-width: 85%; } }
.hero-subtitle {
opacity: 0; transform: translateY(22px);
}
.invitation-opened .hero-subtitle {
animation: heroSubIn 1.3s ease 3.2s forwards;
}
@keyframes heroSubIn { to { opacity:1; transform:translateY(0); } }
.invitation-opened .bismillah-glow { animation: bismGlow 4.5s ease-in-out infinite; }
@keyframes bismGlow {
0%,100% { text-shadow: 0 0 12px rgba(232,201,122,0.2), 0 0 24px rgba(201,168,76,0.1); }
50% { text-shadow: 0 0 24px rgba(232,201,122,0.5), 0 0 48px rgba(201,168,76,0.25); }
}
/* Section decorative line */
.section-line {
width: 200px; height: 3px; margin: 16px auto 0;
background: linear-gradient(90deg, transparent, #8B6914, #C9A84C, #E8C97A, #C9A84C, #8B6914, transparent);
position: relative;
}
.section-line::after {
content: '✦'; position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%); color: #E8C97A;
font-size: 25px; background: transparent; padding: 0 10px;
text-shadow: 0 0 10px rgba(232,201,122,0.5);
}
/* Double-border photo frame */
.photo-frame {
position: relative;
border: 3px solid var(--gold);
padding: 6px;
background: rgba(8,8,8,0.8);
box-shadow:
0 0 0 1px rgba(139,105,20,0.3),
0 0 0 8px rgba(13,59,46,0.5),
0 0 0 9px rgba(201,168,76,0.2),
0 20px 60px rgba(0,0,0,0.6);
}
.photo-frame img { border: 1px solid rgba(139,105,20,0.3); display: block; }
/* Wedding card hover */
.wedding-card {
position: relative; overflow: hidden;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.wedding-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5), 0 0 40px rgba(201,168,76,0.08);
}
.wedding-card::after {
content: ''; position: absolute; top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(110deg, transparent 20%, rgba(232,201,122,0.1) 50%, transparent 80%);
transition: left 0.8s ease; pointer-events: none;
}
.wedding-card:hover::after { left: 150%; }
/* Ceremony deck */
.ceremony-deck {
background: linear-gradient(155deg, rgba(13,59,46,0.5), rgba(8,8,8,0.7));
border: 1px solid rgba(201,168,76,0.2);
position: relative; overflow: hidden;
}
.ceremony-deck::before {
content: ''; position: absolute; top: 0; right: 0;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
pointer-events: none;
}
/* Ceremony card centered layout */
.ceremony-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.ceremony-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 22px;
text-align: center;
}
/* Groom card body centered */
.groom-body {
padding: 4px 28px 30px;
text-align: center;
}
/* Childhood paragraph centered */
.childhood-caption {
margin-top: 18px;
font-size: 17px;
line-height: 1.65;
color: rgba(250,243,224,0.8);
text-align: center;
}
/* Map button */
.map-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px; border: 1px solid var(--gold);
color: var(--gold); font-size: 13px; letter-spacing: 2px;
text-decoration: none; border-radius: 30px;
transition: transform 0.6s ease, opacity 0.6s ease; font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}
.map-btn:hover {
background: var(--gold); color: var(--black);
box-shadow: 0 0 20px rgba(201,168,76,0.3);
}
.map-btn svg { width: 16px; height: 16px; fill: currentColor; }
/* Floating audio */
.floating-audio {
position: fixed; bottom: 24px; right: 24px; z-index: 9000;
background: rgba(8,8,8,0.9); border: 1px solid rgba(201,168,76,0.4);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
border-radius: 20px; padding: 12px 20px;
display: flex; align-items: center; gap: 14px;
}
.bismillah {
font-family: 'Amiri', serif;
font-size: 3rem; line-height: 1.25;
color: var(--gold2);
font-weight: 700;
}
.bismillah-translation {
font-size: 14px !important;
letter-spacing: 2px !important;
margin-top: 10px !important;
}
@media (max-width: 768px) {
.bismillah { font-size: 2.2rem; }
.bismillah-translation { font-size: 12px !important; }
}
@media (max-width: 480px) {
.bismillah { font-size: 1.8rem; }
.bismillah-translation { font-size: 11px !important; letter-spacing: 1.5px !important; }
}
/* ═══════ SCRATCH CARDS ═══════ */
.scratch-section {
max-width: 700px;
margin: 0 auto;
padding: 0 24px 80px;
overflow-x: hidden;
}
.scratch-header {
text-align: center;
margin-bottom: 36px;
}
.scratch-grid {
display: grid;
grid-template-columns: repeat(2, minmax(160px, 200px));
justify-content: center;
gap: 40px;
margin-bottom: 32px;
}
.scratch-grid-grand {
display: flex;
justify-content: center;
}
/* CIRCLE CARD */
.scratch-card {
position: relative;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: hidden;
flex-shrink: 0;
text-align: center;
background: rgba(13,59,46,0.5);
border: 2px solid rgba(201,168,76,0.4);
backdrop-filter: blur(4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 4px rgba(13,59,46,0.6), 0 0 0 6px rgba(201,168,76,0.15);
}
.scratch-card.grand {
width: 260px;
height: 260px;
overflow: hidden;
background: linear-gradient(145deg, rgba(201,168,76,0.15), rgba(13,59,46,0.6));
border: 3px solid rgba(232,201,122,0.6);
box-shadow:
0 0 0 5px rgba(13,59,46,0.7),
0 0 0 8px rgba(201,168,76,0.25),
0 20px 60px rgba(0,0,0,0.5),
0 0 60px rgba(201,168,76,0.2);
}
.scratch-result {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
padding: 22px 16px;
}
.scratch-label {
font-family: 'Cinzel Decorative', serif;
font-size: 9px;
color: rgba(201,168,76,0.6);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
}
.scratch-date {
font-family: 'Cinzel Decorative', serif;
font-size: 14px;
font-weight: 700;
color: var(--gold2);
letter-spacing: 0.5px;
line-height: 1.3;
text-shadow: 0 2px 8px rgba(201,168,76,0.4);
}
.scratch-card.grand .scratch-date {
font-size: 20px;
background: linear-gradient(180deg, #fff 0%, #E8C97A 40%, #C9A84C 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 2px 6px rgba(201,168,76,0.5));
}
.scratch-divider {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
margin: 8px auto;
}
.scratch-card.grand .scratch-divider {
width: 60px;
background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), var(--gold), transparent);
}
.scratch-description {
font-size: 11px;
line-height: 1.5;
color: rgba(250,243,224,0.8);
max-width: 160px;
margin: 0 auto;
}
.scratch-card.grand .scratch-description {
font-size: 14px;
font-weight: 700;
color: var(--gold2);
font-style: italic;
max-width: 210px;
line-height: 1.55;
}
.scratch-card.grand .scratch-result {
padding: 24px 20px;
}
/* Canvas wraps as circle */
.scratch-canvas-wrap {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 2;
cursor: grab;
border-radius: 50%;
overflow: hidden;
}
.scratch-canvas-wrap canvas {
border-radius: 50%;
width: 100%;
height: 100%;
display: block;
}
.scratch-canvas-wrap:active { cursor: grabbing; }
.scratch-canvas-wrap.scratched {
pointer-events: none;
transition: opacity 0.8s ease;
opacity: 0;
}
/* Labels below circles */
.scratch-outer {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.scratch-sub-label {
font-size: 11px;
letter-spacing: 2px;
color: rgba(201,168,76,0.5);
text-transform: uppercase;
}
.scratch-hint {
text-align: center;
margin-top: 8px;
font-size: 12px;
color: rgba(201,168,76,0.45);
letter-spacing: 2px;
}
.scratch-hint svg {
display: inline-block;
width: 14px; height: 14px;
vertical-align: middle;
margin-right: 5px;
fill: var(--gold);
}
@media (max-width: 600px) {
.scratch-card { width: 150px; height: 150px; }
.scratch-card.grand { width: 210px; height: 210px; }
.scratch-date { font-size: 12px; }
.scratch-card.grand .scratch-date { font-size: 15px; }
.scratch-description { font-size: 10px; }
.scratch-card.grand .scratch-description { font-size: 11px; max-width: 170px; }
.scratch-grid {
grid-template-columns: repeat(2, 150px);
gap: 16px;
margin-bottom: 24px;
}
.scratch-grid-grand { margin-top: 4px; }
}
/* Force center on all inputs, selects, buttons */
input, select, button, textarea {
text-align: center;
}
input::placeholder {
text-align: center;
}
/* ═══════════════════════════════════════════════════════════
PREMIUM INTERACTIVE GLOW EFFECT
- Works on mouse hover (desktop/laptop/TV)
- Works on touch (mobile/tablet)
- GPU-accelerated for smooth performance on all devices
═══════════════════════════════════════════════════════════ */
.gallery-item,
.glass-panel,
.wedding-card,
.ceremony-deck,
.countdown-box,
.scratch-card,
.photo-frame,
.guest-message-card,
.double-border,
.map-btn {
position: relative;
isolation: isolate;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
border-color 0.4s ease;
will-change: transform;
}
/* The glow halo layer */
.gallery-item::before,
.glass-panel::before,
.wedding-card::before,
.ceremony-deck::after,
.countdown-box::after,
.scratch-card::before,
.photo-frame::before,
.guest-message-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: radial-gradient(
circle 220px at var(--mx, 50%) var(--my, 50%),
rgba(232, 201, 122, 0.35) 0%,
rgba(201, 168, 76, 0.15) 35%,
transparent 65%
);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: -1;
mix-blend-mode: screen;
}
/* Activate glow on hover (desktop) and on .touched class (mobile) */
.gallery-item:hover::before,
.glass-panel:hover::before,
.wedding-card:hover::before,
.ceremony-deck:hover::after,
.countdown-box:hover::after,
.scratch-card:hover::before,
.photo-frame:hover::before,
.guest-message-card:hover::before,
.gallery-item.touched::before,
.glass-panel.touched::before,
.wedding-card.touched::before,
.ceremony-deck.touched::after,
.countdown-box.touched::after,
.scratch-card.touched::before,
.photo-frame.touched::before,
.guest-message-card.touched::before {
opacity: 1;
}
/* Border highlight on hover/touch */
.gallery-item:hover,
.glass-panel:hover,
.wedding-card:hover,
.ceremony-deck:hover,
.countdown-box:hover,
.scratch-card:hover,
.photo-frame:hover,
.guest-message-card:hover,
.double-border:hover,
.gallery-item.touched,
.glass-panel.touched,
.wedding-card.touched,
.ceremony-deck.touched,
.countdown-box.touched,
.scratch-card.touched,
.photo-frame.touched,
.guest-message-card.touched,
.double-border.touched {
border-color: rgba(232, 201, 122, 0.7) !important;
box-shadow:
0 0 0 1px rgba(232, 201, 122, 0.35),
0 20px 50px rgba(0, 0, 0, 0.5),
0 0 60px rgba(201, 168, 76, 0.25),
inset 0 0 30px rgba(232, 201, 122, 0.05) !important;
}
/* Ripple effect on tap (mobile-friendly) */
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(6);
opacity: 0;
}
}
.ripple-effect {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232,201,122,0.7), rgba(201,168,76,0.3) 50%, transparent 70%);
transform: scale(0);
animation: ripple 0.9s ease-out;
pointer-events: none;
z-index: 10;
mix-blend-mode: screen;
}
/* Magnetic lift on hover/touch */
@media (hover: hover) and (pointer: fine) {
.gallery-item:hover,
.wedding-card:hover,
.countdown-box:hover,
.scratch-card:hover,
.glass-panel:hover {
transform: translateY(-6px) scale(1.015);
}
}
@media (hover: none) {
.gallery-item.touched,
.wedding-card.touched,
.countdown-box.touched,
.scratch-card.touched,
.glass-panel.touched {
transform: scale(1.02);
}
}
/* Map button — extra special glow */
.map-btn:hover, .map-btn.touched {
box-shadow: 0 0 20px rgba(232,201,122,0.5), 0 0 40px rgba(201,168,76,0.2) !important;
transform: scale(1.04);
}
/* ═══════ CLICK/PRESS EFFECT ═══════ */
.press-active {
transform: scale(0.94) translateY(2px) !important;
filter: brightness(0.8) contrast(1.1) !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.4), inset 0 0 40px rgba(232,201,122,0.1) !important;
transition: transform 0.1s ease-out, filter 0.1s ease-out !important;
}
.press-flash {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
z-index: 20;
pointer-events: none;
border-radius: inherit;
animation: flashFade 0.4s ease-out forwards;
}
@keyframes flashFade {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* ═══════ MOON AND FALLING STARS ANIMATION ═══════ */
#celestial-container {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
}
.falling-star {
position: absolute;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(201,168,76,0.8) 50%, rgba(232,201,122,1) 100%);
width: 1.5px;
height: 40px;
opacity: 0;
animation: fall linear infinite;
}
@keyframes fall {
0% { transform: translateY(-10vh) translateX(0); opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { transform: translateY(110vh) translateX(20px); opacity: 0; }
}
.moon {
position: absolute;
width: 70px;
height: 70px;
animation: moonFloat 8s ease-in-out infinite;
filter: drop-shadow(0 0 14px rgba(232,201,122,0.55)) drop-shadow(0 0 30px rgba(201,168,76,0.3));
}
.moon svg {
width: 100%;
height: 100%;
display: block;
}
.hero-moon {
position: absolute;
right: 8%;
top: 14px;
width: 50px;
height: 50px;
pointer-events: none;
z-index: 2;
}
@keyframes moonFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* ═══════ COUNTDOWN ═══════ */
.countdown-section {
max-width: 760px;
margin: 0 auto;
padding: 0 24px 80px;
text-align: center;
}
.countdown-header {
text-align: center;
margin-bottom: 36px;
}
.countdown-small {
font-family: 'Cinzel Decorative', serif;
font-size: 14px;
color: var(--gold);
letter-spacing: 5px;
text-transform: uppercase;
}
.countdown-big {
font-family: 'Cinzel Decorative', serif;
font-size: 44px;
color: var(--cream);
margin-top: 6px;
letter-spacing: 1px;
font-weight: 700;
}
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 20px;
}
.countdown-box {
background: linear-gradient(145deg, rgba(13,59,46,0.6), rgba(8,8,8,0.7));
border: 1px solid rgba(201,168,76,0.35);
border-radius: 16px;
padding: 22px 10px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(232,201,122,0.1);
position: relative;
overflow: hidden;
}
.countdown-box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(110deg, transparent 20%, rgba(232,201,122,0.08) 50%, transparent 80%);
transition: left 1s ease;
}
.countdown-box:hover::before { left: 150%; }
.countdown-number {
font-family: 'Cinzel Decorative', serif;
font-size: 40px;
font-weight: 900;
line-height: 1;
background: linear-gradient(180deg, #fff 0%, #E8C97A 50%, #C9A84C 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 6px rgba(201,168,76,0.3));
}
.countdown-label {
margin-top: 10px;
font-size: 12px;
letter-spacing: 3px;
color: rgba(201,168,76,0.7);
text-transform: uppercase;
}
.countdown-hint {
margin-top: 28px;
font-size: 14px;
color: rgba(250,243,224,0.5);
letter-spacing: 2px;
}
.countdown-hint strong {
color: var(--gold2);
font-weight: 700;
}
/* Guest messages 3-column grid */
.guest-note {
margin: 0;
font-size: 13px;
color: var(--gold2);
letter-spacing: 0.5px;
padding: 8px 18px;
border: 1px dashed rgba(201,168,76,0.4);
border-radius: 30px;
background: rgba(201,168,76,0.08);
display: inline-block;
}
.guest-messages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: start;
}
.guest-messages-grid .guest-message-card {
max-width: 100% !important;
}
/* Tablet: keep 3 cols but tighter */
@media (max-width: 900px) {
.guest-messages-grid { gap: 12px; }
.guest-message-card { padding: 16px 10px !important; border-radius: 12px !important; }
.guest-message-card .message-text { font-size: 13px !important; margin: 8px 0 !important; line-height: 1.4 !important; }
.guest-message-card .quote-l { font-size: 20px !important; top: 4px !important; left: 6px !important; }
.guest-message-card .quote-r { font-size: 20px !important; right: 6px !important; }
.guest-message-card .avatar { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.guest-message-card .guest-name-row { gap: 4px !important; }
.guest-message-card span { font-size: 10px !important; }
.message-divider { width: 40px !important; margin-bottom: 12px !important; }
}
/* Mobile: 2 messages per row */
@media (max-width: 600px) {
.guest-messages-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 0 8px !important; }
.guest-message-card { padding: 10px 6px !important; border-radius: 8px !important; }
.guest-message-card .message-text { font-size: 10px !important; line-height: 1.3 !important; margin: 6px 0 !important; letter-spacing: 0; word-wrap: break-word; }
.guest-message-card .avatar { width: 18px !important; height: 18px !important; font-size: 8px !important; }
.guest-message-card .guest-name-row { gap: 3px !important; flex-wrap: wrap; }
.guest-message-card span { font-size: 8px !important; }
.guest-message-card .quote-l { font-size: 14px !important; top: 2px !important; left: 3px !important; }
.guest-message-card .quote-r { font-size: 14px !important; right: 3px !important; bottom: 0 !important; }
.message-divider { width: 25px !important; margin-bottom: 6px !important; }
}
@media (max-width: 380px) {
.guest-messages-grid { gap: 6px !important; padding: 0 4px !important; }
.guest-message-card { padding: 8px 4px !important; }
.guest-message-card .message-text { font-size: 8px !important; line-height: 1.2 !important; }
.guest-message-card .avatar { width: 14px !important; height: 14px !important; font-size: 7px !important; }
}
@media (max-width: 600px) {
.countdown-big { font-size: 30px; }
.countdown-number { font-size: 28px; }
.countdown-box { padding: 16px 6px; }
.countdown-label { font-size: 10px; letter-spacing: 2px; }
.countdown-grid { gap: 10px; }
}
/* Gallery grid - clean normal 3x3 */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.gallery-item {
border-radius: 16px;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
}
.gallery-item:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(201,168,76,0.15);
z-index: 5;
}
.gallery-item img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
padding: 14px 12px;
background: rgba(8,8,8,0.85);
border-top: 1px solid rgba(201,168,76,0.2);
font-size: 12px;
color: rgba(250,243,224,0.8);
letter-spacing: 1.5px;
text-align: center;
}
/* Family section */
.family-section {
max-width: 800px;
margin: 0 auto;
padding: 0 24px 80px;
}
/* Responsive */
@media (max-width: 1024px) {
.hero-title { font-size: 64px !important; letter-spacing: 6px !important; }
.gallery-item img { height: 240px; }
}
@media (max-width: 768px) {
.hero-title { font-size: 52px !important; letter-spacing: 4px !important; }
.corner-ornament { width: 80px; height: 80px; }
.floating-audio { bottom: 12px; right: 12px; padding: 10px 14px; gap: 10px; }
.gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
.gallery-item img { height: 200px; }
.gallery-caption { font-size: 10px !important; padding: 10px 8px !important; }
.ceremony-deck { padding: 24px !important; }
.ceremony-header h3 { font-size: 24px !important; }
.ceremony-header p:first-child { font-size: 11px !important; }
section h2 { font-size: 36px !important; }
.family-section { padding: 0 16px 60px; }
}
@media (max-width: 640px) {
.hero-title { font-size: 44px !important; letter-spacing: 3px !important; }
.gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
.gallery-item img { height: 140px; }
.gallery-caption { font-size: 8px !important; padding: 6px !important; }
section { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 480px) {
.hero-title { font-size: 36px !important; letter-spacing: 2px !important; }
.corner-ornament { width: 60px; height: 60px; }
.floating-audio { bottom: 8px; right: 8px; padding: 8px 12px; gap: 8px; }
.floating-audio button { width: 32px !important; height: 32px !important; font-size: 12px !important; }
section h2 { font-size: 32px !important; }
.ceremony-deck h3 { font-size: 22px !important; }
.map-btn { font-size: 12px !important; padding: 8px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { transition: none; opacity: 1; transform: none; }
.hero-title .letter { animation: none; opacity: 1; transform: none; }
#bg-shimmer { animation: none; }
}
@media (max-width: 768px) {
div[style*="grid-template-columns: 1fr 1fr"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
html,
body {
overflow-x: hidden !important;
width: 100%;
max-width: 100%;
}
@media (max-width: 768px) {
section div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.dual-showcase,
.ceremony-grid,
.groom-grid,
.family-grid,
.cards-grid {
grid-template-columns: 1fr !important;
}
}
html,
body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
section,
div,
main {
max-width: 100%;
}
@media (max-width: 768px){
#particle-canvas{
display:none !important;
}
#bg-aurora{
display:none !important;
}
#bg-shimmer{
display:none !important;
}
}
/* ═══════════ NIZAM'S WEDDING — PHASE UPGRADE LAYER ═══════════ */
.rsvp-status-message{min-height:20px;margin:0;font-size:13px;line-height:1.5}.rsvp-status-message.error{color:#f2a2a2}.rsvp-status-message.success{color:#9fe0bf}.rsvp-status-message.loading{color:var(--gold2)}
#rsvp-submit:disabled{opacity:.65;cursor:wait;transform:none!important}
.event-interactive{cursor:pointer;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease}.event-interactive:focus-visible{outline:1px solid var(--gold2);outline-offset:4px}.event-interactive.expanded{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 35px rgba(201,168,76,.08)}.event-countdown{margin-top:16px;padding-top:12px;border-top:1px solid rgba(201,168,76,.14);font-size:11px;letter-spacing:1.5px;color:rgba(232,201,122,.72);text-transform:uppercase}
.admin-console{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}.admin-console.open{visibility:visible;opacity:1}.admin-console-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px)}.admin-console-panel{position:relative;width:min(1000px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto;background:linear-gradient(145deg,rgba(18,54,44,.98),rgba(5,8,7,.98));border:1px solid rgba(201,168,76,.35);border-radius:28px;box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 60px rgba(201,168,76,.08);padding:26px}.admin-console-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid rgba(201,168,76,.14)}.admin-kicker{font-size:10px;letter-spacing:4px;color:var(--gold);margin-bottom:5px}.admin-console-head h2{font-size:32px;color:var(--cream);margin:0}.admin-auth-state{display:inline-block;margin-top:6px;font-size:11px;color:rgba(250,243,224,.45)}.admin-auth-state.online{color:#9fe0bf}.admin-icon-btn{width:40px;height:40px;border:1px solid rgba(201,168,76,.25);border-radius:50%;background:rgba(201,168,76,.06);color:var(--cream);font-size:26px;cursor:pointer}.admin-view{padding-top:22px}.admin-view[hidden],.admin-tab-view[hidden]{display:none!important}.admin-muted{color:rgba(250,243,224,.55);font-size:14px}.admin-error{min-height:18px;color:#f2a2a2;font-size:12px}.admin-view>input,.admin-toolbar input,.admin-toolbar select{width:100%;box-sizing:border-box;background:rgba(8,8,8,.62);border:1px solid rgba(201,168,76,.22);color:var(--cream);padding:12px 14px;border-radius:12px;margin:7px 0;outline:none;font-family:'Cormorant Garamond',serif}.admin-primary-btn,.admin-logout-btn,.admin-small-btn,.admin-danger-btn{border:1px solid rgba(201,168,76,.28);border-radius:999px;padding:9px 15px;font-family:'Cormorant Garamond',serif;letter-spacing:1px;cursor:pointer;transition:transform .2s ease,background .2s ease}.admin-primary-btn{width:100%;margin-top:10px;padding:13px;background:var(--gold);color:var(--black);font-weight:700}.admin-logout-btn{margin-top:20px;background:rgba(201,168,76,.08);color:var(--cream)}.admin-small-btn{background:rgba(201,168,76,.08);color:var(--gold2)}.admin-danger-btn{background:rgba(160,35,35,.16);border-color:rgba(220,100,100,.3);color:#f0b0b0}.admin-small-btn:hover,.admin-danger-btn:hover,.admin-primary-btn:hover,.admin-logout-btn:hover{transform:translateY(-1px)}.admin-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}.admin-stats>div{background:rgba(255,255,255,.035);border:1px solid rgba(201,168,76,.13);border-radius:15px;padding:14px 10px;text-align:center}.admin-stats b{display:block;font-size:23px;color:var(--gold2)}.admin-stats span{display:block;margin-top:3px;font-size:10px;letter-spacing:.8px;color:rgba(250,243,224,.5);text-transform:uppercase}.admin-tabs{display:flex;gap:8px;margin-bottom:16px}.admin-tab{border:0;background:transparent;color:rgba(250,243,224,.55);padding:10px 18px;border-bottom:1px solid transparent;cursor:pointer;font-family:'Cormorant Garamond',serif;letter-spacing:1px}.admin-tab.active{color:var(--gold2);border-bottom-color:var(--gold)}.admin-toolbar{display:grid;grid-template-columns:1fr 190px;gap:10px}.admin-subtoolbar{display:flex;gap:8px;justify-content:flex-end;margin:8px 0 14px}.admin-record-list{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:3px}.admin-record{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:15px;border:1px solid rgba(201,168,76,.13);background:rgba(255,255,255,.025);border-radius:15px}.admin-record.is-hidden{opacity:.55}.admin-record strong{color:var(--gold2);font-size:16px}.admin-record small{display:block;color:rgba(250,243,224,.4);font-size:10px;margin-top:3px}.admin-record p{margin:6px 0 0;color:rgba(250,243,224,.72);font-size:13px;line-height:1.45}.admin-record-actions{display:flex;gap:7px;flex-shrink:0}.message-admin-controls{display:flex;justify-content:center;gap:8px;margin-top:15px}.admin-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);z-index:11000;background:#122d25;border:1px solid rgba(201,168,76,.3);color:var(--cream);padding:11px 17px;border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.gallery-lightbox{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.gallery-lightbox.open{opacity:1;visibility:visible}.gallery-lightbox img{max-width:min(90vw,1200px);max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 30px 100px rgba(0,0,0,.65);touch-action:pan-y}.lightbox-close,.lightbox-nav{position:absolute;border:1px solid rgba(201,168,76,.35);background:rgba(5,5,5,.6);color:var(--cream);cursor:pointer;backdrop-filter:blur(8px)}.lightbox-close{top:22px;right:22px;width:44px;height:44px;border-radius:50%;font-size:28px}.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:72px;border-radius:14px;font-size:45px;line-height:1}.lightbox-nav.prev{left:18px}.lightbox-nav.next{right:18px}.lightbox-caption{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--gold2);font-size:13px;letter-spacing:2px;text-transform:uppercase;text-align:center}
@media(max-width:760px){.admin-console-panel{padding:18px;border-radius:22px}.admin-stats{grid-template-columns:repeat(3,1fr)}.admin-toolbar{grid-template-columns:1fr}.admin-record{flex-direction:column}.admin-record-actions{width:100%}.admin-record-actions button{flex:1}.gallery-lightbox img{max-width:92vw;max-height:75vh}.lightbox-nav{width:40px;height:58px;font-size:36px}.lightbox-nav.prev{left:8px}.lightbox-nav.next{right:8px}}
@media(max-width:520px){#rsvp-form>div{grid-template-columns:1fr!important}.admin-console-head h2{font-size:26px}.admin-stats{gap:6px}.admin-stats>div{padding:10px 5px}.admin-stats b{font-size:19px}.admin-stats span{font-size:8px}.admin-console-panel{width:calc(100vw - 16px);max-height:92vh}.gallery-lightbox img{max-height:70vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.event-interactive,.gallery-lightbox,.admin-console{transition:none!important}}
.calendar-btn{margin-left:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.07);color:var(--gold2);font:600 11px 'Cormorant Garamond',serif;letter-spacing:1px;cursor:pointer}.calendar-btn:hover{background:rgba(201,168,76,.14)}
@media(max-width:640px){.admin-visitor-control{grid-template-columns:1fr}.admin-visitor-actual-card{align-items:center;text-align:center}.calendar-btn{display:block;margin:8px auto 0}}
.admin-invited-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-7px 0 18px;padding:12px 14px;border:1px solid rgba(201,168,76,.13);background:rgba(255,255,255,.025);border-radius:14px;color:rgba(250,243,224,.65);font-size:12px}.admin-invited-control label{display:flex;align-items:center;gap:10px}.admin-invited-control input{width:120px;background:rgba(8,8,8,.62);border:1px solid rgba(201,168,76,.22);color:var(--cream);padding:8px 10px;border-radius:10px;outline:none}.admin-invited-control span{color:var(--gold2)}
/* ═══════════ LIVE VISITOR COUNTER ═══════════ */
.visitor-counter{
position:relative;
z-index:20;
isolation:isolate;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
width:min(560px, calc(100% - 32px));
box-sizing:border-box;
margin:4px auto 58px;
padding:30px 22px 34px;
min-height:190px;
border:1px solid rgba(201,168,76,.30);
border-radius:28px;
background:linear-gradient(145deg,rgba(7,20,16,.94),rgba(10,15,13,.92));
box-shadow:0 18px 55px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08),0 0 28px rgba(201,168,76,.07);
overflow:hidden;
}
.visitor-counter::before{
content:"";
position:absolute;
inset:10px;
z-index:-1;
border:1px solid rgba(201,168,76,.12);
border-radius:21px;
pointer-events:none;
}
.visitor-counter::after{
content:"✦";
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);
font-size:12px;
color:var(--gold2);
text-shadow:0 0 14px rgba(201,168,76,.7);
pointer-events:none;
}
/* ═══════════ SCRATCH REVEAL CELEBRATION ═══════════ */
.scratch-celebration-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:5;
pointer-events:none;
border-radius:50%;
display:block;
opacity:1;
transition:opacity .22s ease;
}
.scratch-celebration-canvas.finished{opacity:0}
/* ═══════════ GUEST MESSAGE FIREWORKS CELEBRATION ═══════════ */
/* Guest-message submissions reuse the same premium fireworks overlay as RSVP. */
#fireworks-title{
overflow-wrap:anywhere;
text-wrap:balance;
font-family:'Cormorant Garamond',serif !important;
color:var(--cream) !important;
font-weight:600 !important;
}
#fireworks-subtitle{
font-family:'Cinzel Decorative',serif !important;
color:var(--gold) !important;
font-weight:400 !important;
}
@media (max-width:480px){
#fireworks-title{font-size:30px !important;max-width:88vw !important;line-height:1.18 !important;}
#fireworks-subtitle{font-size:18px !important;max-width:88vw !important;margin-left:auto;margin-right:auto;line-height:1.15 !important;}
}
/* ═══════════ VISITOR COUNTER — MINI WEDDING CELEBRATION ═══════════ */
.visitor-celebration-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
display:block;
}
.visitor-celebration-glow{
position:absolute;
z-index:0;
width:72px;
height:72px;
border-radius:50%;
pointer-events:none;
opacity:.18;
filter:blur(14px);
background:radial-gradient(circle,rgba(232,201,122,.95) 0%,rgba(201,168,76,.35) 35%,transparent 72%);
animation:visitorCelebrationGlow 2.8s ease-in-out infinite;
}
.visitor-celebration-glow-left{left:8%;top:48%;animation-delay:.15s}
.visitor-celebration-glow-right{right:8%;top:42%;animation-delay:1.35s}
@keyframes visitorCelebrationGlow{
0%,100%{transform:scale(.65);opacity:.08}
45%{transform:scale(1.2);opacity:.24}
65%{transform:scale(.9);opacity:.13}
}
.visitor-counter-label{
position:relative;
z-index:3;
max-width:100%;
margin:0 0 18px;
font-family:'Cormorant Garamond',serif;
font-size:19px;
line-height:1.3;
font-weight:600;
letter-spacing:2.4px;
text-transform:none;
color:#f7e8bd;
text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 18px rgba(201,168,76,.22);
}
.visitor-count{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:100%;
min-height:78px;
font-family:'Cinzel Decorative',serif;
font-size:clamp(52px,7vw,78px);
line-height:1;
font-weight:900;
letter-spacing:2px;
color:#E8C97A;
filter:drop-shadow(0 3px 10px rgba(201,168,76,.35));
}
.visitor-digit-slot{
position:relative;
display:inline-block;
flex:0 0 .68em;
width:.68em;
height:1em;
overflow:hidden;
vertical-align:top;
}
.visitor-digit-static,
.visitor-digit-old,
.visitor-digit-new{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
color:#E8C97A;
background:linear-gradient(180deg,#fff 0%,#E8C97A 45%,#C9A84C 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:none;
}
.visitor-digit-old{transform:translateY(0);}
.visitor-digit-new{transform:translateY(-105%);}
.visitor-digit-slot.is-rolling .visitor-digit-old{
animation:visitorDigitOut .62s cubic-bezier(.65,0,.35,1) forwards;
}
.visitor-digit-slot.is-rolling .visitor-digit-new{
animation:visitorDigitIn .62s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes visitorDigitOut{
from{transform:translateY(0);opacity:1}
to{transform:translateY(105%);opacity:.35}
}
@keyframes visitorDigitIn{
from{transform:translateY(-105%);opacity:.35}
to{transform:translateY(0);opacity:1}
}
/* Admin visitor-count controls */
.admin-visitor-control{
position:relative;
display:grid;
grid-template-columns:minmax(180px,1fr) minmax(360px,1.4fr);
gap:18px;
align-items:center;
margin:-4px 0 20px;
padding:16px 18px;
border:1px solid rgba(201,168,76,.18);
border-radius:18px;
background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(201,168,76,.025));
}
.admin-visitor-control-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.admin-visitor-actual-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:11px 14px;border:1px solid rgba(201,168,76,.25);border-radius:14px;background:linear-gradient(145deg,rgba(201,168,76,.09),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.admin-visitor-actual-card strong{font-family:'Cinzel Decorative',serif;font-size:25px;line-height:1;color:var(--cream);letter-spacing:1px}
.admin-visitor-actual-card small{font-size:10px;color:rgba(250,243,224,.42);letter-spacing:.3px}
.admin-visitor-control-copy .admin-kicker{margin:0;color:var(--gold)}
.admin-visitor-control-copy strong{
font-family:'Cinzel Decorative',serif;
font-size:30px;
line-height:1;
color:var(--gold2);
}
.admin-visitor-control-copy small{color:rgba(250,243,224,.45);font-size:11px}
.admin-visitor-actions{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.admin-visitor-actions input{
width:100%;
box-sizing:border-box;
margin:0;
background:rgba(8,8,8,.62);
border:1px solid rgba(201,168,76,.22);
color:var(--cream);
padding:11px 12px;
border-radius:12px;
outline:none;
font-family:'Cormorant Garamond',serif;
font-size:15px;
}
.admin-visitor-actions button:disabled{opacity:.55;cursor:wait}
.admin-visitor-status{
grid-column:1 / -1;
min-height:16px;
margin:0;
font-size:11px;
color:rgba(250,243,224,.5);
}
.admin-visitor-status.success{color:#9fe0bf}
.admin-visitor-status.error{color:#f2a2a2}
.admin-visitor-status.loading{color:var(--gold2)}
@media(max-width:760px){
.admin-visitor-control{grid-template-columns:1fr;padding:14px}
.admin-visitor-actions{grid-template-columns:1fr 1fr}
.admin-visitor-actions input{grid-column:1 / -1}
}
@media(max-width:520px){
.visitor-counter{width:calc(100% - 28px);margin:4px auto 46px;padding:28px 16px 30px;min-height:175px;border-radius:24px}
.visitor-counter::before{inset:8px;border-radius:18px}
.visitor-counter-label{font-size:16px;letter-spacing:2px;max-width:280px;margin-bottom:14px}
.visitor-count{font-size:clamp(48px,16vw,64px);min-height:64px;letter-spacing:1px}
.admin-visitor-actions{grid-template-columns:1fr}
.admin-visitor-actions input{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
.visitor-digit-slot.is-rolling .visitor-digit-old,
.visitor-digit-slot.is-rolling .visitor-digit-new{animation:none}
.visitor-digit-old{display:none}
.visitor-digit-new{transform:translateY(0)}
}
/* RSVP full-name field: always use the full form width. */
#rsvp-form .rsvp-name-row {
grid-template-columns: 1fr !important;
width: 100%;
}
#rsvp-form .rsvp-name-row #rsvp-name {
width: 100%;
min-width: 0;
}
/* Gallery lightbox zoom and touch support */
.gallery-lightbox{overflow:hidden;touch-action:pan-y}
.lightbox-image-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;touch-action:none;cursor:grab}
.lightbox-image-stage:active{cursor:grabbing}
.gallery-lightbox .lightbox-image-stage img{display:block;max-width:min(90vw,1200px);max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 30px 100px rgba(0,0,0,.65);touch-action:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
.lightbox-zoom-controls{position:absolute;z-index:2;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(201,168,76,.25);border-radius:999px;background:rgba(5,5,5,.72);backdrop-filter:blur(10px)}
.lightbox-zoom-controls button{min-width:38px;height:34px;padding:0 10px;border:0;border-radius:999px;background:rgba(201,168,76,.1);color:var(--cream);font:inherit;font-size:20px;cursor:pointer}
.lightbox-zoom-controls button:hover{background:rgba(201,168,76,.25)}
.lightbox-zoom-controls #gallery-zoom-reset{font-size:12px;letter-spacing:1px}
.gallery-lightbox.zoomed .lightbox-nav{opacity:.45}
@media(max-width:760px){.gallery-lightbox .lightbox-image-stage img{max-width:92vw;max-height:75vh}.lightbox-zoom-controls{top:16px}.lightbox-zoom-controls button{min-width:34px;height:32px}.lightbox-close{top:16px;right:12px;z-index:3}.lightbox-nav{z-index:2}}
@media(max-width:520px){.gallery-lightbox .lightbox-image-stage img{max-height:70vh}.lightbox-zoom-controls{top:auto;bottom:68px}.lightbox-caption{bottom:22px;max-width:85vw}}
/* Reliable gallery controls and zoom surface */
#gallery-lightbox{z-index:10060;isolation:isolate}
#gallery-lightbox .lightbox-image-stage{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#gallery-lightbox #gallery-lightbox-image{pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
#gallery-lightbox #gallery-close,
#gallery-lightbox #gallery-prev,
#gallery-lightbox #gallery-next,
#gallery-lightbox .lightbox-zoom-controls{position:absolute;pointer-events:auto;z-index:10}
#gallery-lightbox #gallery-close{top:22px;right:22px}
#gallery-lightbox #gallery-prev{left:18px}
#gallery-lightbox #gallery-next{right:18px}
#gallery-lightbox .lightbox-zoom-controls{top:22px;left:50%;transform:translateX(-50%)}
#gallery-lightbox .lightbox-caption{z-index:8;pointer-events:none}
#gallery-lightbox.zoomed .lightbox-nav{opacity:.85}
#gallery-lightbox .lightbox-nav,#gallery-lightbox .lightbox-close,#gallery-lightbox .lightbox-zoom-controls button{touch-action:manipulation}
@media(max-width:600px){
#gallery-lightbox .lightbox-nav{width:38px;height:58px;font-size:36px}
#gallery-lightbox #gallery-prev{left:6px}
#gallery-lightbox #gallery-next{right:6px}
#gallery-lightbox #gallery-close{top:12px;right:12px}
#gallery-lightbox .lightbox-zoom-controls{top:12px}
}
.scratch-section.all-events-revealed .scratch-sub-label{
color:#FFF4C7!important;opacity:1!important;visibility:visible!important;
text-shadow:0 0 4px #4A2D00,0 0 9px #C9A84C,0 0 18px #E8C97A,0 0 30px rgba(255,211,105,.95);
font-weight:700;
}
/* Scratch celebration: small effects stay inside their circles; EVENT 3 spans the viewport. */
.scratch-celebration-canvas.local{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;border-radius:50%;display:block;opacity:1}
.scratch-celebration-canvas.fullscreen{position:fixed;left:0;top:0;right:auto;bottom:auto;width:100%;height:100%;max-width:none;z-index:10080;pointer-events:none;border-radius:0;display:block;opacity:1;overflow:hidden}
.scratch-celebration-canvas.finished{opacity:0;transition:opacity .25s ease}
.scratch-section.all-events-revealed .scratch-sub-label{
color:#FFF4C7!important;opacity:1!important;visibility:visible!important;
text-shadow:0 0 4px #4A2D00,0 0 9px #C9A84C,0 0 18px #E8C97A,0 0 30px rgba(255,211,105,.95);
font-weight:700;
}
.scratch-section.all-events-revealed .scratch-outer::before{
content:"";position:absolute;z-index:-1;width:125%;aspect-ratio:1;left:50%;top:40%;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,211,105,.42) 0%,rgba(232,190,85,.22) 30%,rgba(201,168,76,.09) 52%,rgba(201,168,76,0) 72%);
filter:blur(13px);opacity:.95;animation:scratchGoldenGlow 2.8s ease-in-out infinite alternate;
}
@keyframes scratchGoldenGlow{from{opacity:.62;filter:blur(11px);transform:translate(-50%,-50%) scale(.96)}to{opacity:1;filter:blur(17px);transform:translate(-50%,-50%) scale(1.06)}}
/* Hide the unwanted nested scrollbar beside the scratch-card area without disabling scrolling. */
.scratch-section,
.scratch-section * {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.scratch-section::-webkit-scrollbar,
.scratch-section *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
/* Scratch reveal wrappers should not create their own scroll container. */
.scratch-section,
.scratch-section .scratch-grid,
.scratch-section .scratch-grid-grand {
overflow-y: visible !important;
}
/* Scratch area must never trap page scrolling: keep the section in normal document flow. */
html, body { overscroll-behavior-y: auto !important; }
.scratch-section { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; position: relative; }
.scratch-section .scratch-header,
.scratch-section .scratch-grid,
.scratch-section .scratch-grid-grand,
.scratch-section .scratch-outer,
.scratch-section .scratch-card,
.scratch-section .scratch-canvas-wrap { max-height: none !important; }