/* =====================================================
   HAPPY TIHAR — Deepawali 2083 · Eintracht Nepali e.V.
   Premium seasonal section for the home page.
   - Shown automatically between data-show-from / data-show-until
     (see index.html). Preview anytime: index.html?preview=tihar
   - Fonts are self-hosted in assets/fonts (no data sent to Google).
   ===================================================== */

/* ---------- Self-hosted fonts (SIL Open Font License) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/manrope-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Tihar Devanagari"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/noto-serif-devanagari-devanagari-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Tihar Devanagari"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/noto-serif-devanagari-devanagari-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
.th {
  --th-ink:        #05071A;
  --th-night:      #090C26;
  --th-indigo:     #141040;
  --th-plum:       #2A1046;
  --th-ivory:      #FBF5E6;
  --th-ivory-dim:  rgba(251, 245, 230, 0.72);
  --th-gold:       #F2C14E;
  --th-gold-soft:  #F7DE9A;
  --th-gold-deep:  #B8862B;
  --th-saffron:    #FF9F1C;
  --th-rose:       #FF6FA3;
  --th-line:       rgba(242, 193, 78, 0.22);
  --th-glass:      rgba(255, 255, 255, 0.035);
  --th-gold-grad:  linear-gradient(120deg, #FFF4CC 0%, #F2C14E 28%, #B8862B 52%, #F7DE9A 72%, #FFF4CC 100%);
  --th-serif:      "Cormorant Garamond", "Lora", Georgia, serif;
  --th-sans:       "Manrope", "Open Sans", system-ui, sans-serif;
  --th-deva:       "Tihar Devanagari", "Noto Serif Devanagari", serif;
  --th-radius:     22px;
  --th-ease:       cubic-bezier(.2, .7, .2, 1);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--th-ivory);
  font-family: var(--th-sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(255, 159, 28, 0.13), transparent 60%),
    radial-gradient(900px 600px at 10% 30%, rgba(255, 111, 163, 0.08), transparent 60%),
    radial-gradient(1400px 900px at 50% 120%, rgba(242, 193, 78, 0.12), transparent 60%),
    linear-gradient(180deg, var(--th-ink) 0%, var(--th-night) 28%, var(--th-indigo) 62%, var(--th-plum) 100%);
}
.th *, .th *::before, .th *::after { box-sizing: border-box; }

/* film grain + vignette for a cinematic finish */
.th-grain {
  position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: thGrain 1.2s steps(6) infinite;
}
.th-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.th-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- String lights along the top ---------- */
.th-lights { position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 4; pointer-events: none; }
.th-lights svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tl-bulb { animation: thTwinkle 1.8s ease-in-out infinite; }

/* =====================================================
   HERO
   ===================================================== */
.th-hero {
  position: relative;
  min-height: min(900px, 100vh);
  display: flex;
  align-items: center;
  padding: 120px 0 90px;
}
.th-sky {               /* fireworks + rising embers */
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.th-hero .th-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.th-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--th-gold-soft);
}
.th-eyebrow::before {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--th-gold));
}

.th-title {
  margin: 22px 0 8px;
  font-family: var(--th-serif);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--th-ivory);
}
.th-title .th-kicker {
  display: block;
  font-style: italic;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  color: var(--th-ivory-dim);
  margin-bottom: 0.08em;
  padding-left: 0.08em;
}
.th-title .th-word {
  display: block;
  font-size: clamp(5.2rem, 13vw, 10.5rem);
  font-weight: 600;
  background: var(--th-gold-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 40px rgba(242, 193, 78, 0.28));
  animation: thShimmer 7s ease-in-out infinite;
}

.th-deva {
  font-family: var(--th-deva);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  color: var(--th-gold-soft);
  margin: 18px 0 22px;
  letter-spacing: 0.01em;
}
.th-lede {
  max-width: 34em;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
  color: var(--th-ivory-dim);
  margin: 0 0 30px;
}

