/* The countdown: a heart of gold foil to scratch, over the date, then the time
   to the main day on paper flip tiles, and "Save the date".

   The heart is three layers cut to the same shape (heart.webp's own
   outline): a gold rim a little larger than it, the ivory paper the date is
   written on, and the foil on top, drawn on a canvas so it can be scratched
   away (js/countdown.js). Inside the heart, cqi is the heart's width; inside
   the countdown, the countdown's width.

   Three compositions by the stage's shape, like the other sections: phone
   and upright (one column), and sideways (the title across the top, the heart
   below on the left, the tiles on the right). --u is the unit: 1cqw on a
   phone, the 3:4 or 4:3 box that fits on a tablet. Strands of paper flowers
   hang from the lace above and sway.
*/

.countdown {
  position: relative;
  background: var(--paper);
}

.countdown-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  container: cstage / size;
}

.countdown-stage > * { --u: 1cqw; }

.c-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%),
    var(--paper) url(../assets/hero/sky.webp) 50% 0 / cover no-repeat;
}

/* ------------------------------------------------------------ the strands */

.c-larian {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c-strand {
  position: absolute;
  top: -1px;
  left: var(--x);
  width: calc(5.4 * var(--u));
  translate: -50% 0;
  transform-origin: 50% 0;
  animation: c-sway var(--t) ease-in-out var(--d) infinite;
  filter: drop-shadow(0 .8cqw .8cqw rgba(92, 40, 30, .22));
}

.c-strand img { width: 100%; }

@keyframes c-sway {
  0%, 100% { rotate: -1.2deg; }
  50%      { rotate: 1.2deg; }
}

/* ------------------------------------------------------------ the column */

.c-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(33 * var(--u)) calc(6 * var(--u)) calc(9 * var(--u));
  text-align: center;
  color: var(--ink);
}

.c-layout > * { margin: 0; }
.c-head > * { margin: 0; }

.c-kicker {
  font: 600 calc(2.8 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.c-title {
  font: 400 calc(10.5 * var(--u))/1.15 "Pinyon Script", cursive;
  color: var(--ink);
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28);
}

/* ------------------------------------------------------------ the heart */

.c-heart-wrap {
  position: relative;
  width: calc(58 * var(--u));
  margin-top: calc(3 * var(--u)) !important;
}

.c-heart {
  position: relative;
  z-index: 1;
  aspect-ratio: 720 / 711;
  container-type: inline-size;
  filter: drop-shadow(0 1.6cqi 2.2cqi rgba(92, 40, 30, .3));
}

.c-heart-rim,
.c-heart-paper {
  position: absolute;
  -webkit-mask: url(../assets/countdown/heart.webp) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/countdown/heart.webp) 0 0 / 100% 100% no-repeat;
}

.c-heart-rim {
  inset: -2.2%;
  background: linear-gradient(160deg, #e7c77e, #b3863d 45%, #8f6424);
  opacity: 0;
  transition: opacity .8s ease .3s;
}

.c-heart-paper {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 250, 238, .75), transparent 75%),
    #f3e8d2 url(../assets/letter/paper.webp) center / cover;
}

.c-date {
  position: absolute !important;
  left: 18%;
  right: 18%;
  top: 17%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.c-date span { display: block; }

.c-date-day {
  font: 600 6.2cqi/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.c-date-num {
  font: 500 30cqi/.95 "Cormorant Garamond", Georgia, serif;
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .7);
}

.c-date-month {
  font: italic 500 8.6cqi/1.2 "Cormorant Garamond", Georgia, serif;
  color: var(--gold);
}

.c-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;        /* a finger on the heart scratches rather than scrolls */
  cursor: pointer;
}

.countdown.is-revealed .c-heart-rim { opacity: 1; }
.countdown.is-revealed .c-foil { pointer-events: none; }

/* A spray of roses either side of the heart's point, tucked in under it. */
.c-roses {
  position: absolute;
  z-index: 0;
  bottom: -13%;
  width: 54%;
  pointer-events: none;
  filter: drop-shadow(0 .8cqw 1.2cqw rgba(92, 40, 30, .28));
}

.c-roses img { width: 100%; }
.c-roses-l { left: -9%; transform-origin: 0 100%; }
.c-roses-r { right: -9%; transform-origin: 100% 100%; }

/* ------------------------------------------------------------ under the heart */

.c-under {
  position: relative;
  z-index: 1;
  min-height: calc(7 * var(--u));
  margin-top: calc(4.5 * var(--u)) !important;
  display: grid;
  place-items: center;
}

