/* sections.css — shloka, the first-invitation story, the couple, date + countdown. */

/* ---- shloka ------------------------------------------------------------------ */
.shloka {
  --stagger: 240ms;
}

.shloka__lines {
  margin: 4px 0 24px;
  font: 400 clamp(26px, 7.4vw, 32px) / 1.6 var(--font-deva);
  color: var(--brass-hi);
  text-shadow: 0 0 22px rgba(246, 196, 69, 0.25);
}

.shloka__line {
  display: block;
}

.shloka__trans {
  max-width: 30ch;
  margin: 0 auto;
  font: italic 400 clamp(19px, 5.3vw, 22px) / 1.5 var(--font-poem);
  color: var(--ivory-dim);
}

/* ---- story: the very first card, laid at Bappa's feet ------------------------ */
.story {
  padding-top: 36px;
}

.story__card {
  position: relative;
  width: 176px;
  aspect-ratio: 5 / 7;
  margin: 0 auto 40px;
  display: grid;
  place-content: center;
  gap: 6px;
  border-radius: 6px;
  background: linear-gradient(158deg, #fff8ea, #f1dfbd);
  box-shadow:
    inset 0 0 0 7px #fff8ea,
    inset 0 0 0 8.5px #c33026,
    inset 0 0 0 12px #fff8ea,
    inset 0 0 0 13px #d9a84e,
    0 22px 44px rgba(0, 0, 0, 0.5);
  transform: rotate(-6deg);
}

.story__card-text {
  font: 400 19px/1.3 var(--font-deva);
  color: #b3261e;
}

.story__card-sub {
  font: 400 15px/1.3 var(--font-deva);
  color: #8f5c1d;
}

.story__thread {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 64%;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #c8102e 0 7px, #e8b923 7px 9px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transform: rotate(7deg);
}

.story__flower {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}

.story__flower--a {
  width: 62px;
  right: -22px;
  top: 52%;
}

.story__flower--b {
  width: 38px;
  left: -14px;
  bottom: -18px;
  transform: rotate(-34deg);
}

/* the card drops in and settles, instead of the generic rise */
.story__card[data-reveal].is-in {
  animation-name: card-drop;
  animation-timing-function: var(--ease-back);
}

@keyframes card-drop {
  from { opacity: 0; transform: translateY(-36px) rotate(-16deg); }
  to   { opacity: 1; transform: rotate(-6deg); }
}

.story__line {
  max-width: 22ch;
  margin: 0 auto 14px;
  font: 500 clamp(23px, 6.4vw, 27px) / 1.35 var(--font-poem);
  color: var(--ivory);
}

.story__line--accent {
  font-style: italic;
  color: var(--haldi);
}

/* ---- couple ------------------------------------------------------------------ */
.couple__hosts {
  max-width: 31ch;
  margin: 0 auto 28px;
  font: italic 400 19px/1.5 var(--font-poem);
  color: var(--ivory-dim);
}

.couple__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: inherit;
}

.couple__name {
  display: block;
  font: 700 clamp(56px, 17.5vw, 78px) / 1.02 var(--font-display);
  letter-spacing: -0.01em;
  /* a sheen band sweeps across the gold every few seconds */
  background:
    linear-gradient(104deg, rgba(255, 253, 240, 0) 42%, rgba(255, 253, 240, 0.95) 50%, rgba(255, 253, 240, 0) 58%) 100% 0 / 300% 100% no-repeat,
    var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}

/* two animations on one element: the shared reveal (motion.css), then the sheen,
   which starts after the reveal has landed */
.couple__name[data-reveal].is-in {
  animation:
    reveal-rise 950ms var(--ease-out) backwards,
    name-sheen 7s var(--ease-soft) 2s infinite;
  animation-delay: calc(var(--d, 0) * var(--stagger)), 2s;
}

.couple__name + .couple__parents + .couple__joiner + .couple__name[data-reveal].is-in {
  animation-delay: calc(var(--d, 0) * var(--stagger)), 2.6s;
}

@keyframes name-sheen {
  0%, 62% { background-position: 100% 0, 0 0; }
  86%, 100% { background-position: 0% 0, 0 0; }
}

.couple__parents {
  display: block;
  margin-top: 8px;
  font: 400 14.5px/1.45 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--ivory-dim);
}

.couple__joiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0 12px;
}

.couple__joiner .diya {
  --diya-w: 56px;
}

.couple__joiner-word {
  margin-top: -2px;
  font: italic 500 23px/1.2 var(--font-poem);
  color: var(--marigold);
}

/* ---- date --------------------------------------------------------------------- */
.date-block {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin: 38px auto 12px;
}

.date-block__side {
  padding: 10px 0;
  border-block: 1px solid var(--line);
  font: 600 12.5px/1.35 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hi);
}

.date-block__day {
  font: 700 66px/1 var(--font-display);
}

.couple__venue {
  margin: 14px 0 38px;
  font: 500 17px/1.5 var(--font-body);
  color: var(--ivory);
}

/* ---- countdown ----------------------------------------------------------------- */
.countdown .eyebrow {
  margin-bottom: 14px;
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}

.cd {
  padding: 16px 2px 11px;
  border: 1px solid var(--line);
  border-radius: 999px 999px 12px 12px / 56px 56px 12px 12px;
  background: rgba(27, 6, 9, 0.5);
  overflow: hidden;
}

.cd__num {
  display: block;
  font: 600 29px/1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brass-hi);
}

.cd__num.is-tick {
  animation: cd-tick 520ms var(--ease-out);
}

@keyframes cd-tick {
  from { transform: translateY(-45%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cd__label {
  display: block;
  margin-top: 7px;
  font: 600 9.5px/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}