/* countdown chip */
.th-count {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--th-line);
  border-radius: 16px;
  background: var(--th-glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 30px;
}
.th-count-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--th-saffron);
  box-shadow: 0 0 0 0 rgba(255, 159, 28, 0.6);
  animation: thPulse 2s ease-out infinite;
}
.th-count-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-gold-soft); }
.th-count-time { display: flex; gap: 14px; font-variant-numeric: lining-nums tabular-nums; font-family: var(--th-serif); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--th-ivory); }
.th-count-time span small {
  font-family: var(--th-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--th-ivory-dim); margin-left: 3px; text-transform: uppercase;
}
.th-count-msg { font-family: var(--th-serif); font-style: italic; font-size: 1.45rem; color: var(--th-ivory); }

.th-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.th-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--th-sans); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--th-ease), box-shadow .35s var(--th-ease), background .35s;
}
.th-btn-gold {
  color: #1B1030;
  background: linear-gradient(180deg, #FFE7A3 0%, #F2C14E 55%, #D9A23A 100%);
  box-shadow: 0 10px 30px rgba(242, 193, 78, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 0;
}
.th-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(242, 193, 78, 0.42), inset 0 1px 0 rgba(255,255,255,.6); color: #1B1030; }
.th-btn-ghost {
  color: var(--th-ivory);
  background: transparent;
  border: 1px solid rgba(251, 245, 230, 0.28);
}
.th-btn-ghost:hover { background: rgba(251, 245, 230, 0.08); color: var(--th-ivory); transform: translateY(-2px); }
.th-btn svg { width: 16px; height: 16px; }
.th-hint { font-size: 0.8rem; color: var(--th-ivory-dim); display: inline-flex; align-items: center; gap: 8px; }
.th-hint b { color: var(--th-gold-soft); font-weight: 600; }

/* ---------- Arched illustration (torana window) ---------- */
.th-art { position: relative; margin: 0; }
.th-arch {
  position: relative;
  aspect-ratio: 5 / 5.6;
  border-radius: 999px 999px 28px 28px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(247, 222, 154, 0.9), rgba(184, 134, 43, 0.5) 40%, rgba(247, 222, 154, 0.85) 70%, rgba(184, 134, 43, 0.6));
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(242, 193, 78, 0.18);
}
.th-arch-inner {
  position: relative;
  height: 100%;
  border-radius: 999px 999px 20px 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255, 170, 60, 0.38), transparent 58%),
    radial-gradient(ellipse at 50% 0%, rgba(120, 90, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(9, 12, 38, 0.55) 0%, rgba(20, 16, 64, 0.65) 60%, rgba(42, 16, 70, 0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 204, 0.25), inset 0 0 80px rgba(0, 0, 0, 0.5);
}
.th-arch-inner::before {          /* slowly rotating mandala in the arch sky */
  content: "";
  position: absolute; left: 50%; top: 26%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23F2C14E' stroke-width='.6'><circle cx='100' cy='100' r='96'/><circle cx='100' cy='100' r='86' stroke-dasharray='1 4' stroke-width='1.6' stroke-linecap='round'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='52' stroke-dasharray='8 5' stroke-width='2'/><circle cx='100' cy='100' r='34'/><g id='p'><path d='M100 30 C110 44 110 58 100 70 C90 58 90 44 100 30Z'/></g><use href='%23p' transform='rotate(30 100 100)'/><use href='%23p' transform='rotate(60 100 100)'/><use href='%23p' transform='rotate(90 100 100)'/><use href='%23p' transform='rotate(120 100 100)'/><use href='%23p' transform='rotate(150 100 100)'/><use href='%23p' transform='rotate(180 100 100)'/><use href='%23p' transform='rotate(210 100 100)'/><use href='%23p' transform='rotate(240 100 100)'/><use href='%23p' transform='rotate(270 100 100)'/><use href='%23p' transform='rotate(300 100 100)'/><use href='%23p' transform='rotate(330 100 100)'/></g></svg>") center / contain no-repeat;
  opacity: 0.22;
  animation: thSpin 140s linear infinite;
}
.th-arch-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 48% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 8%, #fff 50%, transparent 51%);
  opacity: 0.7;
  animation: thStars 3.5s ease-in-out infinite alternate;
}
.th-scene {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: auto; display: block;
}
.th-arch-badge {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 999px;
  background: #120E33;
  border: 1px solid var(--th-line);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--th-gold-soft);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 3;
}

