/* =========================================================
   Chinor — the wind lifts golden chinar leaves around a cup of
   tea; an ancient plane tree over the family dastarkhan.
   Jubilees (yubiley) and elders' birthdays.
   Built on shared/base.css; this sheet is the look.
   ========================================================= */

:root {
  --bg: #faf3e6;
  --ink: #3a2a1d;
  --ink-soft: #7b6551;
  --accent: #b5651d;
  --accent-deep: #8c4614;
  --accent-soft: #f3e1c3;
  --cobalt: #1f4c9a;
  --cobalt-soft: #e4ebf6;
  --line: rgba(140, 70, 20, 0.15);
  --line-strong: rgba(140, 70, 20, 0.32);
  --surface: #fffaf1;
  --on-accent: #fff8ec;
  --shadow: 120 70 25;
  --glow: rgba(255, 250, 240, 0.95);
  --intro-bg: #3b2414;

  --display: "Literata", Georgia, serif;
  --body: "Literata", Georgia, serif;
  --label: "Literata", Georgia, serif;

  --open-default: url("/styles/chinor/media/open-poster.jpg");
  --amb-poster: url("/styles/chinor/media/amb-poster.jpg");
  --close-poster: url("/styles/chinor/media/close-poster.jpg");
  --dissolve: 2s;
  --pulse: rgba(255, 238, 200, 0.95);
  --pulse-glow: rgba(255, 190, 90, 0.55);

  /* one chinar (plane-tree) leaf */
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 38v-9M20 29C14 31 6 30 3 25l6-2-7-6 7-1-3-8 8 4 1-8 5 6 5-6 1 8 8-4-3 8 7 1-7 6 6 2c-3 5-11 6-17 4Z' fill='%23d98a2b'/%3E%3Cpath d='M20 29V12M20 22l-7-5M20 22l7-5' stroke='%23a85a17' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

body {
  font-size: 18px;
  background:
    radial-gradient(ellipse 140% 50% at 50% 0%, rgba(242, 200, 130, 0.18), transparent 70%),
    var(--bg);
}

.label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
}

/* ---------- Opening ---------- */

.intro__kicker {
  color: #ffe6b8;
  text-shadow: 0 1px 10px rgba(40, 20, 5, 0.85);
}

.intro__to {
  font-style: italic;
  color: #fffaf0;
  text-shadow: 0 2px 18px rgba(40, 20, 5, 0.9), 0 0 4px rgba(40, 20, 5, 0.6);
}

.intro__hint {
  letter-spacing: 0.14em;
}

/* ---------- Hero ---------- */

.hero__veil {
  background:
    radial-gradient(ellipse 90% 34% at 50% 22%, rgba(255, 249, 236, 0.75), rgba(255, 249, 236, 0) 72%),
    linear-gradient(to bottom, rgba(250, 243, 230, 0) 80%, rgba(250, 243, 230, 0.85) 94%, var(--bg) 100%);
}

.hero__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-shadow: 0 0 12px var(--glow);
}

/* the years count up to the age */
.years {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
}

.years__num {
  font-family: var(--display);
  font-size: clamp(110px, 33vw, 150px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(170deg, #d98a2b 10%, #8c4614 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 249, 236, 0.9));
}

.years__word {
  font-style: italic;
  font-size: 28px;
  color: var(--accent-deep);
  text-shadow: 0 0 12px var(--glow);
}

.name {
  margin: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 0 20px var(--glow), 0 0 6px var(--glow);
}

.hero__date {
  position: absolute;
  left: 50%;
  bottom: max(98px, calc(env(safe-area-inset-bottom) + 86px));
  translate: -50% 0;
  margin: 0;
  padding: 9px 22px;
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.88);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  box-shadow: 0 12px 26px -14px rgb(var(--shadow) / 0.7);
}

.hero.is-in .hero__kicker {
  animation: rise 1.8s var(--ease) 0.4s both;
}

.hero.is-in .years {
  animation: focus 2s var(--ease) 0.8s both;
}

.hero.is-in .name {
  animation: rise 2s var(--ease) 2.6s both;
}

.hero.is-in .hero__date {
  animation: rise 1.8s var(--ease) 3.4s both;
}

.hero {
  --cue-d: 4.2s;
}

/* ---------- Falling leaves ---------- */

.leaves {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 3s var(--ease-soft);
}

body.is-open .leaves {
  opacity: 1;
}

.leaves i {
  position: absolute;
  top: -50px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  background: var(--leaf) center / contain no-repeat;
  opacity: 0.8;
  animation: fall var(--d) linear var(--delay) infinite;
}

.leaves i:nth-child(1) { --x: 10%; --s: 22px; --d: 21s; --delay: -3s; --sway: 70px; }
.leaves i:nth-child(2) { --x: 30%; --s: 16px; --d: 26s; --delay: -14s; --sway: -60px; }
.leaves i:nth-child(3) { --x: 54%; --s: 24px; --d: 23s; --delay: -8s; --sway: 80px; }
.leaves i:nth-child(4) { --x: 74%; --s: 18px; --d: 28s; --delay: -19s; --sway: -70px; }
.leaves i:nth-child(5) { --x: 90%; --s: 20px; --d: 24s; --delay: -11s; --sway: 50px; }
.leaves i:nth-child(6) { --x: 42%; --s: 14px; --d: 31s; --delay: -24s; --sway: -50px; }

@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(var(--sway), 28vh, 0) rotate(100deg);
  }
  50% {
    transform: translate3d(0, 56vh, 0) rotate(190deg);
  }
  75% {
    transform: translate3d(var(--sway), 84vh, 0) rotate(290deg);
  }
  100% {
    transform: translate3d(0, 112vh, 0) rotate(380deg);
  }
}