.c-hint {
  margin: 0;
  font: italic 500 calc(4.2 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
  animation: c-pulse 3s ease-in-out infinite;
}

@keyframes c-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.countdown.is-scratching .c-hint,
.countdown.is-revealed .c-hint { opacity: 0; animation: none; transition: opacity .4s; }

/* For the keyboard: out of sight until it has focus. */
.c-reveal {
  position: absolute;
  padding: .5em 1.2em;
  border: 1px solid rgba(169, 128, 63, .7);
  border-radius: 999px;
  background: #fffaf0;
  color: var(--ink);
  font: 600 calc(3.6 * var(--u))/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.c-reveal:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #d4b06a; outline-offset: 2px; }
.countdown.is-revealed .c-reveal { display: none; }

/* ------------------------------------------------------------ the tiles */

.c-count {
  width: calc(84 * var(--u));
  container-type: inline-size;
  margin-top: calc(1 * var(--u)) !important;
}

.c-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.2cqi;
}

.c-card {
  position: relative;
  aspect-ratio: 1 / 1.08;
  perspective: 70cqi;
  border-radius: 1.6cqi;
  box-shadow: 0 1.4cqi 2.4cqi rgba(92, 40, 30, .22), 0 .3cqi .5cqi rgba(92, 40, 30, .2);
  font: 600 11.5cqi/1 "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

.c-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: #f3e8d2 url(../assets/letter/paper.webp) 0 0 / 60cqi auto;
  backface-visibility: hidden;
}

.c-up {
  top: 0;
  border-radius: 1.6cqi 1.6cqi 0 0;
  background-image: linear-gradient(rgba(255, 252, 244, .45), rgba(120, 72, 30, .07)), url(../assets/letter/paper.webp);
  background-size: auto, 60cqi auto;
  box-shadow: inset 0 -1px 0 rgba(120, 72, 30, .28);
}

.c-down {
  bottom: 0;
  border-radius: 0 0 1.6cqi 1.6cqi;
  background-image: linear-gradient(rgba(120, 72, 30, .05), rgba(255, 252, 244, .2)), url(../assets/letter/paper.webp);
  background-size: auto, 60cqi auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.c-half b {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: inherit;
}

.c-up b   { top: 0; }
.c-down b { bottom: 0; }

.c-leaf { visibility: hidden; z-index: 2; }
.c-leaf-up   { transform-origin: 50% 100%; }
.c-leaf-down { transform-origin: 50% 0; }

/* the brass pins either side of the fold */
.c-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -.8cqi;
  right: -.8cqi;
  top: 50%;
  height: 1.6cqi;
  translate: 0 -50%;
  background:
    radial-gradient(circle at 50% 50%, #e2c27c, #9c7131 70%, transparent 72%) 0 50% / 1.6cqi 1.6cqi no-repeat,
    radial-gradient(circle at 50% 50%, #e2c27c, #9c7131 70%, transparent 72%) 100% 50% / 1.6cqi 1.6cqi no-repeat;
  pointer-events: none;
}

.c-unit {
  display: block;
  margin-top: 2.4cqi;
  font: 600 3.3cqi/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.c-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

/* After the day: how long they have been married, instead of the tiles. */
.c-married {
  margin: 0;
  font: italic 500 5.4cqi/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
}

.c-married strong {
  display: block;
  font: 400 15cqi/1.15 "Pinyon Script", cursive;
  color: var(--ink);
}

.c-count.is-married .c-tiles,
.c-count.is-married .c-save { display: none; }

/* ------------------------------------------------------------ save the date */

.c-save {
  --k: 1.25;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6cqi;
  container-type: inline-size;
}

.c-save .e-btn { flex: none; padding: 0 8cqi; }
.c-save .e-cal-menu { right: auto; left: 50%; translate: -50% 0; bottom: calc(100% + 2cqi); }

/* ------------------------------------------------------------ upright tablet */

@container cstage (min-aspect-ratio: 5 / 8) {
  .countdown-stage > * { --u: min(1cqw, .75cqh); }
  .c-bg { background-image: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%), url(../assets/hero/sky-lg.webp); }
  .c-strand { width: calc(4.4 * var(--u)); }
  .c-layout { padding-top: calc(27 * var(--u)); }
  .c-kicker { font-size: calc(2 * var(--u)); }
  .c-title { font-size: calc(7.6 * var(--u)); }
  .c-heart-wrap { width: calc(42 * var(--u)); }
  .c-hint { font-size: calc(3.1 * var(--u)); }
  .c-count { width: calc(62 * var(--u)); }
}

/* ------------------------------------------------------------ sideways tablet */

@container cstage (min-aspect-ratio: 6 / 5) {
  .countdown-stage > * { --u: min(1cqw, 1.3333cqh); }
  .c-bg { background-image: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 244, 222, .7), transparent 70%), url(../assets/hero/sky-wide.webp); }
  .c-strand { width: calc(3.8 * var(--u)); }

  .c-layout {
    display: grid;
    grid-template-columns: auto calc(44 * var(--u));
    grid-template-areas:
      "head  head"
      "heart count"
      "under count";
    align-content: center;
    justify-content: center;
    align-items: center;
    column-gap: calc(9 * var(--u));
    padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
  }
  .c-head { grid-area: head; margin-bottom: calc(3 * var(--u)) !important; }
  .c-heart-wrap { grid-area: heart; width: calc(33 * var(--u)); margin: 0 !important; }
  .c-under { grid-area: under; margin-top: calc(3 * var(--u)) !important; }
  .c-count { grid-area: count; width: 100%; margin: 0 !important; }
  .c-kicker { font-size: calc(1.6 * var(--u)); }
  .c-title { font-size: calc(6.4 * var(--u)); }
  .c-hint { font-size: calc(2.4 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .c-strand, .c-hint { animation: none; }
}