/* Offline replacement for the animation layer of the mirrored invitation.
   Pairs with offline.js; every hidden state below is gated on .km-js so the
   page stays readable if the script fails to run. */

/* Tamil / Kannada / Telugu text: Noto Serif (OFL), bundled so it renders the same offline on any device.
   A page downloads only the face its own script needs (unicode-range). The Telugu family has a "KM" prefix
   because build.js drops any bundled @font-face named "Noto Serif Telugu" (the template's own Telugu faces). */
@font-face {
  font-family: "Noto Serif Tamil";
  src: url("fonts/NotoSerifTamil.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: "Noto Serif Kannada";
  src: url("fonts/NotoSerifKannada.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}
@font-face {
  font-family: "KM Noto Serif Telugu";
  src: url("fonts/NotoSerifTelugu.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}
/* The page language picks the Indic fallback. It sits after each template Latin face, so Latin text
   (names, hashtag) keeps its look and only Indic glyphs fall through to it. */
html:lang(ta) { --kmx-indic: "Noto Serif Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN"; }
html:lang(kn) { --kmx-indic: "Noto Serif Kannada", "Nirmala UI", "Kannada Sangam MN", "Noto Sans Kannada"; }
html:lang(te) { --kmx-indic: "KM Noto Serif Telugu", "Nirmala UI", "Telugu Sangam MN", "Noto Sans Telugu"; }
html:not(:lang(en)) .km-font-heading,
html:not(:lang(en)) .km-font-label { font-family: var(--km-font-marcellus), "Marcellus", var(--kmx-indic), serif; }
html:not(:lang(en)) .km-font-script { font-family: "AlluraCapA", var(--km-font-great-vibes), var(--kmx-indic), cursive; }
html:not(:lang(en)) .km-font-serif { font-family: var(--km-font-cormorant), "Cormorant Garamond", var(--kmx-indic), serif; }
html:not(:lang(en)) body,
html:not(:lang(en)) input,
html:not(:lang(en)) button { font-family: var(--kmx-indic), serif; }
/* Indic scripts do not take letter-spacing (it splits conjuncts and vowel signs) */
html:not(:lang(en)) * { letter-spacing: normal !important; }
/* the footer blessing is Tamil on the English page, and in the page's own language elsewhere */
.km-footer__greet-mark {
  font-family: var(--kmx-indic, "Noto Serif Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN"), serif !important;
}

:root {
  --kmx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kmx-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- page scrollbar (maroon thumb, parchment track, gold hairline) ---------- */
/* Chrome/Edge/Safari: ::-webkit-scrollbar. Firefox (and anything without it): the standard properties.
   They are kept apart because Chrome 121+ ignores ::-webkit-scrollbar once scrollbar-color is set. */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track {
  background: #f3e19c;
  border-left: 1px solid rgba(201, 147, 47, 0.55);
}
html::-webkit-scrollbar-thumb {
  min-height: 56px;
  background: #9a1b41;
  border: 2px solid #f3e19c;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(201, 147, 47, 0.9);
}
html::-webkit-scrollbar-thumb:hover { background: #711433; }
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: auto;
    scrollbar-color: #9a1b41 #f3e19c;
  }
}

/* ---------- entry gate ---------- */
.km-js .km-entry__group {
  animation: kmxFadeUp 1.1s var(--kmx-ease) both;
}
.km-js .km-entry__group:nth-child(1) { animation-delay: 0.25s; }
.km-js .km-entry__group:nth-child(2) { animation-delay: 0.55s; }
.km-js .km-entry__group:nth-child(3) { animation-delay: 0.85s; }

.km-js .km-entry__cta {
  animation: kmxGlow 2.6s ease-in-out 2s infinite;
}

.km-entry--closing .km-entry__content {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.km-entry--closing .km-entry__card {
  opacity: 0;
  transform: translate(-50%, calc(60dvh - 54% - 38dvh)) scale(1.1);
  transition: transform 1.5s var(--kmx-ease-io), opacity 1.1s ease 0.3s;
}
.km-entry--closing .km-entry__veil {
  opacity: 0;
  transition: opacity 1.2s ease 0.4s;
}

/* ---------- countdown ---------- */
.km-countdown__unit[hidden],
.km-countdown__arrived[hidden] { display: none; }
.km-countdown__value {
  font-size: clamp(1.1rem, 6.4vw, 3.6rem);
  font-weight: 700;
  min-width: 2ch;
  text-align: center;
}
.kmx-tick { animation: kmxTick 0.45s var(--kmx-ease); }
@keyframes kmxTick {
  from { opacity: 0.2; transform: translateY(-0.25em) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ---------- hero ---------- */
.km-hero__video { overflow: hidden; }
/* Phones (portrait, narrower than ~0.6 aspect): the portrait hero video fills the screen and
   carries the Ganesha logo, garlands and procession art. Wider screens would crop all of
   that away, so there the video is dropped and the logo is placed above the text instead. */
.km-hero__logo { display: none; }
@media (min-aspect-ratio: 3/5) {
  .km-hero { background: #f9e6b3; }
  .km-hero__video { display: none; }
  .km-hero__content { top: 50%; width: min(100% - 2.5rem, 720px); }
  .km-hero__logo {
    display: block;
    width: clamp(84px, 14svh, 150px);
    height: auto;
    margin: 0 auto clamp(0.6rem, 2svh, 1.4rem);
  }
  .km-hero__invocation { font-size: clamp(1rem, 2.5svh, 1.5rem); }
  .km-hero__name { font-size: clamp(3rem, 9.5svh, 5.8rem); }
  .km-hero__date { font-size: clamp(1.1rem, 2.8svh, 1.6rem); margin-top: 0.8rem; }
  .km-hero__venue { font-size: clamp(0.85rem, 2.1svh, 1.1rem); margin-top: 0.9rem; padding-top: 0.9rem; }
}
/* The entrance transitions live on the shown (.km-hero--go) state only. If they sat on the hidden state,
   adding .km-js would run a delayed fade *out* (up to 2.8s), leaving the text visible until the gate opens. */
.km-js .km-hero__logo {
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
}
.km-hero--go .km-hero__logo {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--kmx-ease), transform 1.1s var(--kmx-ease);
  transition-delay: 0.15s;
}
.km-hero__video video { object-fit: cover; object-position: center; }
.km-js .km-hero__invocation,
.km-js .km-hero__amp,
.km-js .km-hero__date,
.km-js .km-hero__venue {
  opacity: 0;
  transform: translateY(18px);
}
.km-js .km-hero__char {
  opacity: 0;
  transform: translateY(0.55em) scale(0.92);
  filter: blur(8px);
}
.km-hero--go .km-hero__invocation,
.km-hero--go .km-hero__amp,
.km-hero--go .km-hero__date,
.km-hero--go .km-hero__venue {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--kmx-ease), transform 1s var(--kmx-ease);
  transition-delay: var(--d, 0s);
}
.km-hero--go .km-hero__char {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s var(--kmx-ease), transform 0.9s var(--kmx-ease), filter 0.9s var(--kmx-ease);
  transition-delay: var(--d, 0s);
}

/* ---------- "Scroll" cue (shown after the hero text settles, gone on first scroll) ---------- */
.kmx-scroll {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: none;
  color: #711433;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s;
  -webkit-tap-highlight-color: transparent;
}
.kmx-scroll.is-on:not(.is-gone) { opacity: 1; visibility: visible; }
.kmx-scroll.is-gone { transition-duration: 0.35s; }
.kmx-scroll:focus-visible { outline: 2px solid #c9932f; outline-offset: 2px; border-radius: 6px; }
.kmx-scroll__label {
  padding-left: 0.34em; /* balances the trailing letter-spacing so the word centres over the line */
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(251, 238, 184, 0.9);
}
.kmx-scroll__line {
  width: 1px;
  height: 22px;
  background: linear-gradient(#c9932f, rgba(201, 147, 47, 0));
  transform-origin: top;
  animation: kmxCueLine 2.2s ease-in-out infinite;
}
.kmx-scroll__chev {
  width: 9px;
  height: 9px;
  margin-top: -8px;
  border-right: 2px solid #711433;
  border-bottom: 2px solid #711433;
  transform: rotate(45deg);
  animation: kmxCueBob 2.2s ease-in-out infinite;
}
@keyframes kmxCueLine {
  0% { transform: scaleY(0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.2; }
}
@keyframes kmxCueBob {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.45; }
  50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}
@media (min-aspect-ratio: 3/5) {
  .kmx-scroll { bottom: max(1.4rem, env(safe-area-inset-bottom)); }
  .kmx-scroll__label { font-size: 0.7rem; }
}
/* Phones: the video's procession art fills the bottom of the screen, so the cue sits in the clear band between
   the venue line and the ornament divider (about 35% up from the bottom of the hero) as a small parchment pill. */
@media (max-aspect-ratio: 3/5) {
  .kmx-scroll {
    bottom: 35%;
    gap: 0.1rem;
    padding: 0.3rem 0.85rem 0.34rem;
    background: rgba(251, 238, 184, 0.92);
    border: 1px solid rgba(201, 147, 47, 0.85);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(43, 22, 8, 0.16);
  }
  .kmx-scroll__line { display: none; }
  .kmx-scroll__chev { width: 8px; height: 8px; margin-top: -1px; }
  .kmx-scroll__label { text-shadow: none; }
}

/* ---------- scroll reveals ---------- */
.km-js .km-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--kmx-ease), transform 1s var(--kmx-ease);
  transition-delay: var(--d, 0s);
}
.km-js .km-rv.is-in {
  opacity: 1;
  transform: none;
}
.km-js .km-couple__card.km-rv:not(.is-in) { transform: translateY(40px) scale(0.96); }

.km-couple__halo { animation: kmxBreathe 5.5s ease-in-out infinite; }
.km-couple__scenery { will-change: translate; }

/* events */
.km-js .km-events__stop {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.9s var(--kmx-ease), transform 0.9s var(--kmx-ease);
}
.km-js .km-events__stop.is-in { opacity: 1; transform: none; }
.km-js .km-events__char {
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.6s ease, transform 0.7s var(--kmx-ease);
  transition-delay: calc(var(--i, 0) * 38ms + 0.25s);
}
.km-js .km-events__stop.is-in .km-events__char { opacity: 1; transform: none; }

.km-js .km-events__foot {
  opacity: 0;
  transform: translate(-50%, 0) translateY(-14px) rotate(var(--r, 0deg)) scale(0.7);
  transition: opacity 0.6s ease, transform 0.7s var(--kmx-ease);
}
.km-js .km-events__foot.is-on {
  opacity: 0.85;
  transform: translate(-50%, 0) rotate(var(--r, 0deg));
}

/* gallery */
.km-gallery__mote { animation: kmxMote 7s ease-in-out infinite; animation-delay: var(--md, 0s); }
/* Narrow screens: the template's right-hand parasol sits on top of the heading, so centre a smaller one
   in the gap under the garland and start the heading below it (offline.js limits its scroll drift). */
@media (max-width: 1280px) {
  .km-gallery__parasol {
    width: clamp(92px, 24vw, 160px);
    top: calc(clamp(68px, 19vw, 80px) + 6px);
    left: 50%;
    right: auto;
    translate: -50% 0;
    opacity: 0.7;
  }
  .km-gallery .km-container {
    padding-top: calc(clamp(68px, 19vw, 80px) + clamp(92px, 24vw, 160px) * 1.06 + 14px);
  }
}
.kmx-promise {
  margin: 0;
  padding: clamp(1.4rem, 5vw, 2rem) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0;
  text-align: center;
  font-size: clamp(1.15rem, 4.8vw, 1.6rem);
  letter-spacing: 0.04em;
  color: var(--km-maroon-deep, #5c1d12);
  border-block: 1px solid rgba(201, 147, 47, 0.7);
}
.kmx-promise span { display: inline-flex; align-items: center; }
.kmx-promise span + span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 clamp(0.6rem, 2.6vw, 1rem);
  background: #c9932f;
  transform: rotate(45deg);
}

/* footer */
.km-js .km-footer__greeting > *:not(.is-in),
.km-js .km-footer__credit:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}
.km-footer__greeting > :nth-child(2) { transition-delay: 0.2s; }
.km-footer__greeting > :nth-child(3) { transition-delay: 0.4s; }

/* footer extras: families, hashtag, calendar + share */
/* Footer art (951x1576) is shown as two crops split at 42% height, inside the blank band
   (28%-52%) that holds the blessing text. The extras sit between the crops. */
.kmx-ft { background: #fdeab0; } /* = art background colour */
.kmx-ft__top,
.kmx-ft__bottom { position: relative; overflow: hidden; }
.kmx-ft__top { aspect-ratio: 951 / 661.92; }    /* 1576 * 0.42 */
.kmx-ft__bottom { aspect-ratio: 951 / 914.08; } /* 1576 * 0.58 */
.kmx-ft__top .km-footer__art,
.kmx-ft__bottom .km-footer__art { position: absolute; left: 0; width: 100%; height: auto; }
.kmx-ft__top .km-footer__art { top: 0; }
.kmx-ft__bottom .km-footer__art { bottom: 0; }
.kmx-ft__top .km-footer__greeting { top: calc(22% / 0.42); } /* keeps its 22%-of-art position */
.kmx-fx {
  position: relative;
  z-index: 1;
  padding: 0.3rem 1.5rem 0;
  text-align: center;
  color: var(--km-maroon-deep, #5c1d12);
}
.kmx-fx p { margin: 0; }
.kmx-fx__lead { font-size: clamp(0.78rem, 3.2vw, 0.95rem); opacity: 0.8; }
.kmx-fx__family { margin-top: 0.35em; font-size: clamp(0.95rem, 4.2vw, 1.2rem); letter-spacing: 0.02em; }
.kmx-fx__and { margin-top: 0.2em; font-size: 0.85rem; font-style: italic; opacity: 0.7; }
.kmx-fx__tag { margin-top: 0.7em; font-size: clamp(1.5rem, 7vw, 2.1rem); color: var(--km-maroon, #8a1c3b); }
.kmx-fx__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.kmx-fx__actions [hidden] { display: none; }
.kmx-btn {
  padding: 0.75rem 1.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fbeeb8;
  background: var(--km-maroon, #8a1c3b);
  border: 1px solid var(--km-maroon-deep, #5c1d12);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.kmx-btn:hover { background: var(--km-maroon-deep, #5c1d12); transform: translateY(-1px); }
.kmx-btn:focus-visible { outline: 2px solid var(--km-gold, #c9932f); outline-offset: 2px; }
.kmx-btn--ghost { color: var(--km-maroon-deep, #5c1d12); background: transparent; border-color: var(--km-gold, #c9932f); }
.kmx-btn--ghost:hover { background: rgba(201, 147, 47, 0.16); }
.km-js .kmx-fx > * { transition: opacity 0.8s var(--kmx-ease), transform 0.8s var(--kmx-ease); }
.km-js .kmx-fx > *:not(.is-in) { opacity: 0; transform: translateY(16px); }
.kmx-fx > :nth-child(2) { transition-delay: 0.1s; }
.kmx-fx > :nth-child(3) { transition-delay: 0.2s; }
.kmx-fx > :nth-child(4) { transition-delay: 0.3s; }
.kmx-fx > :nth-child(5) { transition-delay: 0.45s; }
.kmx-fx > :nth-child(6) { transition-delay: 0.6s; }

.kmx-toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  z-index: 210;
  padding: 0.7rem 1.2rem;
  font-size: 0.85rem;
  color: #fbeeb8;
  background: rgba(92, 29, 18, 0.95);
  border: 1px solid rgba(201, 147, 47, 0.6);
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.kmx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- music bell ---------- */
.km-bell--playing .km-bell__disc { animation: kmxRing 2.4s ease-in-out infinite; }
.km-bell--playing .km-bell__icon { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 6c-2 0-3 1-3 3v2c-8 2-13 9-13 18v10l-5 6v2h42v-2l-5-6V29c0-9-5-16-13-18V9c0-2-1-3-3-3z' fill='%23c9932f' stroke='%23741f14' stroke-width='3' stroke-linejoin='round'/><path d='M26 54a6 6 0 0 0 12 0z' fill='%23741f14'/></svg>"); animation: kmxSwing 1.8s ease-in-out infinite; transform-origin: 50% 12%; }
.km-bell.kmx-nosound .km-bell__disc { opacity: 0.55; }

/* ---------- rsvp additions ---------- */
.km-rsvp__reveal { animation: kmxFadeUp 0.6s var(--kmx-ease) both; }
.km-rsvp__row { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.km-rsvp__row .km-rsvp__tag { width: auto; white-space: nowrap; text-align: left; }
.km-rsvp__row .km-rsvp__input { width: 100%; box-sizing: border-box; }
.km-rsvp__tag { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--km-maroon-deep, #5c1d12); }
.km-rsvp__error { margin: 0.6rem 0 0; font-size: 0.9rem; color: #8a1c10; }
.km-rsvp__submit:disabled { opacity: 0.45; cursor: not-allowed; }
.km-rsvp__done { text-align: center; padding: 1.2rem 0.4rem; animation: kmxFadeUp 0.8s var(--kmx-ease) both; }
.km-rsvp__done-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin: 0 0 0.5rem; color: var(--km-maroon-deep, #5c1d12); }
.km-rsvp__done-body { margin: 0; font-size: 1.05rem; }
.km-rsvp__sent { margin: 0.9rem 0 0; font-size: 0.72rem; opacity: 0.65; }

/* ---------- keyframes ---------- */
@keyframes kmxFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes kmxGlow {
  0%, 100% { box-shadow: 0 10px 24px rgba(43, 22, 8, 0.26), 0 0 0 0 rgba(201, 147, 47, 0.45); }
  50% { box-shadow: 0 10px 24px rgba(43, 22, 8, 0.26), 0 0 0 12px rgba(201, 147, 47, 0); }
}
@keyframes kmxBreathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes kmxMote {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.1; }
  50% { transform: translate3d(6px, -14px, 0); opacity: 0.55; }
}
@keyframes kmxRing {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201, 147, 47, 0.5), 0 0 0 5px rgba(201, 147, 47, 0.14); }
  50% { box-shadow: 0 0 0 1px rgba(201, 147, 47, 0.6), 0 0 0 11px rgba(201, 147, 47, 0); }
}
@keyframes kmxSwing {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kmx-scroll__line, .kmx-scroll__chev { animation: none; }
  .kmx-scroll__chev { opacity: 0.85; }
  .km-js .km-rv,
  .km-js .km-events__stop,
  .km-js .km-events__char,
  .km-js .km-events__foot,
  .km-js .km-hero__char,
  .km-js .km-hero__invocation,
  .km-js .km-hero__amp,
  .km-js .km-hero__date,
  .km-js .km-hero__venue {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
  .km-couple__halo, .km-gallery__mote, .km-bell--playing .km-bell__disc, .km-bell--playing .km-bell__icon,
  .km-js .km-entry__cta { animation: none; }
}