/* Bride's welcome (Griha Pravesham) - warm clay, brass and kumkum red: carved doors that swing open, a kolam that draws itself,
   kumkum footprints walking in, flickering brass lamps and drifting embers. */
:root {
  --bg: #fbf3e6; --bg2: #f2e1c6; --dark: #2a1710;
  --accent: #e0a33a; --accent-ink: #9c4a1c; --on-accent: #2a1204;
  --ink: #2e2118; --head: #5b2412; --muted: #6c5a4b; --max: 1120px; --nav-h: 64px;
  --nav-ink: #ffe8c4; --nav-solid: rgba(42, 23, 16, .96); --nav-line: rgba(224, 163, 58, .38); --nav-line2: rgba(224, 163, 58, .75);
  --hero-ink: #ffe8c4; --hero-line: rgba(224, 163, 58, .6); --hero-strong: #fff; --count-bg: rgba(0, 0, 0, .3);
  --card: #fffaf0; --card-line: #ecd6b0; --badge-bg: #fbefd9; --field: #fffaf0; --field-line: #e6d0a8; --ring: rgba(156, 74, 28, .18);
  --on-dark: #f6e4c6; --on-dark-2: #d3bb94;
  --serif: "Marcellus", Georgia, "Times New Roman", serif;
  --sans: "Hind Madurai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tamil-sans: "Hind Madurai", system-ui, sans-serif;
  --tamil-serif: "Tiro Tamil", "Noto Serif Tamil", Georgia, serif;
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes garland { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes flipin { 0% { opacity: .35; transform: rotateX(-70deg); } 100% { opacity: 1; transform: none; } }
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes doorL { 0% { transform: rotateY(0); opacity: 1; visibility: visible; } 72% { transform: rotateY(-104deg); opacity: 1; } 99% { opacity: 0; } 100% { transform: rotateY(-104deg); opacity: 0; visibility: hidden; } }
@keyframes doorR { 0% { transform: rotateY(0); opacity: 1; visibility: visible; } 72% { transform: rotateY(104deg); opacity: 1; } 99% { opacity: 0; } 100% { transform: rotateY(104deg); opacity: 0; visibility: hidden; } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; color: var(--hero-ink); overflow: hidden; isolation: isolate; perspective: 1800px;
  background-color: #2a1710; background-image: radial-gradient(ellipse at 50% 40%, rgba(255, 170, 60, .2) 0%, rgba(255, 170, 60, 0) 55%, rgba(0, 0, 0, .42) 100%); padding: 9.5rem 1.25rem 7rem; }
.door { position: absolute; top: 0; bottom: 0; width: 50.3%; z-index: 9; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.door img { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-l { left: 0; transform-origin: 0 50%; animation: doorL 2.8s .5s cubic-bezier(.65, 0, .25, 1) both; }
.door-r { right: 0; transform-origin: 100% 50%; animation: doorR 2.8s .5s cubic-bezier(.65, 0, .25, 1) both; }
.hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255, 176, 70, .34), rgba(255, 176, 70, 0) 56%); animation: pulse 5s ease-in-out infinite; }
.hero-kolam { position: absolute; left: 50%; top: 52%; width: min(125vw, 920px); aspect-ratio: 1; translate: -50% -50%; opacity: .3; z-index: 0; pointer-events: none; }
.hero-garland { position: absolute; top: var(--nav-h); left: -20px; right: -20px; height: 80px; z-index: 3; pointer-events: none;
  background: url("../images/garland.svg") repeat-x top left / 160px 80px; animation: garland 6s ease-in-out infinite; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.diya-fx { position: absolute; bottom: 92px; width: clamp(64px, 8.5vw, 116px); height: auto; z-index: 3; pointer-events: none; translate: var(--px, 0) var(--py, 0); transition: translate .5s ease-out; }
.dl { left: 5%; } .dr { right: 5%; }
.hero-steps { position: absolute; left: 50%; bottom: 8px; width: min(96%, 1120px); height: auto; translate: -50% 0; z-index: 3; pointer-events: none; opacity: .95; }
.hero-inner { position: relative; z-index: 4; max-width: 900px; }
.hero-inner > * { animation: rise .95s cubic-bezier(.2, .8, .2, 1) both; }
.hero-inner > :nth-child(1) { animation-delay: 1.5s; } .hero-inner > :nth-child(2) { animation-delay: 1.62s; } .hero-inner > :nth-child(3) { animation-delay: 1.76s; }
.hero-inner > :nth-child(4) { animation-delay: 1.9s; } .hero-inner > :nth-child(5) { animation-delay: 2.02s; } .hero-inner > :nth-child(6) { animation-delay: 2.14s; }
.hero-inner > :nth-child(7) { animation-delay: 2.26s; } .hero-inner > :nth-child(8) { animation-delay: 2.38s; } .hero-inner > :nth-child(9) { animation-delay: 2.5s; }
.invocation { font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--accent); letter-spacing: .06em; }
.occasion { margin-top: 1rem; font: 600 clamp(.95rem, 2.4vw, 1.2rem)/1 var(--sans); letter-spacing: .4em; text-transform: uppercase; color: #ffd27a; }
#names { margin-top: .8rem; font: 400 clamp(3.2rem, 11vw, 7rem)/1.06 var(--serif); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; color: #fff; text-shadow: 0 0 40px rgba(255, 170, 60, .45), 0 3px 0 rgba(0, 0, 0, .25); }
#names .amp { color: var(--accent); font-size: .55em; font-style: italic; }
.kicker { margin: 1.2rem auto 0; max-width: 40ch; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: #f1d6a0; }
.hero-line { margin-top: .4rem; font: italic 400 clamp(1.15rem, 2.6vw, 1.5rem)/1.5 var(--serif); color: #ffe3b3; }
.hero-date { margin-top: 1.2rem; font: 400 clamp(1.5rem, 3.6vw, 2.1rem)/1.3 var(--serif); color: #fff; }
.hero-place { margin-top: .3rem; font-size: 1rem; color: #f1d6a0; }
.count b { transform-origin: 50% 0; }
.count b.flip { animation: flipin .55s ease both; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }

/* ---------------------------------------------------------------- ribbon, invitation */
.ribbon { background: linear-gradient(90deg, #c0262d, #d9482f, #c0262d); color: #ffe9c4; overflow: hidden; white-space: nowrap; padding: .85rem 0; border-block: 1px solid rgba(0, 0, 0, .25); }
.ribbon-track { display: inline-flex; gap: 1.8rem; align-items: center; animation: marquee 34s linear infinite; padding-left: 1.8rem; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track > span { font: 600 .95rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.ribbon-track > i { font-style: normal; color: #ffd27a; }
.invite { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.invite .verse-en.big { margin-top: 1rem; font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.6 var(--serif); color: var(--head); }
.invite .divider.lamp { width: 48px; height: 48px; animation: lift 3.2s ease-in-out infinite; }
.lead { font: 400 clamp(1.1rem, 2.3vw, 1.3rem)/1.85 var(--sans); }
html[data-lang="ta"] .lead { font-size: clamp(1.05rem, 2.1vw, 1.2rem); }
.section-head h2::after { content: ""; display: block; width: 0; height: 3px; margin: .8rem auto 0; background: linear-gradient(90deg, transparent, #c0262d, var(--accent), #c0262d, transparent); transition: width 1s .25s ease; }
.section-head.in h2::after { width: 150px; }

/* ---------------------------------------------------------------- people, traditions */
.arch-frame { border-radius: 999px 999px 14px 14px; box-shadow: 0 0 0 6px var(--bg2), 0 0 0 8px var(--accent), 0 24px 44px -26px rgba(91, 36, 18, .55); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.person:hover .arch-frame { transform: translateY(-6px); }
.rituals { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.ritual { background: var(--card); border: 1px solid var(--card-line); border-radius: 22px; padding: 2rem 1.6rem 1.8rem; text-align: center; position: relative; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, opacity .8s ease; }
.ritual::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #c0262d, var(--accent), #c0262d); }
.ritual:hover { transform: translateY(-8px); box-shadow: 0 26px 44px -26px rgba(91, 36, 18, .55); }
.js .ritual.reveal.in { transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), calc(var(--i) * 90ms); }
.r-icon { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.1rem; background: radial-gradient(circle, #fff, #f6e2c0); box-shadow: inset 0 0 0 2px var(--accent); }
.ritual:hover .r-icon img { animation: lift .8s ease; }
.ritual h3 { font: 400 1.5rem/1.25 var(--serif); color: var(--head); }
.ritual p { margin-top: .6rem; color: var(--muted); font-size: .98rem; line-height: 1.65; }

/* ---------------------------------------------------------------- events */
.dark .day { background: rgba(255, 255, 255, .05); border-color: rgba(224, 163, 58, .4); }
.dark .day-title, .dark .timeline h4 { color: #fff; }
.dark .dow, .dark .timeline time { color: var(--accent); }
.dark .timeline p { color: var(--on-dark-2); }
.dark .timeline li { border-color: rgba(224, 163, 58, .25); }
.dark .badge { background: #fbefd9; }
.js .day .timeline li { opacity: 0; transform: translateX(-22px); transition: opacity .7s ease, transform .7s ease; }
.js .day.in .timeline li { opacity: 1; transform: none; }
.timeline li:nth-child(1) { transition-delay: .2s !important; } .timeline li:nth-child(2) { transition-delay: .35s !important; } .timeline li:nth-child(3) { transition-delay: .5s !important; }
.timeline li:nth-child(4) { transition-delay: .65s !important; } .timeline li:nth-child(5) { transition-delay: .8s !important; } .timeline li:nth-child(6) { transition-delay: .95s !important; }
.timeline li:hover .badge { animation: lift .7s ease; }
.btn-ghost:hover { background: rgba(224, 163, 58, .18); }

/* ---------------------------------------------------------------- footer */
.footer { padding-top: 0; position: relative; }
.footer::before { content: ""; display: block; height: 28px; margin-bottom: 3rem; background: #1f100a url("../images/kolam-border.svg") repeat-x center / auto 24px; border-bottom: 1px solid rgba(224, 163, 58, .4); }
.foot-bangles { margin: 0 auto 1rem; filter: invert(1) sepia(.6) brightness(1.3); animation: lift 3.2s ease-in-out infinite; }
.dua-en { margin: .3rem auto 1.8rem; max-width: 50ch; color: var(--on-dark-2); font: italic 400 1.25rem/1.6 var(--serif); }

html[data-lang="ta"] #names { font-size: clamp(2.5rem, 8vw, 4.8rem); line-height: 1.3; }
html[data-lang="ta"] .occasion, html[data-lang="ta"] .kicker { letter-spacing: .05em; text-transform: none; font-size: 1.05rem; }
html[data-lang="ta"] .ribbon-track > span { letter-spacing: .06em; text-transform: none; font-size: 1.05rem; }
html[data-lang="ta"] .hero-line, html[data-lang="ta"] .dua-en { font-style: normal; }
@media (max-width: 760px) { .diya-fx { bottom: 78px; width: 56px; } .hero-steps { bottom: 4px; } .hero-kolam { width: 170vw; } }
@media (max-width: 520px) { .hero { padding-top: 8.6rem; padding-bottom: 6.5rem; } html[data-lang="ta"] #names { font-size: clamp(2.2rem, 10vw, 3rem); } }
@media (prefers-reduced-motion: reduce) { .door { display: none; } }