/* Deusi song bubble (positioned in % of the arch) */
.th-bubble {
  position: absolute; left: 30%; top: 63%;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  padding: 0.42em 0.95em;
  border-radius: 14px;
  font-family: var(--th-deva); font-weight: 600;
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  color: #4A1460;
  background: linear-gradient(180deg, #FFFDF4, #FFEFC0);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  z-index: 2;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.th-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  background: #FFEFC0; transform: translateX(-50%) rotate(45deg);
}
.th-bubble.is-pop { transform: translate(-50%, -100%) scale(1.12); }

/* scroll cue */
.th-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--th-ivory-dim); text-decoration: none;
}
.th-scroll i { width: 1px; height: 42px; background: linear-gradient(var(--th-gold), transparent); animation: thDrip 2.2s ease-in-out infinite; transform-origin: top; }
.th-scroll:hover { color: var(--th-gold-soft); }

/* =====================================================
   MARQUEE RIBBON
   ===================================================== */
.th-marquee {
  position: relative; z-index: 3;
  border-top: 1px solid var(--th-line);
  border-bottom: 1px solid var(--th-line);
  background: rgba(5, 7, 26, 0.55);
  overflow: hidden;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.th-marquee-track { display: flex; width: max-content; animation: thMarquee 70s linear infinite; }
.th-marquee:hover .th-marquee-track { animation-play-state: paused; }
.th-marquee span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--th-serif); font-style: italic; font-size: 1.55rem; color: var(--th-ivory);
  white-space: nowrap;
}
.th-marquee span[lang="ne"] { font-family: var(--th-deva); font-style: normal; font-size: 1.25rem; color: var(--th-gold-soft); }
.th-marquee em { font-style: normal; color: var(--th-gold); font-size: 0.9rem; }

/* =====================================================
   FIVE DAYS OF LIGHT
   ===================================================== */