/* ---------- Sections ---------- */

.title {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 11.5vw, 50px);
  color: var(--accent-deep);
}

.divider {
  width: min(66%, 240px);
  margin-top: 14px;
}

.invite__greet {
  font-style: italic;
  color: var(--accent-deep);
}

.invite .divider {
  margin: 0 auto 28px;
}

.parents__names {
  font-style: italic;
  font-size: 21px;
}

.invite__quote {
  font-style: italic;
  color: var(--cobalt);
}

/* ---------- Date: a porcelain plate ---------- */

.bigdate {
  gap: 14px;
  margin-bottom: 4px;
}

.plate {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 56%, var(--cobalt-soft) 57% 60%, #fff 61%);
  box-shadow:
    inset 0 0 0 5px #fff,
    inset 0 0 0 7px var(--cobalt),
    0 18px 30px -18px rgb(var(--shadow) / 0.6);
}

/* the paxta pattern's dotted rim */
.plate::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 2px dotted rgba(31, 76, 154, 0.55);
}

.plate__month,
.plate__year {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cobalt);
}

.bigdate__day {
  font-size: 74px;
  font-weight: 500;
  line-height: 1;
  color: var(--cobalt);
}

.bigdate__side {
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
}

.bigdate__meta {
  margin: 0 0 30px;
  font-style: italic;
  font-size: 20px;
}

.cal {
  border-radius: 16px;
}

.cal__d.is-day::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 16px -6px rgb(var(--shadow) / 0.6);
}

.cd__num {
  font-weight: 500;
  color: var(--accent-deep);
}

.cd__past {
  font-style: italic;
  color: var(--accent-deep);
}

/* ---------- Buttons ---------- */

.btn {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.btn--solid {
  background: linear-gradient(180deg, #c27326, var(--accent-deep));
}

/* ---------- Program: porcelain icons ---------- */

.tl__time {
  font-style: italic;
  font-size: 21px;
}

.tl__ico {
  background: #fff;
  border: 2px solid var(--cobalt);
  color: var(--cobalt);
}

.tl::before {
  background: repeating-linear-gradient(var(--cobalt) 0 2px, transparent 2px 7px);
  opacity: 0.45;
}

.tl__title {
  font-weight: 500;
}

.tl__note {
  font-style: italic;
}

.detail__ico {
  background: #fff;
  border: 2px solid var(--cobalt);
  color: var(--cobalt);
}

.detail__title {
  font-weight: 600;
}

/* ---------- Venue ---------- */

.venue__name {
  font-style: italic;
  color: var(--accent-deep);
}

/* ---------- Gifts: amber and cobalt cards ---------- */

.ccard {
  color: #fff8ec;
  border: 1px solid rgba(255, 240, 210, 0.6);
  background: linear-gradient(135deg, #c27326, #7a3a10);
}

.ccard::before {
  content: "";
  position: absolute;
  right: -12px;
  top: -14px;
  width: 120px;
  height: 120px;
  background: var(--leaf) center / contain no-repeat;
  opacity: 0.35;
  rotate: 20deg;
}

.ccard--humo {
  background: linear-gradient(135deg, #2a5fb5, #163a78);
}

.ccard--visa {
  background: linear-gradient(135deg, #6b7a3a, #3d4a1c);
}

/* ---------- Answer ---------- */

.sent__art {
  width: 130px;
}

.sent__title {
  font-style: italic;
  color: var(--accent-deep);
}

/* ---------- Closing ---------- */

.closing__veil {
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(250, 243, 230, 0.6) 8%, rgba(250, 243, 230, 0) 22%),
    radial-gradient(ellipse 90% 18% at 50% 18%, rgba(16, 24, 52, 0.55), transparent 76%),
    linear-gradient(to top, var(--bg) 0%, rgba(250, 243, 230, 0) 14%);
}

.closing__wait {
  font-style: italic;
  color: #fff3dc;
  text-shadow: 0 2px 18px rgba(10, 16, 40, 0.8);
}

.closing__names {
  color: #ffd79a;
  text-shadow: 0 1px 10px rgba(10, 16, 40, 0.8);
}

.footer__art {
  width: 120px;
}

.footer__sign {
  font-style: italic;
}

/* ---------- Small and wide screens ---------- */

@media (max-height: 700px) and (max-aspect-ratio: 3/4) {
  .hero__text {
    top: max(6%, calc(env(safe-area-inset-top) + 50px));
  }

  .years__num {
    font-size: clamp(90px, 28vw, 120px);
  }
}

@media (min-aspect-ratio: 3/4) {
  .years__num {
    font-size: min(150px, 16vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaves {
    display: none;
  }
}