/* ═══════════════════════════════════════════════════════════════════
Arpit & Tanishka — Wedding Weekend
CSS — Luxury Indian Wedding Intro & Hero
═══════════════════════════════════════════════════════════════════ */
/* ── Design tokens ─────────────────────────────────────────────── */
:root {
--ivory: #faf7f0;
--paper: #fffaf0;
--champagne: #f1dfb8;
--champagne-deep: #d9bd7a;
--gold: #ae8440;
--gold-soft: rgba(174, 132, 64, 0.28);
--gold-glow: rgba(235, 196, 110, 0.38);
--ink: #2b2116;
--ink-soft: #554432;
--muted: #806a50;
--serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--serif-sc: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--spin-dur: 4200ms;
--spin-ease: cubic-bezier(0.05, 0.82, 0.18, 1);
--exit-dur: 1100ms;
}
/* ── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-width: 320px;
overflow-x: hidden;
background: var(--ivory);
color: var(--ink);
font-family: var(--sans);
}
/* Lock scrolling while intro is running — prevents blank-screen scroll */
body:not(.intro-complete) {
overflow: hidden;
}
/* Hero visibility is controlled per the hero section CSS below */
/* ══════════════════════════════════════════════════════════════════
INTRO SECTION
══════════════════════════════════════════════════════════════════ */
#intro {
position: relative;
width: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
padding: clamp(36px, 7svh, 64px) 20px clamp(24px, 4svh, 40px);
background: var(--ivory);
opacity: 0;
animation: introFadeIn 1.4s ease forwards;
}
@keyframes introFadeIn { to { opacity: 1; } }
/* ── Background image ──────────────────────────────────────────── */
.intro-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('assets/intro/intro-bg.webp');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transform: scale(1.03);
animation: bgFadeIn 2s ease 0.2s forwards;
will-change: opacity, transform;
}
@keyframes bgFadeIn { to { opacity: 1; transform: scale(1); } }
/* ── Soft luminous overlay ─────────────────────────────────────── */
.intro-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 70% 55% at 50% 44%, rgba(255, 251, 238, 0.08), rgba(255, 251, 238, 0) 60%),
linear-gradient(
to bottom,
rgba(255, 252, 242, 0.12) 0%,
rgba(250, 244, 228, 0.04) 40%,
rgba(248, 238, 218, 0.14) 100%
);
}
/* ── Welcome bloom flash ───────────────────────────────────────── */
.intro-bloom {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
opacity: 0;
background:
radial-gradient(
circle at 50% 54%,
rgba(255, 249, 226, 0.97) 0%,
rgba(240, 213, 148, 0.6) 20%,
rgba(255, 252, 238, 0.34) 38%,
transparent 60%
);
transform: scale(0.5);
transition: opacity 0.85s ease, transform 1.4s var(--spin-ease);
}
.intro-bloom.blooming {
opacity: 1;
transform: scale(2.2);
}
.intro-bloom.fading {
opacity: 0;
transform: scale(3.0);
transition: opacity 1.2s ease 0.3s, transform 1.5s var(--spin-ease);
}
/* ── Wheel ambient halo ────────────────────────────────────────── */
.wheel-halo {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: clamp(300px, 82vw, 520px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 248, 214, 0.20) 0%, rgba(240, 220, 160, 0.08) 40%, transparent 68%);
transform: translate(-50%, -30%);
pointer-events: none;
opacity: 0;
animation: haloReveal 2s ease 1.2s forwards;
transition: opacity 1.2s ease;
}
.wheel-halo.welcome-lit {
background: radial-gradient(circle, rgba(255, 248, 200, 0.30) 0%, rgba(240, 210, 120, 0.12) 36%, transparent 64%);
opacity: 1;
}
@keyframes haloReveal { to { opacity: 1; } }
/* ── Petal canvas ──────────────────────────────────────────────── */
.petal-canvas {
position: absolute;
inset: 0;
z-index: 24;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
}
.petal-canvas.active { opacity: 1; }
/* ── Gold particle burst ───────────────────────────────────────── */
.particles-container {
position: absolute;
inset: 0;
z-index: 19;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
left: 50%;
top: 52%;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(218, 176, 91, 0.82);
box-shadow: 0 0 10px rgba(255, 236, 174, 0.8);
opacity: 0;
will-change: transform, opacity;
}
.p1 { --tx: -92px; --ty: -86px; width: 3px; height: 3px; }
.p2 { --tx: -60px; --ty:-118px; width: 5px; height: 5px; }
.p3 { --tx: -24px; --ty: -98px; width: 3px; height: 3px; }
.p4 { --tx: 32px; --ty:-122px; width: 4px; height: 4px; }
.p5 { --tx: 76px; --ty: -90px; width: 3px; height: 6px; border-radius: 8px; }
.p6 { --tx: 104px; --ty: -48px; width: 3px; height: 3px; }
.p7 { --tx:-108px; --ty: -26px; width: 4px; height: 4px; }
.p8 { --tx: -72px; --ty: -58px; width: 3px; height: 5px; border-radius: 8px; }
.p9 { --tx: 58px; --ty: -50px; width: 5px; height: 5px; }
.p10 { --tx: 20px; --ty: -74px; width: 3px; height: 3px; }
.p11 { --tx: -38px; --ty:-138px; width: 4px; height: 4px; }
.p12 { --tx: 90px; --ty:-136px; width: 3px; height: 3px; }
.particles-container.particles-active .particle {
animation: champagneParticle 2.4s ease-out forwards;
}
.particles-container.particles-active .p2,
.particles-container.particles-active .p6,
.particles-container.particles-active .p9 { animation-delay: 0.08s; }
.particles-container.particles-active .p4,
.particles-container.particles-active .p8,
.particles-container.particles-active .p12 { animation-delay: 0.18s; }
@keyframes champagneParticle {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
15% { opacity: 0.85; }
100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}
/* ══════════════════════════════════════════════════════════════════
HEADER
══════════════════════════════════════════════════════════════════ */
.intro-header {
position: relative;
z-index: 5;
width: min(100%, 720px);
text-align: center;
opacity: 0;
transform: translateY(14px);
animation: textReveal 1.2s cubic-bezier(0.22, 0.72, 0.2, 1) 0.6s forwards;
}
@keyframes textReveal { to { opacity: 1; transform: translateY(0); } }
/* ── Monogram ───────────────────────────────────────────────── */
.intro-monogram {
display: block;
width: clamp(102px, 25.5vw, 170px);
height: auto;
margin: 0 auto;
object-fit: contain;
user-select: none;
/* Remove black background — the PNG has a black bg, mix it away */
mix-blend-mode: multiply;
filter:
drop-shadow(0 4px 18px rgba(174, 132, 64, 0.32))
drop-shadow(0 0 8px rgba(255, 244, 200, 0.22));
animation: monogramShimmer 4s ease-in-out 2s infinite alternate;
}
@keyframes monogramShimmer {
0% { filter: drop-shadow(0 4px 18px rgba(174, 132, 64, 0.32)) drop-shadow(0 0 8px rgba(255, 244, 200, 0.22)); }
50% { filter: drop-shadow(0 4px 32px rgba(214, 172, 84, 0.72)) drop-shadow(0 0 28px rgba(255, 244, 200, 0.62)) drop-shadow(0 0 6px rgba(255, 230, 130, 0.40)); }
100% { filter: drop-shadow(0 4px 18px rgba(174, 132, 64, 0.32)) drop-shadow(0 0 8px rgba(255, 244, 200, 0.22)); }
}
/* ══════════════════════════════════════════════════════════════════
WHEEL AREA
══════════════════════════════════════════════════════════════════ */
.intro-wheel-wrap {
position: relative;
z-index: 6;
width: min(76vw, 420px);
margin-top: clamp(32px, 7vh, 60px);
padding-top: 54px; /* space for larger pointer above wheel */
flex: 0 1 auto;
opacity: 0;
transform: scale(0.94) translateY(8px);
animation: wheelReveal 1.3s cubic-bezier(0.22, 0.72, 0.2, 1) 0.9s forwards;
}
@keyframes wheelReveal { to { opacity: 1; transform: scale(1) translateY(0); } }
/* ── Pointer ───────────────────────────────────────────────────── */
.pointer-wrap {
position: absolute;
top: 0;
left: 50%;
z-index: 10;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.wheel-pointer,
.pointer-fallback {
display: block;
width: clamp(56px, 15vw, 78px);
height: auto;
object-fit: contain;
user-select: none;
filter:
drop-shadow(0 4px 8px rgba(60, 36, 10, 0.38))
drop-shadow(0 0 18px rgba(255, 238, 160, 0.85))
drop-shadow(0 0 32px rgba(220, 170, 80, 0.45));
animation: pointerPoise 5.8s ease-in-out 1.8s infinite alternate;
transform-origin: 50% 88%;
}
.pointer-glow {
width: 56px;
height: 34px;
margin-top: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 243, 170, 0.85), rgba(255, 228, 120, 0.3) 50%, transparent 72%);
pointer-events: none;
opacity: 0.85;
filter: blur(3px);
}
@keyframes pointerPoise {
from { transform: rotate(-0.6deg); }
to { transform: rotate(0.6deg); }
}
.pointer-wrap.ticking .wheel-pointer,
.pointer-wrap.ticking .pointer-fallback {
animation: pointerTick 0.38s cubic-bezier(0.3, 0.76, 0.4, 1) infinite;
}
@keyframes pointerTick {
0%, 100% { transform: rotate(0deg); }
40% { transform: rotate(2.5deg); }
70% { transform: rotate(-1.2deg); }
}
.pointer-wrap.settled .wheel-pointer,
.pointer-wrap.settled .pointer-fallback {
animation: pointerSettle 0.6s cubic-bezier(0.3, 0.76, 0.4, 1) forwards;
}
@keyframes pointerSettle {
0% { transform: rotate(3deg); }
30% { transform: rotate(-1.5deg); }
60% { transform: rotate(0.8deg); }
80% { transform: rotate(-0.3deg); }
100% { transform: rotate(0deg); }
}
/* glow when wheel lands on Welcome */
.pointer-wrap.welcome-glow .pointer-glow {
animation: pointerGlowPulse 1.8s ease-in-out infinite;
}
@keyframes pointerGlowPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.6); opacity: 1; }
}
/* ── Wheel stage ───────────────────────────────────────────────── */
.wheel-stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
/* subtle shadow ring under wheel */
.wheel-shadow-ring {
position: absolute;
inset: 5%;
border-radius: 50%;
box-shadow:
0 24px 48px rgba(74, 47, 20, 0.18),
0 8px 18px rgba(74, 47, 20, 0.10);
pointer-events: none;
}
/* the actual wheel image */
.wedding-wheel,
.wheel-fallback {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center center;
user-select: none;
will-change: transform;
animation: dialBreath 7s ease-in-out 2s infinite alternate;
}
@keyframes dialBreath {
from { transform: rotate(-0.3deg); }
to { transform: rotate(0.3deg); }
}
.wedding-wheel.spinning,
.wheel-fallback.spinning { animation: none; }
/* Welcome segment glow — thin radial overlay at top of wheel */
.wheel-stage::after {
content: '';
position: absolute;
top: -2%;
left: 30%;
width: 40%;
height: 35%;
background: radial-gradient(ellipse at 50% 10%, rgba(255, 247, 195, 0.0), rgba(255, 247, 195, 0) 80%);
pointer-events: none;
border-radius: 50%;
transition: background 0.8s ease;
}
.wheel-stage.welcome-lit::after {
background: radial-gradient(ellipse at 50% 10%, rgba(255, 247, 195, 0.72) 0%, rgba(255, 241, 156, 0.22) 46%, transparent 70%);
}
/* ── Spin button — transparent overlay (wheel image has its own label) ── */
.spin-btn {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: clamp(70px, 19vw, 92px);
height: clamp(70px, 19vw, 92px);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
box-shadow: none;
color: transparent;
cursor: pointer;
transform: translate(-50%, -50%);
transition: transform 0.32s ease;
-webkit-tap-highlight-color: transparent;
}
.spin-btn-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid rgba(174, 132, 64, 0.22);
animation: btnRingPulse 3.6s ease-in-out 2s infinite;
}
@keyframes btnRingPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.18); opacity: 0; }
}
.spin-btn::before { display: none; }
.spin-btn:hover:not(:disabled) {
transform: translate(-50%, -50%) scale(1.04);
}
.spin-btn:active:not(:disabled) {
transform: translate(-50%, -50%) scale(0.96);
}
.spin-btn:focus-visible {
outline: 2px solid rgba(174, 132, 64, 0.6);
outline-offset: 8px;
}
.spin-btn:disabled {
cursor: default;
}
.spin-btn:disabled .spin-btn-ring { animation: none; opacity: 0; }
.spin-btn-inner { display: none; }
.spin-btn-text { display: none; }
/* ── Wheel hint text ───────────────────────────────────────────── */
.wheel-hint {
margin-top: clamp(10px, 2vh, 18px);
text-align: center;
color: #f5e6c0;
font-family: var(--serif);
font-size: clamp(1.8rem, 5.0vw, 2.12rem);
font-style: italic;
font-weight: 400;
letter-spacing: 0.12em;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.55),
0 0 18px rgba(235, 196, 110, 0.30);
opacity: 0;
animation:
textReveal 1s ease 1.4s forwards,
hintGlimmer 3.2s ease-in-out 2.6s infinite;
}
@keyframes hintGlimmer {
0%, 100% {
color: #f5e6c0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(235, 196, 110, 0.30);
}
50% {
color: #ffe8a0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 32px rgba(235, 196, 110, 0.75), 0 0 6px rgba(255, 240, 170, 0.50);
}
}
/* ══════════════════════════════════════════════════════════════════
MUTE BUTTON
══════════════════════════════════════════════════════════════════ */
.mute-btn {
position: absolute;
bottom: 20px;
right: 18px;
z-index: 25;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(174, 132, 64, 0.38);
border-radius: 50%;
background: rgba(255, 251, 238, 0.72);
backdrop-filter: blur(4px);
cursor: pointer;
color: var(--muted);
transition: color 0.25s, border-color 0.25s, background 0.25s;
opacity: 0;
animation: textReveal 0.8s ease 1.8s forwards;
}
.mute-btn:hover {
color: var(--gold);
border-color: rgba(174, 132, 64, 0.7);
}
.mute-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
.mute-icon { width: 16px; height: 16px; }
.music-toggle {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 80;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(174, 132, 64, 0.42);
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 250, 238, 0.82), rgba(243, 225, 185, 0.62));
color: #6f4f24;
box-shadow:
0 10px 28px rgba(40, 24, 8, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.96);
transition:
opacity 0.5s ease,
transform 0.5s cubic-bezier(0.22, 0.72, 0.2, 1),
border-color 0.25s ease,
color 0.25s ease,
background 0.25s ease;
}
body.intro-complete .music-toggle {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.music-toggle:hover {
color: #ae8440;
border-color: rgba(174, 132, 64, 0.72);
background: linear-gradient(145deg, rgba(255, 252, 242, 0.92), rgba(246, 229, 190, 0.72));
}
.music-toggle:focus-visible {
outline: 2px solid rgba(174, 132, 64, 0.75);
outline-offset: 4px;
}
.music-icon {
width: 20px;
height: 20px;
display: block;
}
.music-icon-off,
.music-toggle.is-muted .music-icon-on {
display: none;
}
.music-toggle.is-muted .music-icon-off {
display: block;
}
/* ══════════════════════════════════════════════════════════════════
CINEMATIC WELCOME OVERLAY
Dark dramatic reveal — deep warm-black backdrop, ivory names,
gold accents, staggered blur-to-sharp entrances.
══════════════════════════════════════════════════════════════════ */
.welcome-overlay {
position: absolute;
inset: 0;
z-index: 22;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
pointer-events: none;
opacity: 0;
background: rgba(252, 247, 234, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: opacity 1.8s cubic-bezier(0.3, 0, 0.15, 1);
}
.welcome-overlay.visible { opacity: 1; }
/* ── Ambient candlelight glow blooms behind the names ── */
.wc-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse 78% 56% at 50% 52%,
rgba(241, 218, 155, 0.38) 0%,
rgba(220, 185, 100, 0.14) 44%,
transparent 70%
);
opacity: 0;
transform: scale(0.6);
}
.welcome-overlay.visible .wc-glow {
animation: wcGlowBloom 2.8s cubic-bezier(0.2, 0, 0.1, 1) 0.3s forwards;
}
@keyframes wcGlowBloom {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
/* ── Content wrapper ── */
.welcome-content {
position: relative;
z-index: 1;
text-align: center;
width: min(100%, 680px);
}
/* ── Eyebrow: "The Wedding of" ── */
.wc-eyebrow {
color: var(--gold);
font-family: var(--serif-sc);
font-size: clamp(0.72rem, 2.4vw, 0.92rem);
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
opacity: 0;
}
.welcome-overlay.visible .wc-eyebrow {
animation: wcFadeUp 1.1s cubic-bezier(0.22, 0.72, 0.2, 1) 0.55s forwards;
}
/* ── Decorative gold rules ── */
.wc-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 18px auto 14px;
width: min(72%, 300px);
}
.wc-rule-lower { margin: 14px auto 18px; }
.wc-rule-line {
display: block;
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--champagne-deep), transparent);
transform-origin: center;
transform: scaleX(0);
}
.wc-rule-gem {
color: var(--gold);
font-size: 6px;
line-height: 1;
opacity: 0;
transform: scale(0) rotate(-45deg);
display: block;
flex-shrink: 0;
}
/* Top rule */
.welcome-overlay.visible .wc-rule:not(.wc-rule-lower) .wc-rule-line {
animation: wcRuleDraw 1s cubic-bezier(0.4, 0, 0.15, 1) 0.92s forwards;
}
.welcome-overlay.visible .wc-rule:not(.wc-rule-lower) .wc-rule-gem {
animation: wcGemPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.22s forwards;
}
/* Bottom rule */
.welcome-overlay.visible .wc-rule-lower .wc-rule-line {
animation: wcRuleDraw 1s cubic-bezier(0.4, 0, 0.15, 1) 3.2s forwards;
}
.welcome-overlay.visible .wc-rule-lower .wc-rule-gem {
animation: wcGemPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 3.52s forwards;
}
@keyframes wcRuleDraw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes wcGemPop {
from { opacity: 0; transform: scale(0) rotate(-45deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ── Names block ── */
.wc-names-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Each name: huge, italic, ivory — reveals with a blur-to-sharp cinematic focus */
.wc-name {
font-family: var(--serif);
font-size: clamp(4.4rem, 16vw, 9rem);
font-style: italic;
font-weight: 300;
line-height: 0.90;
color: var(--ink);
letter-spacing: -0.01em;
text-shadow:
0 2px 32px rgba(174, 132, 64, 0.18),
0 8px 60px rgba(174, 132, 64, 0.08);
opacity: 0;
}
.welcome-overlay.visible .wc-name-1 {
animation: wcNameReveal 1.6s cubic-bezier(0.22, 0.72, 0.2, 1) 1.15s forwards;
}
.welcome-overlay.visible .wc-name-2 {
animation: wcNameReveal 1.6s cubic-bezier(0.22, 0.72, 0.2, 1) 2.45s forwards;
}
/* Blur-to-sharp focus pull — the signature cinematic effect */
@keyframes wcNameReveal {
from {
opacity: 0;
filter: blur(18px);
transform: translateY(32px) scale(0.96);
}
55% { filter: blur(3px); }
to {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
}
}
/* ── Ampersand ── */
.wc-amp-row {
opacity: 0;
margin: 6px 0 4px;
}
.welcome-overlay.visible .wc-amp-row {
animation: wcAmpBloom 1.1s cubic-bezier(0.34, 1.32, 0.64, 1) 1.96s forwards;
}
@keyframes wcAmpBloom {
from {
opacity: 0;
transform: scale(0.36) rotate(-12deg);
filter: blur(8px);
}
65% { filter: blur(0); }
to {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0);
}
}
.wc-amp {
display: inline-block;
font-family: var(--serif);
font-size: clamp(1.6rem, 4.8vw, 2.8rem);
font-style: normal;
font-weight: 400;
color: var(--gold);
line-height: 1;
filter: drop-shadow(0 0 14px rgba(218, 176, 91, 0.65));
}
/* ── Date & venue ── */
.wc-date-venue {
margin-top: 2px;
color: var(--ink-soft);
font-family: var(--serif-sc);
font-size: clamp(0.68rem, 2.1vw, 0.84rem);
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
line-height: 1.6;
opacity: 0;
}
.welcome-overlay.visible .wc-date-venue {
animation: wcFadeUp 1.1s cubic-bezier(0.22, 0.72, 0.2, 1) 3.75s forwards;
}
.wc-date-venue sup {
font-size: 0.58em;
vertical-align: super;
}
/* ── Shared fade-up keyframe ── */
@keyframes wcFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════════════════════
INTRO EXIT
══════════════════════════════════════════════════════════════════ */
#intro.exiting {
animation: introExit var(--exit-dur) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes introExit {
to { opacity: 0; transform: translateY(-10px); }
}
#intro.hidden { display: none; }
/* ══════════════════════════════════════════════════════════════════
HERO SECTION — Cinematic Video
══════════════════════════════════════════════════════════════════ */
#hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
/* Hidden until intro completes */
opacity: 0;
visibility: hidden;
transition:
opacity 1.6s cubic-bezier(0.3, 0, 0.2, 1) 0.2s,
visibility 0s linear 1.8s;
}
body.intro-complete #hero {
opacity: 1;
visibility: visible;
transition:
opacity 1.6s cubic-bezier(0.3, 0, 0.2, 1) 0.2s,
visibility 0s linear 0s;
}
/* ── Video background ── */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* ── PNG fallback — visible immediately, fades out once video plays ── */
.hero-video-fallback {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('assets/hero/hero_bg.webp');
background-size: cover;
background-position: center center;
opacity: 1;
transition: opacity 1.2s ease;
}
.hero-video-fallback.hidden { opacity: 0; pointer-events: none; }
/* ── Overlay layers ── */
.hero-overlays {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* No radial, no scrim, no vignette — video breathes fully */
.hero-vignette { display: none; }
.hero-text-backdrop { display: none; }
/* Bottom 30% lift only — lifts the scroll cue, doesn't touch the sky */
.hero-bottom-fade {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.35) 0%,
transparent 40%
);
}
/* ── Hero content — positioned upper-center ── */
.hero-inner {
position: relative;
z-index: 2;
max-width: 580px;
width: 100%;
text-align: center;
padding: 32px 32px 60px;
/* Push content higher up the screen */
margin-top: -32svh;
}
/* ── Per-element staggered reveal animation ── */
/* Each [data-hero] element starts hidden and animates in after intro-complete */
[data-hero] {
opacity: 0;
transform: translateY(28px);
}
body.intro-complete [data-hero="1"] { animation: heroItemIn 1.0s cubic-bezier(0.22,0.72,0.2,1) 0.3s forwards; }
body.intro-complete [data-hero="2"] { animation: heroItemIn 0.8s cubic-bezier(0.22,0.72,0.2,1) 0.65s forwards; }
body.intro-complete [data-hero="3"] { animation: heroNameIn 1.4s cubic-bezier(0.16,1.0,0.3,1) 0.9s forwards; }
body.intro-complete [data-hero="4"] { animation: heroAmpIn 1.0s cubic-bezier(0.34,1.4,0.64,1) 1.55s forwards; }
body.intro-complete [data-hero="5"] { animation: heroNameIn 1.4s cubic-bezier(0.16,1.0,0.3,1) 1.25s forwards; }
body.intro-complete [data-hero="6"] { animation: heroItemIn 0.8s cubic-bezier(0.22,0.72,0.2,1) 1.85s forwards; }
body.intro-complete [data-hero="7"] { animation: heroItemIn 0.9s cubic-bezier(0.22,0.72,0.2,1) 2.1s forwards; }
body.intro-complete [data-hero="8"] { animation: heroItemIn 0.9s cubic-bezier(0.22,0.72,0.2,1) 2.4s forwards; }
/* Standard fade-up for supporting elements */
@keyframes heroItemIn {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* Names: blur-to-sharp cinematic focus pull, matching the welcome overlay */
@keyframes heroNameIn {
from {
opacity: 0;
transform: translateY(36px) scale(0.97);
filter: blur(14px);
}
55% { filter: blur(2px); }
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
/* Ampersand: pop-scale bloom */
@keyframes heroAmpIn {
from { opacity: 0; transform: scale(0.4) rotate(-8deg); filter: blur(6px); }
65% { filter: blur(0); }
to { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
/* ── Eyebrow — removed ── */
.hero-eyebrow { display: none; }
/* ── Gold decorative rule — removed ── */
.hero-rule { display: none; }
/* ── Names ── */
.hero-names {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 0;
}
.hero-name {
display: block;
color: #4a1f08;
font-family: var(--serif);
font-size: clamp(4.4rem, 15vw, 7.6rem);
font-style: italic;
font-weight: 300;
line-height: 0.88;
letter-spacing: -0.02em;
transition: color 1.6s ease, text-shadow 1.6s ease;
text-shadow:
0 0 28px rgba(255, 248, 230, 0.98),
0 0 56px rgba(255, 240, 205, 0.80),
0 0 90px rgba(255, 235, 190, 0.45),
0 2px 6px rgba(0, 0, 0, 0.22);
}
/* Ampersand — smaller, gold-brown, clearly subordinate */
.hero-amp {
display: block;
color: #7a3d10;
font-family: var(--serif);
font-size: clamp(1.1rem, 2.8vw, 1.6rem);
font-style: italic;
font-weight: 300;
line-height: 1;
letter-spacing: 0.08em;
margin: 0.55em 0;
transition: color 1.6s ease, text-shadow 1.6s ease;
text-shadow:
0 0 20px rgba(255, 248, 230, 0.95),
0 0 40px rgba(255, 238, 200, 0.65),
0 1px 5px rgba(0, 0, 0, 0.20);
}
/* ── Date ── */
.hero-date {
margin-top: 28px;
margin-bottom: 10px;
color: #4a1f08;
font-family: var(--serif-sc);
font-size: clamp(1.5rem, 4.2vw, 2.2rem);
font-weight: 500;
letter-spacing: 0.20em;
transition: color 1.6s ease, text-shadow 1.6s ease;
text-shadow:
0 0 22px rgba(255, 248, 230, 0.98),
0 0 44px rgba(255, 240, 205, 0.70),
0 1px 5px rgba(0, 0, 0, 0.20);
}
.hero-date sup {
font-size: 0.52em;
vertical-align: super;
}
/* ── Venue ── */
.hero-venue {
display: inline-block;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
padding: 0;
color: #7a3d10;
font-family: var(--serif-sc);
font-size: clamp(0.78rem, 2.2vw, 1.0rem);
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
transition: color 1.6s ease, text-shadow 1.6s ease;
text-shadow:
0 0 18px rgba(255, 248, 230, 0.98),
0 0 36px rgba(255, 238, 200, 0.72),
0 1px 4px rgba(0, 0, 0, 0.18);
}
/* ── Video dark phase — text shifts to white as background darkens ── */
.hero-section.video-dark .hero-name {
color: #ffffff;
text-shadow:
0 0 28px rgba(255, 220, 160, 0.40),
0 2px 8px rgba(0, 0, 0, 0.65);
}
.hero-section.video-dark .hero-amp {
color: rgba(255, 210, 140, 0.90);
text-shadow:
0 0 20px rgba(255, 210, 140, 0.30),
0 1px 6px rgba(0, 0, 0, 0.55);
}
.hero-section.video-dark .hero-date {
color: #ffffff;
text-shadow:
0 0 22px rgba(255, 220, 160, 0.35),
0 1px 6px rgba(0, 0, 0, 0.60);
}
.hero-section.video-dark .hero-venue {
color: rgba(255, 210, 150, 0.88);
text-shadow:
0 0 18px rgba(255, 210, 140, 0.30),
0 1px 4px rgba(0, 0, 0, 0.55);
}
.hero-section.video-dark .scroll-cue-label {
color: #ffffff;
}
/* ══════════════════════════════════════════════════════════════════
SCROLL CUE
══════════════════════════════════════════════════════════════════ */
.hero-scroll-cue {
position: absolute;
bottom: clamp(52px, 8svh, 80px);
left: 40%;
z-index: 3;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
opacity: 0;
transition: opacity 1.4s ease 2.2s;
}
body.intro-complete .hero-scroll-cue {
animation: heroItemIn 1.0s cubic-bezier(0.22,0.72,0.2,1) 2.8s forwards;
}
.scroll-cue-label {
color: #ffffff;
font-family: var(--serif-sc);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.38em;
text-transform: uppercase;
text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
/* Vertical line removed — only chevrons remain */
.scroll-cue-track {
width: 40px;
height: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
position: relative;
overflow: visible;
}
/* Hide old dot */
.scroll-cue-dot { display: none; }
/* First chevron */
.scroll-cue-track::before,
.scroll-cue-track::after {
content: '';
position: absolute;
left: 50%;
width: 11px;
height: 11px;
border-right: 2.5px solid #ffffff;
border-bottom: 2.5px solid #ffffff;
transform: translateX(-50%) rotate(45deg);
opacity: 0;
}
.scroll-cue-track::before {
top: 8px;
animation: chevronCascade 1.8s ease-in-out infinite;
}
.scroll-cue-track::after {
top: 22px;
animation: chevronCascade 1.8s ease-in-out 0.28s infinite;
}
@keyframes chevronCascade {
0% { opacity: 0; transform: translateX(-50%) translateY(-5px) rotate(45deg); }
35% { opacity: 1; }
70% { opacity: 0; transform: translateX(-50%) translateY(5px) rotate(45deg); }
100% { opacity: 0; transform: translateX(-50%) translateY(-5px) rotate(45deg); }
}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
#intro {
padding-top: clamp(32px, 6svh, 50px);
padding-bottom: 20px;
}
.intro-wheel-wrap {
width: min(82vw, 360px);
}
.wc-name {
font-size: clamp(3.4rem, 14vw, 5.2rem);
line-height: 0.92;
}
.wc-amp { font-size: 1.6rem; }
.hero-name {
font-size: clamp(3.6rem, 14vw, 5rem);
}
.hero-rule-line { width: 48px; }
.hero-date { font-size: clamp(1.1rem, 4vw, 1.4rem); }
.hero-venue { font-size: 0.72rem; letter-spacing: 0.20em; }
.hero-eyebrow { font-size: 0.60rem; letter-spacing: 0.22em; }
}
@media (max-width: 380px) {
.intro-monogram { width: 85px; }
.intro-wheel-wrap { width: 88vw; }
}
@media (max-height: 700px) {
#intro {
padding-top: 26px;
padding-bottom: 16px;
}
.intro-wheel-wrap {
width: min(70vw, 380px);
margin-top: 14px;
}
.intro-monogram { width: 94px; }
}
@media (max-height: 620px) {
#intro { padding-top: 16px; }
.intro-monogram { width: 75px; }
.intro-wheel-wrap {
width: min(62vw, 320px);
padding-top: 20px;
}
.wheel-hint { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
REDUCED MOTION
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
#intro,
.intro-bg,
.intro-header,
.intro-wheel-wrap,
.wheel-hint,
.mute-btn {
opacity: 1 !important;
transform: none !important;
}
.wheel-pointer,
.pointer-fallback {
transform: rotate(0deg) !important;
}
.spin-btn {
transform: translate(-50%, -50%) !important;
}
.wedding-wheel,
.wheel-fallback {
transform: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
INVITE SECTION — Temple Arch Invitation Panel
══════════════════════════════════════════════════════════════════ */
:root {
--wine: #6b1d2e;
--espresso: #2e1a0e;
--parchment: #fdf6e8;
--gold-matte: #b8904a;
}
/* ── Section ──────────────────────────────────────────────────────── */
.invite-section {
position: relative;
width: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 0 clamp(16px, 5vw, 40px) clamp(28px, 5svh, 56px);
padding-top: clamp(26svh, 30%, 34svh);
background: #f0e4c4;
}
/* ── Background image ─────────────────────────────────────────────── */
.invite-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('assets/invite/invite-bg.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.8s ease;
}
.invite-section.inv-visible .invite-bg { opacity: 1; }
/* ── Invite petal canvas ──────────────────────────────────────────── */
.invite-petal-canvas {
position: absolute;
inset: 0;
z-index: 10; /* floats above text for natural depth */
width: 100%;
height: 100%;
pointer-events: none;
}
/* ── Ambient glow ─────────────────────────────────────────────────── */
.invite-ambient {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 65% 55% at 50% 42%,
rgba(255, 248, 225, 0.55) 0%,
rgba(240, 218, 165, 0.15) 55%,
transparent 76%
);
opacity: 0;
transition: opacity 1.4s ease 0.5s;
}
.invite-section.inv-visible .invite-ambient { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════
ARCH WRAP
══════════════════════════════════════════════════════════════════ */
.invite-arch-wrap {
position: relative;
z-index: 2;
width: min(560px, 94vw);
opacity: 0;
transform: translateY(36px);
transition: opacity 1.1s cubic-bezier(0.22, 0.72, 0.2, 1) 0.3s,
transform 1.1s cubic-bezier(0.22, 0.72, 0.2, 1) 0.3s;
overflow: visible;
}
.invite-section.inv-visible .invite-arch-wrap {
opacity: 1;
transform: translateY(0);
}
/* ── Arch frame ───────────────────────────────────────────────────── */
.invite-arch-frame {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
/* ── Arch image — REMOVED ─────────────────────────────────────────── */
/* ── Ganesha medallion — REMOVED ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
INVITE SCROLL — content placed directly on invite-bg
══════════════════════════════════════════════════════════════════ */
.invite-scroll {
position: relative;
z-index: 2;
width: 100%;
padding: clamp(40px, 8svh, 72px) clamp(28px, 8vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: visible;
}
/* ── Default animation state (all text lines) ─────────────────────── */
[data-inv] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.75s cubic-bezier(0.22, 0.72, 0.2, 1),
transform 0.75s cubic-bezier(0.22, 0.72, 0.2, 1);
}
/* Staggered reveals — slightly more spread for drama */
.invite-section.inv-visible [data-inv="1"] { transition-delay: 0.30s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="2"] { transition-delay: 0.48s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="3"] { transition-delay: 0.66s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="4"] { transition-delay: 0.84s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="5"] { transition-delay: 1.02s; opacity: 1; transform: none; }
/* names: special cinematic treatment */
.invite-section.inv-visible [data-inv="6"] { transition-delay: 1.20s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="7"] { transition-delay: 1.90s; opacity: 1; transform: none; }
.invite-section.inv-visible [data-inv="8"] { transition-delay: 2.06s; opacity: 1; transform: none; }
/* ══════════════════════════════════════════════════════════════════
NAMES ANIMATION — cinematic blur-reveal + gold shimmer after
══════════════════════════════════════════════════════════════════ */
.inv-names-block .inv-name-primary,
.inv-names-block .inv-names-amp {
opacity: 0;
filter: blur(12px);
transform: translateY(22px) scale(0.96);
transition:
opacity 1.2s cubic-bezier(0.16, 1.0, 0.3, 1),
filter 1.2s cubic-bezier(0.16, 1.0, 0.3, 1),
transform 1.2s cubic-bezier(0.16, 1.0, 0.3, 1);
}
/* Arpit */
.invite-section.inv-visible [data-inv="6"] .inv-name-primary:first-child {
transition-delay: 1.20s;
opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
animation: nameGoldShimmer 3.5s ease-in-out 2.6s infinite alternate;
}
/* & */
.invite-section.inv-visible [data-inv="6"] .inv-names-amp {
transition-delay: 1.46s;
opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
}
/* Tanishka */
.invite-section.inv-visible [data-inv="6"] .inv-name-primary:last-child {
transition-delay: 1.68s;
opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
animation: nameGoldShimmer 3.5s ease-in-out 3.0s infinite alternate;
}
@keyframes nameGoldShimmer {
0% { text-shadow: none; color: var(--espresso); }
50% { text-shadow: 0 0 28px rgba(196, 152, 64, 0.45), 0 2px 12px rgba(160, 110, 40, 0.22); color: #5c3d1e; }
100% { text-shadow: none; color: var(--espresso); }
}
/* ── Invocation ───────────────────────────────────────────────────── */
.inv-invocation {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(0.82rem, 2.2vw, 1.0rem);
letter-spacing: 0.22em;
color: var(--gold-matte);
text-transform: uppercase;
margin-bottom: 10px;
}
/* ── Divider rule — HIDDEN ────────────────────────────────────────── */
.inv-rule { display: none; }
/* ── Blessing / cordial ───────────────────────────────────────────── */
.inv-blessing {
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.88rem, 2.4vw, 1.04rem);
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.55;
margin-bottom: 8px;
}
.inv-cordial {
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.88rem, 2.4vw, 1.04rem);
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.6;
margin-bottom: 10px;
}
/* ── Late elders ──────────────────────────────────────────────────── */
.inv-elders {
margin-bottom: 8px;
}
.inv-elder {
font-family: var(--serif);
font-size: clamp(0.92rem, 2.5vw, 1.06rem);
font-weight: 500;
color: var(--espresso);
letter-spacing: 0.02em;
line-height: 1.55;
}
/* ── Host parents ─────────────────────────────────────────────────── */
.inv-parents-host {
margin-bottom: 10px;
}
.inv-parent {
font-family: var(--serif);
font-size: clamp(0.94rem, 2.6vw, 1.10rem);
font-weight: 500;
color: var(--espresso);
letter-spacing: 0.02em;
line-height: 1.55;
}
/* ══════════════════════════════════════════════════════════════════
NAMES BLOCK
══════════════════════════════════════════════════════════════════ */
.inv-names-block {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 6px;
margin-bottom: 10px;
}
.inv-name-primary {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: clamp(2.6rem, 9vw, 3.8rem);
line-height: 0.96;
letter-spacing: -0.01em;
color: var(--espresso);
}
.inv-names-amp {
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.88rem, 2.2vw, 1.06rem);
font-weight: 300;
color: var(--wine);
letter-spacing: 0.12em;
margin: 0.35em 0;
opacity: 0.88;
}
/* ══════════════════════════════════════════════════════════════════
FAMILY BLOCKS
══════════════════════════════════════════════════════════════════ */
.inv-family-block {
margin-bottom: 8px;
}
.inv-family-block:last-of-type { margin-bottom: 0; }
.inv-family-label {
font-family: var(--serif-sc);
font-size: clamp(0.66rem, 1.7vw, 0.78rem);
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-matte);
margin-bottom: 4px;
opacity: 0.82;
}
.inv-family-name {
font-family: var(--serif);
font-size: clamp(0.90rem, 2.4vw, 1.04rem);
font-weight: 400;
color: var(--espresso);
letter-spacing: 0.02em;
line-height: 1.50;
}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.invite-arch-wrap { width: min(520px, 96vw); }
.invite-scroll { padding-left: clamp(20px, 6vw, 36px); padding-right: clamp(20px, 6vw, 36px); }
.inv-name-primary { font-size: clamp(1.8rem, 9vw, 2.4rem); }
}
@media (max-width: 360px) {
.invite-arch-wrap { width: 98vw; }
.invite-scroll { padding-left: 20px; padding-right: 20px; }
}
/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.invite-arch-wrap, [data-inv],
.inv-names-block .inv-name-primary, .inv-names-block .inv-names-amp,
.invite-bg, .invite-ambient {
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
opacity: 1 !important;
filter: none !important;
}
.invite-arch-wrap, [data-inv],
.inv-names-block .inv-name-primary, .inv-names-block .inv-names-amp {
transform: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
EVENTS — Arch Frame (normal scroll, single-view layout)
Frame: 806×1576 ratio 0.5114
Window: top 10.09% left 8.06% right 8.31% bottom 4.76%
Goal: heading + frame + nav all visible without scrolling
══════════════════════════════════════════════════════════════════ */
:root {
--ev-meta: 'Manrope', system-ui, sans-serif;
--ev-serif: 'Cormorant Garamond', Georgia, serif;
--ev-bg: #1c1408; /* warm deep espresso */
--pf-top: 6.80%; /* reduced to close top gap — image bleeds to frame inner edge */
--pf-left: 6.13%;
--pf-right: 5.50%; /* reduced slightly to close right gap */
--pf-bottom: 3.20%; /* reduced to close bottom gap — image bleeds to frame inner edge */
}
/* ── Section ─────────────────────────────────────────────────── */
#events {
position: relative;
width: 100%;
min-height: 100svh;
/* Blurred background via pseudo-element so content stays sharp */
overflow-x: clip;
padding: clamp(8px, 1.5svh, 18px) 0 clamp(16px, 2.5svh, 28px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
}
/* Blurred background — pseudo keeps content crisp */
#events::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: url('assets/events/event_bg.webp') center center / cover no-repeat;
filter: blur(6px) brightness(0.92);
transform: scale(1.06); /* hide blur edge bleed */
}
/* All direct children sit above the blur */
#events > * {
position: relative;
z-index: 1;
}
/* ══════════════════════════════════════════════════════════════
HEADING — shifted up, +20% font
══════════════════════════════════════════════════════════════ */
.ev-heading {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: clamp(6px, 1svh, 12px);
margin-top: clamp(-12px, -1.5svh, -6px); /* pull slightly upward */
flex-shrink: 0;
}
.ev-heading-title {
font-family: var(--ev-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(3.1rem, 9.6vw, 4.6rem); /* +20% from 2.6/8vw/3.8 */
letter-spacing: 0.08em;
color: #3a2810;
margin: 0;
line-height: 1;
text-shadow: 0 1px 8px rgba(255,255,255,0.45);
}
.ev-heading-rule {
display: block;
width: clamp(32px, 9vw, 64px);
height: 1px;
background: linear-gradient(to right, transparent, rgba(184,147,74,0.60), transparent);
}
/* ══════════════════════════════════════════════════════════════
STAGE ROW — side buttons flanking the card
══════════════════════════════════════════════════════════════ */
.ev-stage-row {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: clamp(8px, 2.5vw, 16px);
flex-shrink: 0;
}
/* ── Side nav buttons ─────────────────────────────────────── */
.ev-side-btn {
flex-shrink: 0;
background: rgba(255,255,255,0.60);
border: 1px solid rgba(184,147,74,0.55);
border-radius: 50%;
width: clamp(36px, 9vw, 48px);
height: clamp(36px, 9vw, 48px);
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(14px, 4vw, 20px);
color: #6b4a1e;
cursor: pointer;
transition: background 200ms ease, transform 160ms ease, opacity 280ms ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(184,147,74,0.18);
}
.ev-side-btn:active {
background: rgba(184,147,74,0.20);
transform: scale(0.90);
}
/* ══════════════════════════════════════════════════════════════
STAGE — flex row, ghosts absolute
══════════════════════════════════════════════════════════════ */
.ev-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: visible;
}
/* ══════════════════════════════════════════════════════════════
CARD SIZING — larger now that nav is on sides, not below
Budget: 100svh - heading(~70px) - footer(~50px) - padding(~36px)
══════════════════════════════════════════════════════════════ */
.ev-card,
.ev-ghost {
/* Larger: 68vw, but buttons need ~50px each side, so constrain */
width: clamp(240px, 68vw, 360px);
}
@media (max-height: 700px) {
.ev-card, .ev-ghost { width: clamp(180px, 55vw, 260px); }
}
/* ══════════════════════════════════════════════════════════════
FOOTER — progress + swipe hint
══════════════════════════════════════════════════════════════ */
.ev-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: clamp(10px, 1.8svh, 20px);
flex-shrink: 0;
}
.ev-swipe-hint {
font-family: var(--ev-meta);
font-size: clamp(11px, 3vw, 14px);
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(58,40,16,0.70);
margin: 0;
}
.ev-nav-count {
font-family: var(--ev-meta);
font-size: clamp(13px, 3.4vw, 17px);
letter-spacing: 0.22em;
color: #3a2810;
margin: 0;
text-align: center;
font-weight: 500;
}
.ev-nav-sep { opacity: 0.40; margin: 0 1px; }
/* ══════════════════════════════════════════════════════════════
GHOST CARDS
══════════════════════════════════════════════════════════════ */
.ev-ghost {
position: absolute;
aspect-ratio: 848 / 1747;
opacity: 0;
pointer-events: none;
transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4,0,0.2,1);
will-change: opacity, transform;
}
.ev-ghost--prev {
transform: rotate(-7deg) translateX(-78%) translateY(3%);
z-index: 0;
}
.ev-ghost--next {
transform: rotate(7deg) translateX(78%) translateY(3%);
z-index: 0;
}
.ev-ghost.ev-ghost--show { opacity: 0.45; }
.ev-ghost-inner {
position: relative;
width: 100%; height: 100%;
}
.ev-ghost-frame {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: fill;
z-index: 2;
pointer-events: none;
display: block;
}
.ev-ghost-photo {
position: absolute;
top: var(--pf-top);
left: var(--pf-left);
right: var(--pf-right);
bottom: var(--pf-bottom);
z-index: 1;
overflow: hidden;
clip-path: polygon(
0.0% 15.5%, 0.1% 14.3%, 0.5% 13.0%, 0.9% 11.7%, 1.6% 10.5%,
2.4% 9.2%, 3.4% 8.0%, 4.7% 6.7%, 6.3% 5.5%, 8.4% 4.2%,
10.8% 3.0%, 14.4% 1.7%, 20.6% 0.5%, 79.5% 0.5%,
86.0% 1.7%, 89.4% 3.0%, 91.6% 4.2%, 93.7% 5.5%, 95.3% 6.7%,
96.5% 8.0%, 97.6% 9.2%, 98.4% 10.5%, 99.1% 11.7%, 99.6% 13.0%,
99.9% 14.3%, 100.0% 15.5%, 100.0% 93.0%,
96.0% 97.5%, 92.6% 98.8%, 7.4% 98.8%, 4.0% 97.5%, 0.0% 93.0%
);
background-size: cover;
background-position: center;
filter: blur(5px) saturate(0.45) brightness(0.68);
}
/* ══════════════════════════════════════════════════════════════
ACTIVE CARD
══════════════════════════════════════════════════════════════ */
.ev-card {
position: relative;
flex-shrink: 0;
aspect-ratio: 848 / 1747;
z-index: 2;
/* No tilt — always straight */
transform: rotate(0deg);
filter:
drop-shadow(0 16px 40px rgba(0,0,0,0.55))
drop-shadow(0 4px 12px rgba(0,0,0,0.28));
transition: transform 500ms cubic-bezier(0.34,1.18,0.64,1);
will-change: transform;
}
/* Frame PNG on top */
.ev-frame {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: fill;
z-index: 3;
pointer-events: none;
display: block;
}
/* Photo window — rounded rectangle with curved corners, pixel-measured from frame.webp (848×1747).
Flat top at 8.76%, curved top corners, rounded bottom corners.
No over-extension needed — clip handles all corners precisely. */
.ev-photo-wrap {
position: absolute;
top: var(--pf-top);
left: var(--pf-left);
right: var(--pf-right);
bottom: var(--pf-bottom);
z-index: 1;
overflow: hidden;
border-radius: 0;
clip-path: polygon(
0.0% 15.5%,
0.1% 14.3%,
0.5% 13.0%,
0.9% 11.7%,
1.6% 10.5%,
2.4% 9.2%,
3.4% 8.0%,
4.7% 6.7%,
6.3% 5.5%,
8.4% 4.2%,
10.8% 3.0%,
14.4% 1.7%,
20.6% 0.5%,
79.5% 0.5%,
86.0% 1.7%,
89.4% 3.0%,
91.6% 4.2%,
93.7% 5.5%,
95.3% 6.7%,
96.5% 8.0%,
97.6% 9.2%,
98.4% 10.5%,
99.1% 11.7%,
99.6% 13.0%,
99.9% 14.3%,
100.0% 15.5%,
100.0% 93.0%,
96.0% 97.5%,
92.6% 98.8%,
7.4% 98.8%,
4.0% 97.5%,
0.0% 93.0%
);
}
.ev-photo-bg {
position: absolute;
/* Extend 12px beyond wrap bounds in every direction.
This guarantees image pixels exist under every clip-path edge. */
top: -12px; left: -12px;
right: -12px; bottom: -12px;
width: calc(100% + 24px);
height: calc(100% + 24px);
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
}
/* Haldi: shift down so groom face is visible */
.ev-photo-bg.pos-haldi {
background-position: center 52%;
}
/* ── Haze variants ───────────────────────────────────────────── */
.ev-photo-haze {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
rgba(4,2,1,0.60) 0%,
rgba(4,2,1,0.18) 38%,
transparent 65%
);
}
/* Top haze — Varmala (clean sky) */
.ev-photo-haze.haze--top {
background:
linear-gradient(to bottom, rgba(235,242,255,0.45) 0%, rgba(200,220,245,0.18) 34%, transparent 58%),
linear-gradient(to top, rgba(4,2,1,0.18) 0%, transparent 34%);
}
/* Right haze — Haldi, Carnival, Baraat */
.ev-photo-haze.haze--right {
background:
linear-gradient(to left, rgba(255,248,225,0.55) 0%, rgba(255,248,225,0.20) 42%, transparent 68%),
linear-gradient(to top, rgba(4,2,1,0.18) 0%, transparent 34%);
}
/* Center minimal — no haze */
.ev-photo-haze.haze--center { background: rgba(0,0,0,0.05); }
/* Shadow only — Sangeet dark image */
.ev-photo-haze.haze--shadow { background: transparent; }
/* Radial cream — Phere, Gala Night */
.ev-photo-haze.haze--radial {
background: radial-gradient(
ellipse 70% 40% at 50% 28%,
rgba(255,248,225,0.28) 0%,
rgba(255,248,225,0.10) 55%,
transparent 80%
);
}
/* ══════════════════════════════════════════════════════════════
TEXT BLOCK — inside photo window
Order: day · name · time · mood
══════════════════════════════════════════════════════════════ */
.ev-photo-text {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
gap: clamp(2px, 0.6vw, 5px);
bottom: 7%; left: 6%; right: 6%;
text-align: left;
}
/* Per-event positions */
.ev-photo-text.pos--top-right {
top: 19%; bottom: auto;
left: auto; right: 6%;
text-align: right; align-items: flex-end;
}
.ev-photo-text.pos--top-right-high {
top: 11.5%; bottom: auto;
left: auto; right: 6%;
text-align: right; align-items: flex-end;
}
.ev-photo-text.pos--top-right-mid {
top: 18%; bottom: auto;
left: auto; right: 6%;
text-align: right; align-items: flex-end;
}
.ev-photo-text.pos--top-center {
top: 15%; bottom: auto;
left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--upper-center {
top: 18%; bottom: auto;
left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--center {
top: 23%; bottom: auto;
left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--center-top {
top: 20%; bottom: auto;
left: 6%; right: 6%;
text-align: center; align-items: center;
}
/* Gala Night day/time — bold, +10% size */
.ev-photo-text.pos--center-top .ev-day-line {
font-weight: 700;
font-size: clamp(8px, 2vw, 11px);
}
.ev-photo-text.pos--center-top .ev-time-line {
font-weight: 700;
font-size: clamp(9px, 2.2vw, 12px);
}
/* Gala Night — full-height container so mood can pin to actual bottom */
.ev-photo-text.pos--center-top {
top: 0; bottom: 0; left: 6%; right: 6%;
height: auto;
padding-top: 41%;
text-align: center; align-items: center;
justify-content: flex-start;
}
/* Gala Night mood — pinned to bottom of photo window */
.ev-photo-text.pos--center-top .ev-mood {
position: absolute;
top: auto;
bottom: 4%;
left: 0; right: 0;
text-align: center;
color: rgba(255,255,255,0.92);
}
/* ── Text elements ───────────────────────────────────────────── */
.ev-day-line {
font-family: var(--ev-meta);
font-size: clamp(7px, 1.8vw, 10px);
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(218,176,91,0.88);
margin: 0; line-height: 1;
}
.ev-name {
font-family: var(--ev-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(20px, 5.2vw, 32px);
line-height: 0.97;
letter-spacing: -0.01em;
color: #fff8ee;
margin: 0;
white-space: pre-line;
}
/* Smaller subtitle line inside ev-name (e.g. "(by the pool side)") */
.ev-name-sub {
display: block;
font-size: 0.44em;
font-style: italic;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.3;
opacity: 0.85;
white-space: nowrap;
}
/* Sangeet: text shadow for dark cinematic image */
.ev-photo-text.pos--center .ev-name {
text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
/* Sangeet day/time — bold, +10% size */
.ev-photo-text.pos--center .ev-day-line {
font-weight: 700;
font-size: clamp(8px, 2vw, 11px);
}
.ev-photo-text.pos--center .ev-time-line {
font-weight: 700;
font-size: clamp(9px, 2.2vw, 12px);
}
/* Sangeet — full-height container so mood can pin to actual bottom */
.ev-photo-text.pos--center {
top: 0; bottom: 0; left: 6%; right: 6%;
height: auto;
padding-top: 47%;
text-align: center; align-items: center;
justify-content: flex-start;
}
/* Sangeet mood — pinned to bottom of photo window */
.ev-photo-text.pos--center .ev-mood {
text-shadow: 0 1px 10px rgba(0,0,0,0.45);
position: absolute;
top: auto;
bottom: 4%;
left: 0; right: 0;
text-align: center;
color: rgba(255,255,255,0.92);
}
.ev-time-line {
font-family: var(--ev-meta);
font-size: clamp(8px, 2vw, 11px);
font-weight: 300;
letter-spacing: 0.16em;
color: rgba(218,176,91,0.80);
margin: 0; line-height: 1;
}
/* Venue / location line — sits just under the time */
.ev-loc-line {
font-family: var(--ev-meta);
font-size: clamp(8px, 2vw, 11px);
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(218,176,91,0.88);
margin: clamp(1px, 0.5vw, 3px) 0 0;
line-height: 1.25;
}
/* Location-pin glyph before the venue — inherits the venue text colour
(gold normally, white on the dark Sangeet/Gala cards) via currentColor. */
.ev-loc-line::before {
content: '';
display: inline-block;
width: 0.82em;
height: 0.82em;
margin-right: 0.32em;
vertical-align: -0.11em;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.ev-mood {
font-family: var(--ev-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(9px, 2.2vw, 12px);
line-height: 1.42;
color: rgba(245,228,180,0.80);
margin: clamp(1px,0.4vw,3px) 0 0;
white-space: pre-line;
}
/* ══════════════════════════════════════════════════════════════
CARD ENTRANCE ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes evSlideFromRight {
from { opacity: 0.4; transform: translateX(36px) scale(0.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes evSlideFromLeft {
from { opacity: 0.4; transform: translateX(-36px) scale(0.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
.ev-card--enter { animation: evSlideFromRight 560ms cubic-bezier(0.34,1.18,0.64,1) forwards; }
.ev-card--enter-left { animation: evSlideFromLeft 560ms cubic-bezier(0.34,1.18,0.64,1) forwards; }
/* ══════════════════════════════════════════════════════════════
MOBILE TEXT — per-event positions, sizes, bold meta
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* ── 01 HALDI — top: 21%, right-aligned ─────────────────── */
.ev-photo-text.pos--top-right {
top: 21%; bottom: auto; left: auto; right: 6%;
text-align: right; align-items: flex-end;
}
.ev-photo-text.pos--top-right .ev-name { font-size: clamp(24px, 7.2vw, 40px); } /* +10% */
.ev-photo-text.pos--top-right .ev-day-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right .ev-time-line{ font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right .ev-mood { font-size: clamp(10px, 2.5vw, 14px); } /* +15% */
/* ── 02 CARNIVAL POOL — top: 13%, right-aligned ─────────── */
.ev-photo-text.pos--top-right-high {
top: 13%; bottom: auto; left: auto; right: 6%;
text-align: right; align-items: flex-end;
}
.ev-photo-text.pos--top-right-high .ev-name { font-size: clamp(24px, 7.2vw, 40px); } /* +10% */
.ev-photo-text.pos--top-right-high .ev-day-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right-high .ev-time-line{ font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right-high .ev-mood { font-size: clamp(10px, 2.5vw, 14px); } /* +15% */
/* ── 03 SANGEET — date/time top-center, quote pinned bottom ─ */
.ev-photo-text.pos--center {
top: 0; bottom: 0; left: 6%; right: 6%;
height: auto;
padding-top: 47%;
text-align: center; align-items: center;
justify-content: flex-start;
}
/* White/ivory date and time for Sangeet — bold, +10% */
.ev-photo-text.pos--center .ev-day-line { color: rgba(255,248,235,0.92) !important; font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; }
.ev-photo-text.pos--center .ev-time-line { color: rgba(255,248,235,0.88) !important; font-size: clamp(11px, 2.75vw, 14px); font-weight: 700; }
.ev-photo-text.pos--center .ev-loc-line { color: rgba(255,248,235,0.90) !important; font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; }
.ev-photo-text.pos--center .ev-name { font-size: clamp(22px, 6.5vw, 36px); }
/* Sangeet quote — pinned to true bottom */
.ev-photo-text.pos--center .ev-mood {
position: absolute;
top: auto;
bottom: 4%;
left: 0; right: 0;
text-align: center;
font-size: clamp(10px, 2.5vw, 14px);
}
/* ── 04 BARAAT — top: 16%, center ───────────────────────── */
.ev-photo-text.pos--top-right-mid {
top: 16%; bottom: auto; left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--top-right-mid .ev-name { font-size: clamp(24px, 7.2vw, 40px); } /* +10% */
.ev-photo-text.pos--top-right-mid .ev-day-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right-mid .ev-time-line{ font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-right-mid .ev-mood { font-size: clamp(10px, 2.5vw, 14px); } /* +15% */
/* ── 05 VARMALA — top: 17%, center ──────────────────────── */
.ev-photo-text.pos--top-center {
top: 17%; bottom: auto; left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--top-center .ev-name { font-size: clamp(24px, 7.2vw, 40px); } /* +10% */
.ev-photo-text.pos--top-center .ev-day-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-center .ev-time-line{ font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--top-center .ev-mood { font-size: clamp(10px, 2.5vw, 14px); } /* +15% */
/* ── 06 PHERE — top: 19%, center (shifted ~2% down) ────────── */
.ev-photo-text.pos--upper-center {
top: 19%; bottom: auto; left: 6%; right: 6%;
text-align: center; align-items: center;
}
.ev-photo-text.pos--upper-center .ev-name { font-size: clamp(24px, 7.2vw, 40px); } /* +10% */
.ev-photo-text.pos--upper-center .ev-day-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--upper-center .ev-time-line{ font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; } /* +20%, bold */
.ev-photo-text.pos--upper-center .ev-mood { font-size: clamp(10px, 2.5vw, 14px); } /* +15% */
/* ── 07 GALA NIGHT — date/time bold +10%, quote pinned bottom ─── */
.ev-photo-text.pos--center-top {
top: 0; bottom: 0; left: 6%; right: 6%;
height: auto;
padding-top: 41%;
text-align: center; align-items: center;
justify-content: flex-start;
}
.ev-photo-text.pos--center-top .ev-day-line { font-size: clamp(9px, 2.3vw, 12px); font-weight: 700; }
.ev-photo-text.pos--center-top .ev-time-line { font-size: clamp(10px, 2.5vw, 13px); font-weight: 700; }
.ev-photo-text.pos--center-top .ev-loc-line { font-size: clamp(9px, 2.3vw, 12px); font-weight: 700; }
/* Venue line — bump to match the bolder mobile meta on the right/center events */
.ev-photo-text.pos--top-right .ev-loc-line,
.ev-photo-text.pos--top-right-high .ev-loc-line,
.ev-photo-text.pos--top-right-mid .ev-loc-line,
.ev-photo-text.pos--top-center .ev-loc-line,
.ev-photo-text.pos--upper-center .ev-loc-line {
font-size: clamp(10px, 2.5vw, 13px);
font-weight: 700;
}
/* Gala quote — pinned to true bottom */
.ev-photo-text.pos--center-top .ev-mood {
position: absolute;
top: auto;
bottom: 4%;
left: 0; right: 0;
text-align: center;
font-size: clamp(10px, 2.5vw, 14px);
}
}
/* ══════════════════════════════════════════════════════════════
SMALL PHONES — enlarge the event card so the text stays legible.
#events is min-height:100svh and only clips horizontally, so a
taller card simply lets the section scroll a little.
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Wider card gives the overlaid text more room */
.ev-card, .ev-ghost { width: clamp(290px, 90vw, 360px); }
/* The wider card leaves no room to flank it with arrows, so overlay
them on the card's left/right edges instead. */
.ev-stage-row { position: relative; gap: 0; }
.ev-side-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(255,255,255,0.78);
box-shadow: 0 2px 14px rgba(0,0,0,0.30);
}
.ev-side-btn--prev { left: 0; }
.ev-side-btn--next { right: 0; }
.ev-side-btn:active { transform: translateY(-50%) scale(0.90); }
/* Lift the font floors so text stays legible on narrow screens.
Selectors are qualified with the position class to match the
specificity of the per-event rules in the (max-width:600px) block. */
.ev-photo-text.pos--top-right .ev-name,
.ev-photo-text.pos--top-right-high .ev-name,
.ev-photo-text.pos--top-right-mid .ev-name,
.ev-photo-text.pos--top-center .ev-name,
.ev-photo-text.pos--upper-center .ev-name { font-size: clamp(28px, 8.4vw, 40px); }
.ev-photo-text.pos--center .ev-name { font-size: clamp(26px, 7.6vw, 36px); }
.ev-photo-text.pos--top-right .ev-day-line,
.ev-photo-text.pos--top-right-high .ev-day-line,
.ev-photo-text.pos--top-right-mid .ev-day-line,
.ev-photo-text.pos--top-center .ev-day-line,
.ev-photo-text.pos--upper-center .ev-day-line,
.ev-photo-text.pos--center .ev-day-line,
.ev-photo-text.pos--center-top .ev-day-line { font-size: clamp(12px, 3.1vw, 14px); }
.ev-photo-text.pos--top-right .ev-time-line,
.ev-photo-text.pos--top-right-high .ev-time-line,
.ev-photo-text.pos--top-right-mid .ev-time-line,
.ev-photo-text.pos--top-center .ev-time-line,
.ev-photo-text.pos--upper-center .ev-time-line,
.ev-photo-text.pos--center .ev-time-line,
.ev-photo-text.pos--center-top .ev-time-line { font-size: clamp(13px, 3.3vw, 15px); }
.ev-photo-text.pos--top-right .ev-loc-line,
.ev-photo-text.pos--top-right-high .ev-loc-line,
.ev-photo-text.pos--top-right-mid .ev-loc-line,
.ev-photo-text.pos--top-center .ev-loc-line,
.ev-photo-text.pos--upper-center .ev-loc-line,
.ev-photo-text.pos--center .ev-loc-line,
.ev-photo-text.pos--center-top .ev-loc-line { font-size: clamp(12px, 3.1vw, 14px); }
.ev-photo-text.pos--top-right .ev-mood,
.ev-photo-text.pos--top-right-high .ev-mood,
.ev-photo-text.pos--top-right-mid .ev-mood,
.ev-photo-text.pos--top-center .ev-mood,
.ev-photo-text.pos--upper-center .ev-mood,
.ev-photo-text.pos--center .ev-mood,
.ev-photo-text.pos--center-top .ev-mood { font-size: clamp(12px, 3vw, 15px); }
}
/* ══════════════════════════════════════════════════════════════
WARDROBE PLANNER
══════════════════════════════════════════════════════════════ */
/* ── Section shell ─────────────────────────────────────────── */
.wardrobe-section {
background: var(--ivory);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
overflow: hidden;
}
/* Subtle background texture */
.wardrobe-section::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 50% at 50% 30%, rgba(209,174,104,0.06) 0%, transparent 70%);
pointer-events: none;
}
/* ── Container wrapping bg image + overlays ─────────────────── */
.wp-wrap {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
z-index: 1;
}
/* ── Background jharokha image ──────────────────────────────── */
.wp-bg-img {
display: block;
width: 100%;
height: auto;
user-select: none;
pointer-events: none;
}
/* ── Heading overlay (sits in the upper arch / peacock area) ── */
.wp-heading-overlay {
position: absolute;
top: 11%;
left: 50%;
transform: translateX(-50%);
width: 62%;
text-align: center;
z-index: 4;
pointer-events: none;
}
.wp-heading {
font-family: var(--serif);
font-style: italic;
font-weight: 700;
font-size: clamp(1.375rem, 5.06vw, 2.42rem); /* +10% */
color: var(--ink);
line-height: 1.08;
letter-spacing: 0.015em;
}
.wp-rule {
display: flex;
align-items: center;
gap: 8px;
margin: 5px auto;
}
.wp-rule-line {
flex: 1;
height: 1px;
display: block;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.wp-rule-gem {
color: var(--gold);
font-size: 5px;
display: block;
}
/* ── Jharokha grid (absolute overlay matching frame positions) ─ */
.wp-jharokha-grid {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
/* ── Individual outfit card ─────────────────────────────────── */
.wp-card {
position: absolute;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
pointer-events: all;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
/* Jharokha frame positions
Calibrated to wardrobe_bg.png (portrait ~57:100 aspect ratio)
Each frame: dome arch (~top 32%) + inner amber window + lower bell trim */
.wp-card--tl { left: 4.5%; top: 23.5%; width: 43%; height: 32.5%; }
.wp-card--tr { left: 52.5%; top: 23.5%; width: 43%; height: 32.5%; }
.wp-card--bl { left: 4.5%; top: 58%; width: 43%; height: 33.5%; }
.wp-card--br { left: 52.5%; top: 58%; width: 43%; height: 33.5%; }
/* ── Outfit image — sits in the inner window portion ──────────── */
.wp-card-img {
position: absolute;
/* Dome arch ~32%, inner side frames ~16% each — images stay within the amber window */
top: 31%;
left: 17%;
width: 66%;
height: 54%;
object-fit: contain;
object-position: bottom center;
transform-origin: bottom center;
filter: brightness(1);
opacity: 0;
/* Staggered reveal + continuous float — delays set per-card below */
animation:
wpOutfitReveal 0.80s cubic-bezier(0.34, 1.18, 0.64, 1) var(--reveal-delay, 0.2s) forwards,
wpOutfitFloat 4s ease-in-out var(--float-delay, 1s) infinite;
}
/* Per-card stagger so each outfit floats at its own rhythm
+ directional position shifts as requested */
.wp-card--tl .wp-card-img { --reveal-delay: 0.15s; --float-delay: 0.95s; left: 23%; top: 26%; }
.wp-card--tr .wp-card-img { --reveal-delay: 0.30s; --float-delay: 1.80s; left: 10%; top: 26%; }
.wp-card--bl .wp-card-img { --reveal-delay: 0.45s; --float-delay: 2.60s; left: 23%; top: 26%; }
.wp-card--br .wp-card-img { --reveal-delay: 0.60s; --float-delay: 3.40s; left: 10%; top: 26%; }
/* Hover — pause float, add warm golden glow */
.wp-card:hover .wp-card-img,
.wp-card:focus-visible .wp-card-img {
animation-play-state: paused, paused;
filter: brightness(1.06) drop-shadow(0 6px 20px rgba(174, 132, 64, 0.28));
}
/* ── Float & reveal keyframes ─────────────────────────────────── */
@keyframes wpOutfitReveal {
from {
opacity: 0;
transform: translateY(20px) scale(0.93);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes wpOutfitFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-7px); }
}
/* ── Golden shimmer ring on hover ───────────────────────────── */
.wp-card-shimmer {
display: none;
border-radius: 50% 50% 6% 6% / 30% 30% 4% 4%;
border: 1.5px solid rgba(174, 132, 64, 0);
box-shadow: inset 0 0 0 rgba(174, 132, 64, 0);
transition:
border-color 0.35s ease,
box-shadow 0.35s ease;
pointer-events: none;
}
.wp-card:hover .wp-card-shimmer,
.wp-card:focus-visible .wp-card-shimmer {
border-color: rgba(174, 132, 64, 0.45);
box-shadow:
inset 0 0 20px rgba(209, 174, 104, 0.12),
0 0 12px rgba(209, 174, 104, 0.18);
}
/* ── Wardrobe section subtitle ───────────────────────────────── */
.wp-subheading {
font-family: var(--sans);
font-size: clamp(0.60rem, 1.8vw, 0.80rem);
letter-spacing: 0.10em;
color: var(--muted);
text-transform: uppercase;
margin-top: 4px;
margin-bottom: 2px;
}
/* ── "Tap to Open" pill button inside jharokha window ─────────── */
.wp-card-tap {
position: absolute;
bottom: 22%;
left: 50%;
transform: translateX(-50%);
width: 74%;
display: block;
pointer-events: none;
z-index: 2;
}
.wp-card-tap-bg {
display: block;
width: 100%;
height: auto;
}
.wp-card-tap-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding-left: 6%; /* shifted left — was 22% */
font-family: var(--sans);
font-size: clamp(0.44rem, 1.265vw, 0.644rem); /* +15% */
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
padding-top: 2%; /* slightly up — was 4% */
}
/* ── Event name banner (event_button.png) below jharokha ──────── */
.wp-card-title {
position: absolute;
bottom: 1.2%;
left: 50%;
transform: translateX(-50%);
width: 92%;
display: block;
text-align: center;
pointer-events: none;
z-index: 2;
/* transition kept for hover colour effect */
transition: filter 0.3s ease;
}
.wp-card-title-bg {
display: block;
width: 100%;
height: auto;
}
.wp-card-title-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0; /* centred vertically in button — was pushed down by 14% */
padding-bottom: 0%; /* text down — was 3% */
font-family: var(--serif);
font-style: italic;
font-weight: 700;
font-size: clamp(0.62rem, 2.2vw, 0.95rem);
color: var(--ink-soft);
letter-spacing: 0.03em;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
.wp-card:hover .wp-card-title { filter: brightness(1.04); }
.wp-card:hover .wp-card-title-text { color: var(--gold); }
/* Per-card title button horizontal position — centred on jharokha window */
.wp-card--tl .wp-card-title,
.wp-card--bl .wp-card-title { left: 56%; transform: translateX(-50%); }
.wp-card--tr .wp-card-title,
.wp-card--br .wp-card-title { left: 43%; transform: translateX(-50%); }
/* Per-card tap button — centred in each jharokha window opening */
.wp-card--tl .wp-card-tap,
.wp-card--bl .wp-card-tap { left: 56%; transform: translateX(-50%); }
.wp-card--tr .wp-card-tap,
.wp-card--br .wp-card-tap { left: 43%; transform: translateX(-50%); }
/* Focus ring */
.wp-card:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 3px;
}
/* ══════════════════════════════════════════════════════════════
WARDROBE LIGHTBOX
══════════════════════════════════════════════════════════════ */
.wp-lightbox {
position: fixed;
inset: 0;
z-index: 9900;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.42s ease;
}
.wp-lightbox.is-open {
opacity: 1;
pointer-events: all;
}
/* Blurred dark backdrop */
.wp-lb-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 6, 2, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor: pointer;
}
/* Panel */
.wp-lb-panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: min(88vw, 430px);
max-height: 94svh;
transform: translateY(30px) scale(0.92);
transition: transform 0.52s cubic-bezier(0.34, 1.18, 0.64, 1);
}
.wp-lightbox.is-open .wp-lb-panel {
transform: translateY(0) scale(1);
}
/* ── Editorial navigation bar ───────────────────────────────── */
.wp-lb-nav-bar {
width: 100%;
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 4px 10px;
/* single fine gold hairline below the nav */
border-bottom: 1px solid rgba(174, 132, 64, 0.18);
margin-bottom: 6px;
}
/* Base: all three nav buttons share this */
.wp-lb-nav-btn {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(0.80rem, 2.4vw, 0.92rem);
letter-spacing: 0.08em;
color: rgba(245, 236, 208, 0.58);
background: none;
border: none;
cursor: pointer;
padding: 0 0 3px;
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.28s ease;
-webkit-tap-highlight-color: transparent;
}
/* Animated underline on hover */
.wp-lb-nav-btn::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
transform: scaleX(0);
transition: transform 0.30s ease;
transform-origin: center;
}
.wp-lb-nav-btn:hover,
.wp-lb-nav-btn:focus-visible {
color: rgba(232, 201, 122, 0.90);
}
.wp-lb-nav-btn:hover::after,
.wp-lb-nav-btn:focus-visible::after {
transform: scaleX(1);
}
.wp-lb-nav-btn:focus-visible {
outline: none;
}
/* Arrow characters */
.wp-lb-nav-arr {
font-style: normal;
font-size: 0.85em;
opacity: 0.75;
transition: transform 0.22s ease, opacity 0.22s ease;
}
.wp-lb-prev:hover .wp-lb-nav-arr { transform: translateX(-3px); opacity: 1; }
.wp-lb-next:hover .wp-lb-nav-arr { transform: translateX(3px); opacity: 1; }
/* Back/close button — slightly smaller, upright, centred */
.wp-lb-back {
font-style: normal;
font-size: clamp(0.62rem, 1.6vw, 0.72rem);
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(245, 236, 208, 0.34);
font-family: var(--sans);
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 5px;
}
.wp-lb-back:hover,
.wp-lb-back:focus-visible {
color: rgba(232, 201, 122, 0.70);
}
.wp-lb-back-x {
width: 13px; height: 13px;
flex-shrink: 0;
opacity: 0.70;
transition: opacity 0.25s ease, transform 0.28s ease;
}
.wp-lb-back:hover .wp-lb-back-x {
opacity: 1;
transform: rotate(90deg);
}
/* ── Progress dots ───────────────────────────────────────────── */
.wp-lb-nav-dots {
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.wp-lb-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(174, 132, 64, 0.22);
transition: background 0.28s ease, transform 0.28s ease;
}
.wp-lb-dot.is-active {
background: rgba(174, 132, 64, 0.80);
transform: scale(1.5);
}
/* ── Scrollable image container ─────────────────────────────── */
.wp-lb-img-scroll {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
max-height: calc(94svh - 78px);
border-radius: 3px;
}
/* ── Effect canvas (petals / fireworks) — overlays the full image ── */
.wp-lb-effect-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10; /* above the image and text overlay */
}
/* ── Image + overlay wrapper ────────────────────────────────── */
.wp-lb-img-wrap {
position: relative;
width: 100%;
line-height: 0;
}
/* Outfit image */
.wp-lb-img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ═══════════════════════════════════════════════════════════════
TEXT OVERLAY — sits in the intentionally blank top portion
of each _inside.png image (~38–45% of image height)
═══════════════════════════════════════════════════════════════ */
.wp-lb-overlay {
position: absolute;
top: 8%; left: 0; right: 0;
/* No fixed height — content flows naturally from top edge */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0 clamp(10px, 7%, 30px) 0;
text-align: center;
pointer-events: none;
}
/* ── Event name — the dominant headline ─────────────────────── */
.wp-lb-ov-event {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(1.785rem, 8.5vw, 2.89rem); /* -15% */
letter-spacing: 0.14em;
line-height: 1.0;
margin: 0 0 clamp(4px, 1.2%, 10px);
opacity: 0;
animation: none;
/* text-shadow added per-theme below */
}
/* ── Tagline — italic, editorial ─────────────────────────────── */
.wp-lb-ov-tagline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.88rem, 3.4vw, 1.18rem);
letter-spacing: 0.04em;
line-height: 1.3;
margin: 0 0 clamp(8px, 2.2%, 18px);
opacity: 0;
animation: none;
}
/* ── Attire block — stacked label + bold detail ─────────────── */
.wp-lb-ov-attire-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
opacity: 0;
animation: none;
}
.wp-lb-ov-attire-label {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(0.52rem, 1.5vw, 0.65rem);
letter-spacing: 0.36em;
text-transform: uppercase;
}
.wp-lb-ov-attire {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(0.80rem, 3vw, 1.08rem);
letter-spacing: 0.12em;
line-height: 1.55;
text-align: center;
}
/* ── Entrance animations (triggered via .is-animated class) ─── */
@keyframes wpOvLetterExpand {
from {
opacity: 0;
letter-spacing: 0.40em;
transform: translateY(-10px) scale(0.96);
}
to {
opacity: 1;
letter-spacing: 0.14em;
transform: translateY(0) scale(1);
}
}
@keyframes wpOvGlideUp {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes wpOvRiseIn {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.wp-lb-overlay.is-animated .wp-lb-ov-event {
animation: wpOvLetterExpand 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.wp-lb-overlay.is-animated .wp-lb-ov-tagline {
animation: wpOvGlideUp 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}
.wp-lb-overlay.is-animated .wp-lb-ov-attire-wrap {
animation: wpOvRiseIn 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}
/* ── Colour themes ───────────────────────────────────────────── */
/* DARK (Sangeet night sky · Gala midnight navy) */
.wp-lb-overlay[data-theme="dark"] .wp-lb-ov-event {
color: #EDD28A;
text-shadow: 0 2px 20px rgba(0,0,0,0.60);
}
.wp-lb-overlay[data-theme="dark"] .wp-lb-ov-tagline {
color: #F5EDD6;
text-shadow: 0 1px 10px rgba(0,0,0,0.50);
}
.wp-lb-overlay[data-theme="dark"] .wp-lb-ov-attire-label { color: rgba(212,169,106,0.72); }
.wp-lb-overlay[data-theme="dark"] .wp-lb-ov-attire { color: #EDD28A; }
/* LIGHT (Haldi warm cream) */
.wp-lb-overlay[data-theme="light"] .wp-lb-ov-event {
color: #5A2C0E;
letter-spacing: 0.18em; /* slightly looser on light bg */
}
.wp-lb-overlay[data-theme="light"] .wp-lb-ov-tagline { color: #7A4020; }
.wp-lb-overlay[data-theme="light"] .wp-lb-ov-attire-label { color: rgba(107,58,42,0.65); }
.wp-lb-overlay[data-theme="light"] .wp-lb-ov-attire { color: #6B3A2A; }
/* LIGHT-BLUSH (Wedding soft rose-peach) */
.wp-lb-overlay[data-theme="light-blush"] .wp-lb-ov-event {
color: #6B1A3A;
letter-spacing: 0.18em;
}
.wp-lb-overlay[data-theme="light-blush"] .wp-lb-ov-tagline { color: #7D2247; }
.wp-lb-overlay[data-theme="light-blush"] .wp-lb-ov-attire-label { color: rgba(107,26,58,0.60); }
.wp-lb-overlay[data-theme="light-blush"] .wp-lb-ov-attire { color: #7B2040; }
/* letter-spacing override for dark theme in the expand animation */
.wp-lb-overlay[data-theme="light"].is-animated .wp-lb-ov-event,
.wp-lb-overlay[data-theme="light-blush"].is-animated .wp-lb-ov-event {
animation-name: wpOvLetterExpandLoose;
}
@keyframes wpOvLetterExpandLoose {
from {
opacity: 0;
letter-spacing: 0.44em;
transform: translateY(-10px) scale(0.96);
}
to {
opacity: 1;
letter-spacing: 0.18em;
transform: translateY(0) scale(1);
}
}
/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 480px) {
.wp-heading { font-size: clamp(1.1rem, 5.5vw, 1.65rem); }
.wp-subheading { font-size: clamp(0.50rem, 2.5vw, 0.70rem); }
.wp-card-title-text { font-size: clamp(0.52rem, 2.4vw, 0.78rem); }
.wp-card-tap-text { font-size: clamp(0.37rem, 1.15vw, 0.575rem); }
.wp-lb-panel { width: min(94vw, 370px); }
.wp-lb-ov-event { font-size: clamp(1.49rem, 7.65vw, 2.21rem); }
}
/* ══════════════════════════════════════════════════════════════
REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.ev-card, .ev-photo-bg, .ev-ghost {
transition-duration: 0.001ms !important;
animation: none !important;
}
.wp-card-img {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ══════════════════════════════════════════════════════════════
LANDSCAPE
══════════════════════════════════════════════════════════════ */
@media (max-height: 520px) {
.ev-card, .ev-ghost { width: clamp(120px, 36vw, 180px); }
.ev-heading-title { font-size: 1.6rem; }
.ev-mood { display: none; }
}
/* ══════════════════════════════════════════════════════════════
LOVE & BLESSINGS SECTION
══════════════════════════════════════════════════════════════ */
.blessings-section {
position: relative;
width: 100%;
overflow: hidden;
}
.blessings-wrap {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* Full-width background frame image */
.blessings-bg-img {
display: block;
width: 100%;
height: auto;
user-select: none;
pointer-events: none;
}
/* Text overlay — positioned inside the cream arch frame
Frame occupies approx: left 12%, right 12%, top 9%, bottom 12% */
.blessings-content {
position: absolute;
top: 12.5%;
left: 13%;
right: 13%;
bottom: 8.5%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
padding: 6% 6% 4%;
/* Hide scrollbar visually but keep scrollable */
scrollbar-width: none;
-ms-overflow-style: none;
}
.blessings-content::-webkit-scrollbar { display: none; }
/* ── Heading ── */
.blessings-heading {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(1.45rem, 6vw, 2.2rem);
letter-spacing: 0.18em;
color: #3a2a18;
line-height: 1.1;
margin: 0 0 clamp(4px, 1.5%, 10px);
}
/* ── Subtext ── */
.blessings-subtext {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: clamp(0.72rem, 2.5vw, 0.95rem);
color: var(--muted);
letter-spacing: 0.04em;
margin: 0 0 clamp(6px, 2%, 14px);
}
/* ── Thin gold divider ── */
.blessings-divider {
display: flex;
align-items: center;
gap: 6px;
width: 70%;
margin: 0 auto clamp(8px, 2.5%, 18px);
}
.blessings-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #b8935a, transparent);
}
.blessings-divider-gem {
color: #b8935a;
font-size: 5px;
}
/* ── Body — family groups ── */
.blessings-body {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(8px, 2.5%, 18px);
}
.blessings-group {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Group label e.g. "With Best Compliments" */
.blessings-group-label {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(0.55rem, 1.8vw, 0.72rem);
letter-spacing: 0.20em;
text-transform: uppercase;
color: #b8935a;
margin: 0 0 clamp(3px, 1%, 7px);
}
/* Individual names */
.blessings-name {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(0.68rem, 2.2vw, 0.88rem);
color: #3a2a18;
letter-spacing: 0.02em;
line-height: 1.45;
margin: 0;
}
/* Brand names get a slight emphasis */
.blessings-name--brand {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
letter-spacing: 0.08em;
font-size: clamp(0.65rem, 2vw, 0.84rem);
}
/* Regards group — add a fine top separator */
.blessings-group--regards {
border-top: 1px solid rgba(184, 147, 90, 0.25);
padding-top: clamp(6px, 1.8%, 12px);
margin-top: clamp(2px, 0.8%, 6px);
}
/* ══════════════════════════════════════════════════════════════
LOVE & BLESSINGS — ANIMATIONS
══════════════════════════════════════════════════════════════ */
/* All animated elements start hidden */
.blessings-heading,
.blessings-subtext,
.blessings-divider,
.blessings-group {
opacity: 0;
}
/* ── Keyframes ── */
/* Heading: letter-spacing expand + rise */
@keyframes blHeadingReveal {
from {
opacity: 0;
letter-spacing: 0.45em;
transform: translateY(-14px) scale(0.97);
}
to {
opacity: 1;
letter-spacing: 0.18em;
transform: translateY(0) scale(1);
}
}
/* Subtext & divider: soft glide up */
@keyframes blGlideUp {
from { opacity: 0; transform: translateY(16px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Group names: gentle rise with a golden shimmer flash */
@keyframes blGroupRise {
0% { opacity: 0; transform: translateY(22px) scale(0.97); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Gold shimmer sweep on the heading after it appears */
@keyframes blShimmerSweep {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* ── Active state — triggered by JS via .bl-is-visible on section ── */
.blessings-section.bl-is-visible .blessings-heading {
animation: blHeadingReveal 0.90s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
/* Shimmer sweep on heading text after it settles */
.blessings-section.bl-is-visible .blessings-heading {
background: linear-gradient(
100deg,
#3a2a18 30%,
#c9a75c 48%,
#edd28a 54%,
#c9a75c 60%,
#3a2a18 72%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation:
blHeadingReveal 0.90s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both,
blShimmerSweep 1.60s ease-in-out 1.00s both;
}
.blessings-section.bl-is-visible .blessings-subtext {
animation: blGlideUp 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.blessings-section.bl-is-visible .blessings-divider {
animation: blGlideUp 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}
/* Divider lines expand from center */
.blessings-divider-line {
transform: scaleX(0);
transform-origin: center;
transition: none;
}
.blessings-section.bl-is-visible .blessings-divider-line {
animation: blGlideUp 0s linear 0s both; /* overridden below */
}
@keyframes blLineExpand {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
.blessings-section.bl-is-visible .blessings-divider-line {
animation: blLineExpand 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}
/* Staggered group reveals */
.blessings-section.bl-is-visible .blessings-group:nth-child(1) {
animation: blGroupRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.00s both;
}
.blessings-section.bl-is-visible .blessings-group:nth-child(2) {
animation: blGroupRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.22s both;
}
.blessings-section.bl-is-visible .blessings-group:nth-child(3) {
animation: blGroupRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.44s both;
}
.blessings-section.bl-is-visible .blessings-group:nth-child(4) {
animation: blGroupRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.62s both;
}
.blessings-section.bl-is-visible .blessings-group:nth-child(5) {
animation: blGroupRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.80s both;
}
/* Group label gets a gentle gold glow pulse after it appears */
@keyframes blLabelGlow {
0%, 100% { text-shadow: none; }
50% { text-shadow: 0 0 12px rgba(184, 147, 90, 0.55); }
}
.blessings-section.bl-is-visible .blessings-group-label {
animation: blLabelGlow 2.4s ease-in-out 2.2s infinite;
}
/* ══════════════════════════════════════════════════════════════
RSVP SECTION
══════════════════════════════════════════════════════════════ */
.rsvp-section {
position: relative;
width: 100%;
overflow: hidden;
}
.rsvp-wrap {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* Full-width background frame image */
.rsvp-bg-img {
display: block;
width: 100%;
height: auto;
user-select: none;
pointer-events: none;
}
/* ── Content overlay — inside the ivory arch ──
Tuned to rsvp_bg.png frame geometry. Adjust these % values
if you need to shift the content area up/down/in/out. */
.rsvp-content {
position: absolute;
top: 20%;
left: 14%;
right: 14%;
bottom: 9%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5% 4% 4%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.rsvp-content::-webkit-scrollbar { display: none; }
/* Whisper-thin ivory veil behind cards for legibility */
.rsvp-content::before {
content: '';
position: absolute;
inset: 8% 4%;
border-radius: 4px;
background: rgba(255, 252, 242, 0.32);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: none;
}
/* ── Heading ── */
.rsvp-heading {
position: relative;
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(1.6rem, 7vw, 2.6rem);
letter-spacing: 0.26em;
color: #3a2a18;
line-height: 1;
margin: 0 0 clamp(4px, 1.5vw, 10px);
opacity: 0;
}
/* ── Subtext ── */
.rsvp-subtext {
position: relative;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.68rem, 2.6vw, 0.96rem);
color: var(--muted);
letter-spacing: 0.03em;
line-height: 1.4;
margin: 0 0 clamp(8px, 2.5vw, 16px);
opacity: 0;
}
/* ── Thin gold divider ── */
.rsvp-divider {
position: relative;
display: flex;
align-items: center;
gap: 6px;
width: 65%;
margin: 0 auto clamp(10px, 3vw, 20px);
opacity: 0;
}
.rsvp-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #b8935a, transparent);
transform: scaleX(0);
transform-origin: center;
}
.rsvp-divider-gem {
color: #b8935a;
font-size: 5px;
flex-shrink: 0;
}
/* ── Contact cards ── */
.rsvp-contacts {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(6px, 2vw, 11px);
}
.rsvp-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: clamp(8px, 2.5vw, 12px) clamp(10px, 3vw, 16px);
background: rgba(255, 252, 240, 0.72);
border: 1px solid rgba(184, 147, 90, 0.22);
border-radius: 6px;
box-shadow:
0 2px 12px rgba(174, 132, 64, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
text-align: left;
opacity: 0;
transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.rsvp-card:hover,
.rsvp-card:focus-within {
background: rgba(255, 252, 240, 0.92);
border-color: rgba(184, 147, 90, 0.44);
box-shadow:
0 4px 20px rgba(174, 132, 64, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
/* Card info block */
.rsvp-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rsvp-card-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
font-size: clamp(0.80rem, 3.2vw, 1.05rem);
color: #3a2a18;
letter-spacing: 0.03em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rsvp-card-phone {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(0.60rem, 2.2vw, 0.78rem);
color: var(--muted);
letter-spacing: 0.06em;
font-style: italic;
}
/* Card action buttons */
.rsvp-card-actions {
display: flex;
gap: clamp(6px, 1.5vw, 10px);
flex-shrink: 0;
}
.rsvp-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: clamp(30px, 8vw, 38px);
height: clamp(30px, 8vw, 38px);
border-radius: 50%;
border: 1px solid rgba(184, 147, 90, 0.30);
text-decoration: none;
transition:
background 0.22s ease,
border-color 0.22s ease,
transform 0.18s ease,
box-shadow 0.22s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.rsvp-action-btn svg {
width: clamp(13px, 3.5vw, 16px);
height: clamp(13px, 3.5vw, 16px);
display: block;
}
/* Phone button */
.rsvp-action-btn--phone {
background: rgba(255, 252, 240, 0.80);
color: #ae8440;
}
.rsvp-action-btn--phone:hover,
.rsvp-action-btn--phone:focus-visible {
background: rgba(241, 223, 184, 0.72);
border-color: rgba(174, 132, 64, 0.58);
color: #8a6524;
transform: scale(1.08);
box-shadow: 0 2px 12px rgba(174, 132, 64, 0.24);
}
.rsvp-action-btn--phone:active { transform: scale(0.94); }
/* WhatsApp button */
.rsvp-action-btn--wa {
background: rgba(240, 250, 242, 0.80);
color: #4a8c5c;
border-color: rgba(74, 140, 92, 0.28);
}
.rsvp-action-btn--wa:hover,
.rsvp-action-btn--wa:focus-visible {
background: rgba(220, 242, 226, 0.82);
border-color: rgba(74, 140, 92, 0.52);
color: #357047;
transform: scale(1.08);
box-shadow: 0 2px 12px rgba(74, 140, 92, 0.20);
}
.rsvp-action-btn--wa:active { transform: scale(0.94); }
/* ── Closing note ── */
.rsvp-closing {
position: relative;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.56rem, 1.9vw, 0.72rem);
color: rgba(128, 106, 80, 0.68);
letter-spacing: 0.05em;
margin-top: clamp(8px, 2.5vw, 14px);
opacity: 0;
}
/* ══════════════════════════════════════════════════════════════
RSVP — ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes rsvpHeadingReveal {
from {
opacity: 0;
letter-spacing: 0.48em;
transform: translateY(-12px) scale(0.97);
}
to {
opacity: 1;
letter-spacing: 0.26em;
transform: translateY(0) scale(1);
}
}
@keyframes rsvpShimmerSweep {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes rsvpGlideUp {
from { opacity: 0; transform: translateY(16px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rsvpLineExpand {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
@keyframes rsvpCardRise {
0% { opacity: 0; transform: translateY(20px) scale(0.97); }
65% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Active state — added by IntersectionObserver ── */
.rsvp-section.rsvp-visible .rsvp-heading {
background: linear-gradient(
100deg,
#3a2a18 28%,
#c9a75c 46%,
#edd28a 52%,
#c9a75c 58%,
#3a2a18 74%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation:
rsvpHeadingReveal 0.90s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both,
rsvpShimmerSweep 1.60s ease-in-out 1.00s both;
}
.rsvp-section.rsvp-visible .rsvp-subtext {
animation: rsvpGlideUp 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.rsvp-section.rsvp-visible .rsvp-divider {
animation: rsvpGlideUp 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}
.rsvp-section.rsvp-visible .rsvp-divider-line {
animation: rsvpLineExpand 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both;
}
.rsvp-section.rsvp-visible .rsvp-card--1 {
animation: rsvpCardRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}
.rsvp-section.rsvp-visible .rsvp-card--2 {
animation: rsvpCardRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.26s both;
}
.rsvp-section.rsvp-visible .rsvp-card--3 {
animation: rsvpCardRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.46s both;
}
.rsvp-section.rsvp-visible .rsvp-closing {
animation: rsvpGlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.70s both;
}
/* ══════════════════════════════════════════════════════════════
RSVP — REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.rsvp-heading,
.rsvp-subtext,
.rsvp-divider,
.rsvp-divider-line,
.rsvp-card,
.rsvp-closing {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ══════════════════════════════════════════════════════════════
DESTINATION / MAP SECTION
Sits after RSVP, before the footer. Reuses the ivory-champagne
palette + gold accents so it reads as part of the closing flow.
══════════════════════════════════════════════════════════════ */
.dest-section {
position: relative;
width: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
isolation: isolate;
padding: clamp(48px, 11svh, 96px) 22px clamp(0px, 2svh, 24px);
/* Same ivory→champagne family used through the closing sections */
background:
radial-gradient(ellipse 80% 50% at 50% 8%, rgba(255, 250, 232, 0.85), rgba(255, 250, 232, 0) 64%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(217, 189, 122, 0.16), rgba(217, 189, 122, 0) 60%),
linear-gradient(180deg, var(--ivory) 0%, #f6efe0 52%, #f1e6cf 100%);
}
/* ── Dotted travel route + glowing dots (decorative background) ── */
.dest-route {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.2s ease 0.3s;
}
.dest-section.dest-visible .dest-route { opacity: 1; }
.dest-route svg {
width: 100%;
height: 100%;
display: block;
}
.dest-route-path {
fill: none;
stroke: rgba(174, 132, 64, 0.42);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 1.5 9;
stroke-dashoffset: 0;
}
.dest-section.dest-visible .dest-route-path {
animation: destRouteFlow 14s linear infinite;
}
@keyframes destRouteFlow {
to { stroke-dashoffset: -210; }
}
.dest-route-dot {
fill: #e8c876;
opacity: 0.55;
}
.dest-section.dest-visible .dest-route-dot {
animation: destDotGlow 3.2s ease-in-out infinite;
}
.dest-route-dot:nth-of-type(1) { animation-delay: 0s; }
.dest-route-dot:nth-of-type(2) { animation-delay: 0.5s; }
.dest-route-dot:nth-of-type(3) { animation-delay: 1.0s; }
.dest-route-dot:nth-of-type(4) { animation-delay: 1.5s; }
.dest-route-dot:nth-of-type(5) { animation-delay: 2.0s; }
.dest-route-dot:nth-of-type(6) { animation-delay: 2.5s; }
@keyframes destDotGlow {
0%, 100% { opacity: 0.30; filter: drop-shadow(0 0 0 rgba(232, 200, 118, 0)); }
50% { opacity: 0.95; filter: drop-shadow(0 0 5px rgba(232, 200, 118, 0.9)); }
}
/* ── Centered content column ── */
.dest-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1 1 auto;
}
/* Small uppercase heading */
.dest-eyebrow {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
font-size: clamp(0.72rem, 3.2vw, 0.96rem);
letter-spacing: 0.42em;
text-indent: 0.42em;
color: var(--gold);
margin: 0;
opacity: 0;
}
/* Tiny decorative triangle */
.dest-tri {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid rgba(174, 132, 64, 0.55);
margin: clamp(10px, 2.4vw, 16px) auto clamp(16px, 4vw, 28px);
opacity: 0;
}
/* Location pin */
.dest-pin {
display: inline-flex;
border: 0;
background: none;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
opacity: 0;
}
.dest-pin img {
width: clamp(60px, 17vw, 88px);
height: auto;
display: block;
filter: drop-shadow(0 8px 18px rgba(174, 132, 64, 0.28));
transition: transform 0.3s ease;
}
.dest-section.dest-visible .dest-pin img {
animation: destPinFloat 4.2s ease-in-out 1.2s infinite;
}
.dest-pin:hover img,
.dest-pin:focus-visible img { transform: translateY(-4px) scale(1.05); }
@keyframes destPinFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
/* Venue title */
.dest-venue {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(1.5rem, 6.6vw, 2.3rem);
line-height: 1.12;
letter-spacing: 0.015em;
color: #2f4239; /* deep teal-green ink */
margin: clamp(14px, 3.4vw, 24px) 0 clamp(8px, 2vw, 12px);
opacity: 0;
}
/* Address */
.dest-address {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.84rem, 3.4vw, 1.05rem);
line-height: 1.5;
color: var(--muted);
max-width: 22em;
margin: 0 auto;
opacity: 0;
}
/* CTA */
.dest-cta {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin: clamp(20px, 4.4vw, 30px) 0 clamp(8px, 2vw, 12px);
padding: clamp(10px, 2.6vw, 13px) clamp(20px, 5vw, 30px);
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
font-size: clamp(0.74rem, 3vw, 0.92rem);
letter-spacing: 0.22em;
text-indent: 0.22em;
text-decoration: none;
color: #2f4239;
background: linear-gradient(135deg, rgba(255, 252, 242, 0.92), rgba(241, 223, 184, 0.78));
border: 1px solid rgba(174, 132, 64, 0.42);
border-radius: 999px;
box-shadow:
0 4px 18px rgba(174, 132, 64, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
position: relative;
overflow: hidden;
opacity: 0;
-webkit-tap-highlight-color: transparent;
transition: transform 0.2s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.dest-cta:hover,
.dest-cta:focus-visible {
transform: translateY(-2px);
border-color: rgba(174, 132, 64, 0.7);
box-shadow:
0 8px 26px rgba(174, 132, 64, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dest-cta:active { transform: translateY(0) scale(0.98); }
.dest-cta-arrow { transition: transform 0.24s ease; }
.dest-cta:hover .dest-cta-arrow { transform: translateX(4px); }
/* Shimmer sweep across the CTA */
.dest-cta::after {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 45%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 248, 214, 0.75), transparent);
transform: skewX(-18deg);
pointer-events: none;
}
.dest-section.dest-visible .dest-cta::after {
animation: destShimmer 3.6s ease-in-out 1.6s infinite;
}
@keyframes destShimmer {
0% { left: -60%; }
55% { left: 130%; }
100% { left: 130%; }
}
/* Helper text */
.dest-helper {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(0.62rem, 2.4vw, 0.78rem);
letter-spacing: 0.04em;
color: rgba(128, 106, 80, 0.7);
margin: 0;
opacity: 0;
}
/* ── Bottom venue illustration ── */
.dest-venue-art {
position: relative;
z-index: 1;
width: 100%;
max-width: 760px;
margin: clamp(26px, 6vw, 48px) auto 0;
pointer-events: none;
opacity: 0;
}
.dest-venue-art img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 -6px 28px rgba(174, 132, 64, 0.12));
}
.dest-section.dest-visible .dest-venue-art img {
animation: destArtFloat 9s ease-in-out 1.4s infinite;
}
@keyframes destArtFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ══════════════════════════════════════════════════════════════
DESTINATION — REVEAL ANIMATIONS (IntersectionObserver)
══════════════════════════════════════════════════════════════ */
@keyframes destFadeUp {
from { opacity: 0; transform: translateY(22px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes destPinIn {
from { opacity: 0; transform: translateY(24px) scale(0.86); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dest-section.dest-visible .dest-eyebrow { animation: destFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.dest-section.dest-visible .dest-tri { animation: destFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.dest-section.dest-visible .dest-pin { animation: destPinIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
.dest-section.dest-visible .dest-venue { animation: destFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.62s both; }
.dest-section.dest-visible .dest-address { animation: destFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.78s both; }
.dest-section.dest-visible .dest-cta { animation: destFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.94s both; }
.dest-section.dest-visible .dest-helper { animation: destFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 1.10s both; }
.dest-section.dest-visible .dest-venue-art { animation: destFadeUp 1.1s cubic-bezier(0.22,1,0.36,1) 1.20s both; }
/* keep float loops alive after the entrance animation finishes */
.dest-section.dest-visible .dest-pin { animation: destPinIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.42s both, destPinFloat 4.2s ease-in-out 1.6s infinite; }
.dest-section.dest-visible .dest-venue-art { animation: destFadeUp 1.1s cubic-bezier(0.22,1,0.36,1) 1.20s both, destArtFloat 9s ease-in-out 2.6s infinite; }
@media (prefers-reduced-motion: reduce) {
.dest-eyebrow, .dest-tri, .dest-pin, .dest-pin img,
.dest-venue, .dest-address, .dest-cta, .dest-cta::after,
.dest-helper, .dest-venue-art, .dest-venue-art img,
.dest-route, .dest-route-path, .dest-route-dot {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.dest-route { opacity: 1 !important; }
}