.th-days { position: relative; z-index: 3; padding: 120px 0 40px; }
.th-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 56px; flex-wrap: wrap; }
.th-h2 {
  font-family: var(--th-serif); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; margin: 16px 0 0; color: var(--th-ivory);
}
.th-h2 em { font-style: italic; background: var(--th-gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.th-head p { max-width: 30em; margin: 0; color: var(--th-ivory-dim); line-height: 1.7; }

.th-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.th-card {
  position: relative;
  padding: 28px 22px 26px;
  border-radius: var(--th-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(251, 245, 230, 0.09);
  overflow: hidden;
  transition: transform .5s var(--th-ease), border-color .5s, box-shadow .5s;
}
.th-card::before {        /* soft glow that follows the cursor */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(242, 193, 78, 0.16), transparent 60%);
}
.th-card:hover { transform: translateY(-6px); border-color: rgba(242, 193, 78, 0.35); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.th-card:hover::before { opacity: 1; }
.th-card-num {
  font-family: var(--th-serif); font-size: 3.4rem; font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 193, 78, 0.55);
}
.th-card-icon { width: 58px; height: 58px; margin: 16px 0 16px; color: var(--th-gold); filter: drop-shadow(0 4px 14px rgba(242, 193, 78, 0.25)); }
.th-card-icon svg { width: 100%; height: 100%; }
.th-card-date { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-gold-soft); }
.th-card h3 { font-family: var(--th-serif); font-size: 1.65rem; font-weight: 600; line-height: 1.1; margin: 8px 0 4px; color: var(--th-ivory); }
.th-card-ne { font-family: var(--th-deva); font-size: 0.95rem; color: rgba(247, 222, 154, 0.75); margin-bottom: 12px; }
.th-card p { font-size: 0.9rem; line-height: 1.6; color: var(--th-ivory-dim); margin: 0; }
.th-card-badge {
  position: absolute; top: 18px; right: 18px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  display: none;
}
.th-card.is-today { border-color: rgba(242, 193, 78, 0.7); background: linear-gradient(180deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.03)); box-shadow: 0 0 0 1px rgba(242,193,78,.25), 0 30px 70px rgba(242, 193, 78, 0.15); }
.th-card.is-today .th-card-badge { display: block; color: #1B1030; background: var(--th-gold); }
.th-card.is-past { opacity: 0.55; }
.th-card.is-past .th-card-badge { display: block; color: var(--th-ivory-dim); border: 1px solid rgba(251,245,230,.2); }

/* =====================================================
   THE WISH (letter card)
   ===================================================== */
.th-wish { position: relative; z-index: 3; padding: 80px 0 150px; }
.th-letter {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--th-line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.45);
}
.th-letter-side {
  position: relative;
  padding: 56px 48px;
  background:
    radial-gradient(circle at 30% 80%, rgba(255, 159, 28, 0.35), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(255, 111, 163, 0.22), transparent 50%),
    linear-gradient(160deg, #2A1046 0%, #140F3E 100%);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 420px;
}
.th-letter-side .th-big-ne {
  font-family: var(--th-deva); font-weight: 600; line-height: 1.25;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  background: var(--th-gold-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: thShimmer 9s ease-in-out infinite;
}
.th-letter-side .th-diyos { display: flex; gap: 18px; }

/* rotating club seal */
.th-seal {
  position: absolute; top: 34px; right: 34px;
  width: 112px; height: 112px;
  display: grid; place-items: center;
}
.th-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: thSeal 24s linear infinite; overflow: visible; }
.th-seal text { font-family: var(--th-sans); font-size: 7.4px; font-weight: 700; letter-spacing: 1px; fill: var(--th-gold-soft); }
.th-letter-side > .th-eyebrow { padding-right: 120px; }
.th-seal img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
@keyframes thSeal { to { transform: rotate(360deg); } }

/* Tihar checklist */
.th-checklist { position: relative; }
.th-check-title {
  display: block; margin-bottom: 14px;
  font-family: var(--th-serif); font-style: italic; font-size: 1.35rem; color: var(--th-gold-soft);
}
.th-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.th-checklist li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.95rem; color: var(--th-ivory);
}
.th-checklist li i {
  position: relative; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(242, 193, 78, 0.55);
  background: rgba(0, 0, 0, 0.15);
  transition: background .35s var(--th-ease), border-color .35s;
}
.th-checklist li i::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #1B1030; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.th-letter.is-in .th-checklist li i { background: var(--th-gold); border-color: var(--th-gold); }
.th-letter.is-in .th-checklist li i::after { transform: rotate(45deg) scale(1); }
.th-checklist li:last-child { color: var(--th-gold-soft); font-style: italic; }
.th-letter.is-in .th-checklist li:nth-child(1) i, .th-letter.is-in .th-checklist li:nth-child(1) i::after { transition-delay: 0.78s; }
.th-letter.is-in .th-checklist li:nth-child(2) i, .th-letter.is-in .th-checklist li:nth-child(2) i::after { transition-delay: 1.06s; }
.th-letter.is-in .th-checklist li:nth-child(3) i, .th-letter.is-in .th-checklist li:nth-child(3) i::after { transition-delay: 1.34s; }
.th-letter.is-in .th-checklist li:nth-child(4) i, .th-letter.is-in .th-checklist li:nth-child(4) i::after { transition-delay: 1.62s; }
.th-letter.is-in .th-checklist li:nth-child(5) i, .th-letter.is-in .th-checklist li:nth-child(5) i::after { transition-delay: 1.90s; }
.th-letter.is-in .th-checklist li:nth-child(6) i, .th-letter.is-in .th-checklist li:nth-child(6) i::after { transition-delay: 2.18s; }
.th-letter.is-in .th-checklist li:nth-child(7) i, .th-letter.is-in .th-checklist li:nth-child(7) i::after { transition-delay: 2.46s; }

