/* Temple Door */
:root {
  --teak: #2a140b;
  --teak-2: #3a1d0e;
  --maroon: #5e1414;
  --gold: #e0a83a;
  --gold-soft: #f3d38a;
  --parchment: #f6ead2;
  --bg: var(--teak);
  --ink: #f6ead2;
  --muted: rgba(246, 234, 210, .72);
  --accent: var(--gold);
  --accent-ink: #2a140b;
  --card: #3a1d0e;
  --line: rgba(224, 168, 58, .35);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-script: "Cormorant Garamond", Georgia, serif;
  --font-label: "Cinzel", Georgia, serif;
  --font-ta: "Noto Serif Tamil", serif;
  --kolam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23e0a83a' stroke-width='1' opacity='.5'%3E%3Cpath d='M36 6c16 0 30 14 30 30S52 66 36 66 6 52 6 36 20 6 36 6z' stroke-dasharray='2 5'/%3E%3Cpath d='M36 18l18 18-18 18-18-18z'/%3E%3Cpath d='M0 0q36 36 0 72M72 0q-36 36 0 72'/%3E%3C/g%3E%3Cg fill='%23e0a83a' opacity='.6'%3E%3Ccircle cx='36' cy='36' r='2'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='72' cy='0' r='2'/%3E%3Ccircle cx='0' cy='72' r='2'/%3E%3Ccircle cx='72' cy='72' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
body { font-size: 19px; }

/* ---------- intro: doors ---------- */
.td-intro {
  background: radial-gradient(ellipse at center, #3a1a0a 0%, #120703 75%);
  perspective: 1800px; overflow: hidden;
  transition: opacity 1s ease 1.7s, visibility 0s linear 2.7s;
}
.td-light {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, #fff4d6 0%, #ffcf7a 30%, #b5651d 60%, transparent 80%);
  opacity: 0; transition: opacity 1.6s ease .3s;
}
.td-doors { position: absolute; inset: 0; display: flex; transform-style: preserve-3d; transition: transform 2.4s cubic-bezier(.6, 0, .2, 1); }
.td-door {
  position: relative; flex: 1; height: 100%; transform-style: preserve-3d;
  transition: transform 2s cubic-bezier(.7, 0, .25, 1) .25s, filter 2s ease .25s;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .6);
}
.td-door svg { width: 100%; height: 100%; }
.td-door-l { transform-origin: left center; }
.td-door-r { transform-origin: right center; }
.td-door-r svg { transform: scaleX(-1); }
.td-door-l::after, .td-door-r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(#000, #2a1206, #000);
}
.td-door-l::after { right: 0; }
.td-door-r::after { left: 0; }

.td-thoranam { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(92px, 14vw, 150px); z-index: 3; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.td-strand { position: absolute; top: 0; width: clamp(18px, 2.6vw, 30px); height: 72vh; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.td-strand-l { left: clamp(8px, 2vw, 24px); }
.td-strand-r { right: clamp(8px, 2vw, 24px); }
.td-lamp { position: absolute; bottom: 2vh; width: clamp(64px, 11vw, 120px); height: auto; z-index: 3; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.td-lamp-l { left: clamp(28px, 6vw, 90px); }
.td-lamp-r { right: clamp(28px, 6vw, 90px); }
.td-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite; }
.td-flame.d2 { animation-delay: -.5s; animation-duration: 1.9s; }
.td-flame.d3 { animation-delay: -1.1s; }
.td-halo { animation: halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(.94, 1.08) skewX(2deg); }
  50% { transform: scale(1.04, .95) skewX(-2deg); }
  75% { transform: scale(.97, 1.05) skewX(1deg); }
}
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.td-cover {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px 24px 80px; color: var(--parchment);
  background: radial-gradient(ellipse 46% 36% at 50% 52%, rgba(18, 7, 3, .78), transparent 75%);
  transition: opacity .6s ease, transform .8s ease;
}
.td-cover-kicker { font-style: italic; font-size: clamp(18px, 2.4vw, 24px); color: var(--gold-soft); }
.td-cover-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 10vw, 92px); line-height: 1.05; margin: 6px 0;
  background: linear-gradient(180deg, #fff3c4, #e0a83a 55%, #a8721c); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 30px rgba(224, 168, 58, .25);
}
.td-cover-title[lang="ta"], .td-cover-title [lang="ta"] { font-size: clamp(32px, 7vw, 60px); line-height: 1.4; }
.td-cover-sub { font-size: clamp(18px, 2.6vw, 26px); letter-spacing: .06em; }
.td-cta {
  margin-top: 32px; background: linear-gradient(180deg, #f6d27a, #c98d26); color: #2a140b; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 236, 180, .6) inset, 0 12px 30px -8px rgba(224, 168, 58, .6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 236, 180, .6) inset, 0 0 0 0 rgba(224, 168, 58, .5); } 50% { box-shadow: 0 0 0 1px rgba(255, 236, 180, .6) inset, 0 0 0 14px rgba(224, 168, 58, 0); } }
.td-cover-hint { margin-top: 14px; font-size: 14px; font-style: italic; opacity: .75; }
.td-lang {
  position: absolute; top: clamp(100px, 15vw, 160px); right: 16px; background: rgba(18, 7, 3, .55); border: 1px solid var(--line);
  color: var(--gold-soft); border-radius: 999px; padding: 8px 14px; font-size: 14px;
}

html.intro-opening .td-cover { opacity: 0; transform: scale(.96); pointer-events: none; }
html.intro-opening .td-door-l { transform: rotateY(-104deg); filter: brightness(.6); }
html.intro-opening .td-door-r { transform: rotateY(104deg); filter: brightness(.6); }
html.intro-opening .td-doors { transform: translateZ(380px); }
html.intro-opening .td-light { opacity: 1; }
html.intro-opening .td-intro { opacity: 0; visibility: hidden; }
html.intro-opening .td-thoranam, html.intro-opening .td-strand, html.intro-opening .td-lamp { transition: opacity 1s ease 1s; opacity: 0; }

/* ---------- hero ---------- */
.td-hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: clamp(150px, 20vw, 210px) var(--gutter) 90px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(224, 168, 58, .16), transparent 70%),
    var(--kolam) center / 72px 72px,
    linear-gradient(180deg, #1c0c05, var(--teak) 40%, #24110a);
  background-blend-mode: normal, soft-light, normal;
}
.td-hero::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--line); border-radius: 4px; pointer-events: none; }
.td-thoranam-hero { position: absolute; }
.td-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.td-crest { width: 110px; margin: 0 auto 18px; color: var(--gold); }
.td-lead { font-style: italic; font-size: clamp(19px, 2.6vw, 24px); color: var(--muted); max-width: 560px; margin: 14px auto 36px; }
.td-hero .couple { gap: 8px; }
.td-hero .name {
  font-size: clamp(54px, 12vw, 104px); font-weight: 500;
  background: linear-gradient(180deg, #fff3c4 10%, #e0a83a 60%, #b07a22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.td-hero .name [lang="ta"] { font-size: .62em; line-height: 1.5; display: inline-block; }
.td-hero .parents { color: var(--gold-soft); opacity: .85; font-size: 17px; }
.td-hero .weds { font-family: var(--font-label); font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); margin: 14px 0; display: flex; align-items: center; gap: 16px; }
.td-hero .weds::before, .td-hero .weds::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.td-hero .weds::after { transform: scaleX(-1); }
.td-hero-date { margin-top: 36px; font-family: var(--font-label); letter-spacing: .26em; font-size: clamp(15px, 2vw, 19px); color: var(--gold-soft); text-transform: uppercase; }
.td-hero-date [lang="ta"] { letter-spacing: .02em; }
.td-scroll { display: inline-block; margin-top: 44px; font-family: var(--font-label); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.td-scroll span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- bands ---------- */
.td-band { position: relative; }
.td-band-light {
  --ink: #3a1d0e; --muted: #7a5a40; --card: #fffaf0; --line: rgba(122, 59, 22, .22); --accent: #9a5b14; --accent-ink: #fff8ea;
  color: var(--ink);
  background: var(--kolam) center / 72px 72px, linear-gradient(180deg, #f8eedb, #f1e1c2);
  background-blend-mode: multiply, normal;
}
.td-band-light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 238, 219, .9), rgba(241, 225, 194, .82)); pointer-events: none; }
.td-band > * { position: relative; }
.td-band-dark { background: linear-gradient(180deg, var(--teak), #1c0c05); }
.td-band-maroon { background: radial-gradient(ellipse at 50% 0%, #7a1f1f, var(--maroon) 55%, #3a0b0b); }
.td-divider { width: min(320px, 70%); margin: 0 auto; padding-top: 56px; color: var(--accent); }
.td-band-light .sec h2 { color: #5e1f0e; }
.td-band-dark .sec h2, .td-band-maroon .sec h2 { color: var(--gold-soft); }

/* date */
.td-band-light .sec-date { padding-top: 40px; }
.scratch { --foil-1: #b07a22; --foil-2: #f6dc8b; --foil-3: #8a5a12; --burst: #e0a83a, #f6dc8b, #c0392b, #f08a24, #fff; }
.td-band-light .scratch { background: #fffaf0; border: 1px solid rgba(154, 91, 20, .4); box-shadow: 0 0 0 6px #fffaf0, 0 0 0 7px rgba(154, 91, 20, .35), 0 24px 50px -24px rgba(58, 29, 14, .5); }
.td-band-light .dcell b { color: #5e1f0e; }

/* events */
.td-band-dark .event {
  background: linear-gradient(180deg, rgba(224, 168, 58, .08), rgba(224, 168, 58, .02));
  border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 4vw, 30px);
}
.td-band-dark .event.is-main { border-color: rgba(224, 168, 58, .7); box-shadow: 0 0 0 4px rgba(224, 168, 58, .08); }
.event-date { border-right: 1px solid var(--line); padding-right: clamp(14px, 3vw, 26px); }
.event-date b { color: var(--gold); }
.event-date span { color: var(--gold-soft); }
.td-band-dark .event h3 { color: var(--gold-soft); }
.cal-menu a { background: rgba(0, 0, 0, .2); }

/* venue */
.venue { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px); box-shadow: 0 20px 50px -30px rgba(58, 29, 14, .45); }
.td-band-light .venue h3 { color: #5e1f0e; }
.td-band-dark .venue h3 { color: var(--gold-soft); }

/* countdown */
.cd-cell { background: rgba(0, 0, 0, .22); border: 1px solid rgba(243, 211, 138, .3); }
.cd-cell b { color: var(--gold-soft); }
.td-band-maroon { --muted: rgba(246, 234, 210, .75); }

/* note */
.note { background: var(--card); padding: clamp(32px, 6vw, 60px) clamp(20px, 5vw, 56px); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -10px; border-radius: 4px; }
.td-band-light .note blockquote { color: #5e1f0e; }
.signature { color: #9a5b14; font-style: italic; font-weight: 500; font-family: var(--font-display); }
.sec-story + .sec-note { padding-top: 0; }

/* footer */
.foot-names { color: var(--gold-soft); }
.td-band-dark .btn-ghost, .td-band-maroon .btn-ghost { color: var(--gold-soft); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 14px; display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .event-date b { font-size: 34px; }
  .td-lang { top: auto; bottom: 24px; right: 50%; transform: translateX(50%); }
}

.td-band-light .signature { color: #7a4510; }

.td-band-dark .signature { color: var(--gold-soft); }