.th-letter-body { padding: 56px 56px 50px; }
.th-quote {
  font-family: var(--th-serif); font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.5;
  color: var(--th-ivory); margin: 18px 0 30px;
}
.th-quote::first-letter {
  float: left; font-size: 3.3em; line-height: 0.8; padding: 0.08em 0.1em 0 0;
  background: var(--th-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.th-sign { display: flex; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid var(--th-line); }
.th-sign img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.th-sign strong { display: block; font-family: var(--th-serif); font-size: 1.35rem; font-weight: 600; color: var(--th-ivory); }
.th-sign span { font-size: 0.82rem; color: var(--th-ivory-dim); }
.th-dates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.th-date {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--th-line); background: rgba(5, 7, 26, 0.35);
  font-size: 0.82rem; color: var(--th-ivory);
}
.th-date b { color: var(--th-gold-soft); font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Diyo (CSS-only clay lamp) ---------- */
.diyo { position: relative; display: inline-block; width: 26px; height: 26px; }
.diyo::before {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 10px;
  border-radius: 0 0 14px 14px / 0 0 10px 10px;
  background: linear-gradient(180deg, #D2691E 0%, #8B3A12 100%);
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, 0.5);
}
.diyo::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; width: 9px; height: 15px; margin-left: -4.5px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #FFFDE0 0%, #FFD23F 35%, #FF8C1A 75%, rgba(255, 80, 0, 0) 100%);
  box-shadow: 0 0 14px 5px rgba(255, 170, 40, 0.5);
  transform-origin: 50% 100%;
  animation: thFlicker 0.9s ease-in-out infinite alternate;
}
.diyo:nth-child(2n)::after { animation-duration: 1.15s; animation-delay: -.4s; }
.diyo:nth-child(3n)::after { animation-duration: .75s; }

.th-diyo-row {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
  display: flex; justify-content: space-around; pointer-events: none;
}
.th-rangoli {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3;
  background: repeating-linear-gradient(90deg, #FF6FA3 0 24px, #F2C14E 24px 48px, #29C7AC 48px 72px, #FF9F1C 72px 96px, #7B5CFF 96px 120px);
  opacity: 0.8;
}

/* ---------- Scene animations (SVG classes used by tihar.js) ---------- */
.tp-bob   { animation: thBob 0.9s ease-in-out infinite; }
.tp-sway  { animation: thSway 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.tp-tapL  { animation: thTapL 0.45s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }
.tp-tapR  { animation: thTapR 0.45s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }
.tp-wave  { animation: thWave 0.9s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }
.tp-flame { animation: thFlicker 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.tp-spark { animation: thSpark 0.25s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.tp-note  { animation: thNote 3s ease-out infinite; opacity: 0; }

/* ---------- Scroll reveal ---------- */
.th-reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--th-ease), transform 1s var(--th-ease); transition-delay: var(--d, 0s); }
.th-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes thShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes thTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes thFlicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(0.92, 1.08) rotate(2deg); opacity: .9; } 100% { transform: scale(1.05, .95) rotate(-1deg); } }
@keyframes thPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 159, 28, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 159, 28, 0); } }
@keyframes thSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes thStars { from { opacity: .4; } to { opacity: .85; } }
@keyframes thMarquee { to { transform: translateX(-50%); } }
@keyframes thDrip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes thGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -4%); } 60% { transform: translate(-3%, 5%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); } }
@keyframes thBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes thSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes thTapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes thTapR { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(0); } }
@keyframes thWave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes thSpark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(20deg) scale(1.25); opacity: .8; } 100% { transform: rotate(40deg) scale(.9); } }
@keyframes thNote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -60px); } }

@media (prefers-reduced-motion: reduce) {
  .th *, .th *::before, .th *::after { animation: none !important; transition: none !important; }
  .th-reveal { opacity: 1; transform: none; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .th-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .th-hero { min-height: 0; padding: 110px 0 100px; }
  .th-hero .th-wrap { grid-template-columns: 1fr; text-align: center; }
  .th-eyebrow { justify-content: center; }
  .th-lede { margin-left: auto; margin-right: auto; }
  .th-actions { justify-content: center; }
  .th-art { max-width: 460px; margin: 10px auto 0; width: 100%; }
  .th-letter { grid-template-columns: 1fr; }
  .th-letter-side { min-height: 0; padding: 44px 32px; gap: 30px; }
  .th-seal { top: 26px; right: 22px; width: 86px; height: 86px; }
  .th-seal img { width: 40px; height: 40px; }
  .th-letter-side > .th-eyebrow { padding-right: 92px; letter-spacing: 0.22em; }
  .th-letter-body { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .th-wrap { padding: 0 18px; }
  .th-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .th-card { padding: 22px 16px; }
  .th-card-num { font-size: 2.6rem; }
  .th-card h3 { font-size: 1.35rem; }
  .th-days { padding-top: 90px; }
  .th-count { gap: 12px; padding: 10px 14px; }
  .th-count-time { font-size: 1.4rem; gap: 10px; }
  .th-scroll { display: none; }
  .th-diyo-row .diyo:nth-child(n+9) { display: none; }
  .th-marquee span { font-size: 1.25rem; }
}
@media (max-width: 400px) {
  .th-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   TIHAR MUSIC BUTTON (floating, bottom left)
   ===================================================== */
.th-music {
  position: fixed; left: 16px; bottom: 16px; z-index: 1050;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(242, 193, 78, 0.55);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(9, 12, 38, 0.92) 0%, rgba(42, 16, 70, 0.92) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #FBF5E6;
  font-family: "Manrope", "Open Sans", system-ui, sans-serif;
  text-align: left; line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 30px rgba(242, 193, 78, 0.12);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.th-music:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(242, 193, 78, 0.22); }
.th-music:focus-visible { outline: 2px solid #F7DE9A; outline-offset: 3px; }
.th-music .thm-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(180deg, #FFE7A3 0%, #F2C14E 55%, #D9A23A 100%);
  color: #1B1030;
}
.th-music:not(.is-playing) .thm-icon { animation: thmPulse 2.4s ease-out infinite; }
.th-music .thm-play { margin-left: 2px; }
.th-music .thm-text strong { display: block; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em; }
.th-music .thm-text small { display: block; font-size: 0.7rem; color: #F7DE9A; letter-spacing: 0.04em; }
.th-music.is-error .thm-text small { color: #FFB3B3; }
.th-music .thm-bars { display: none; align-items: flex-end; gap: 2px; height: 15px; }
.th-music .thm-bars i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #1B1030; transform-origin: bottom; animation: thmBar .9s ease-in-out infinite; }
.th-music .thm-bars i:nth-child(2) { animation-delay: -.3s; }
.th-music .thm-bars i:nth-child(3) { animation-delay: -.6s; }
.th-music .thm-bars i:nth-child(4) { animation-delay: -.15s; }
.th-music.is-playing .thm-play { display: none; }
.th-music.is-playing .thm-bars { display: inline-flex; }
@keyframes thmPulse { 0% { box-shadow: 0 0 0 0 rgba(242, 193, 78, .55); } 100% { box-shadow: 0 0 0 10px rgba(242, 193, 78, 0); } }
@keyframes thmBar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .th-music .thm-icon, .th-music .thm-bars i { animation: none; } }
@media (max-width: 575px) {
  .th-music { left: 12px; padding: 6px 14px 6px 6px; }
  .th-music .thm-icon { width: 34px; height: 34px; }
}