#date {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Bottom padding reserves room for the hydrangea band; the band scales
     with card width (natural aspect ~1.79) so the padding tracks the same
     cqw curve, with just enough buffer above to keep content clear. */
  padding: 5rem 1rem clamp(13rem, 57cqw, 22.5rem);
  background: var(--color-cream);
  color: var(--color-navy);
}

/*
  Hydrangea floral band at the bottom of the date section.

  - ::after  → the full flower image, anchored to bottom, no top cropping
                (background-size 100% auto keeps the image's natural aspect)
  - ::before → cream-fade overlay matching the band's aspect, plus a
                backdrop-filter blur. Hidden by default; once all 3 coins
                are scratched (#date gains .date--revealed) it fades in,
                softening the bottom of the florals into cream as a visual
                cue that there's more content below.
*/
#date::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  /* Match the source PNG's aspect (2752x1536 ≈ 1.79) so the image is never
     cropped at the top — it grows in height with the card width. */
  aspect-ratio: 2752 / 1536;
  background: url('/assets/flowers-band.png') bottom center / 100% auto no-repeat;
  pointer-events: none;
  z-index: 0;
}

#date::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  /* ~36% of the band (band height ≈ 56cqw, this strip is 20cqw). The
     mask-image fades the top of the strip from transparent to opaque,
     so the backdrop-filter blur ramps in smoothly instead of cutting
     a hard horizontal line into the florals. */
  height: 20cqw;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(251, 244, 230, 0.5) 60%,
    var(--color-cream) 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, black 55%, black 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, black 55%, black 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  transition: opacity 1.4s ease;
}
#date.date--revealed::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.date__cherub {
  width: clamp(7rem, 22cqw, 11rem);
  aspect-ratio: 508 / 420;
  margin: 0 auto 1.5rem;
  background: url('/assets/cherub-date.png') center/contain no-repeat;
  position: relative;
  z-index: 1;
}

.date__guest-names {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 12.5cqw, 5rem);
  color: var(--color-navy);
  margin: 0 auto 1.5rem;
  max-width: clamp(22rem, 70cqw, 32rem);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  text-align: center;
  position: relative;
  z-index: 1;
}

.date__intro {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 20rem;
  margin: 0 auto 2.5rem;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

.scratch-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.4rem, 1.5cqw, 1rem);
  margin: 0.5rem auto 1.5rem;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}

.scratch-card {
  position: relative;
  width: clamp(4.5rem, 22cqw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(20, 43, 92, 0.25);
}
.scratch-card__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 6cqw, 2.5rem);
  color: var(--color-navy);
  text-align: center;
  line-height: 1;
  padding-top: 0.4rem;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, var(--color-cream-soft), var(--color-cream-warm));
}
.scratch-card canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  border-radius: 50%;
}
.scratch-card canvas:active { cursor: grabbing; }

.date__revealed {
  margin-top: 1.5rem;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-navy);
  opacity: 0;
  transition: opacity 0.8s ease;
  position: relative;
  z-index: 1;
}
.date__revealed.visible { opacity: 1; }

.date__outro {
  margin-top: 1rem;
  font-size: 1.1rem;
  max-width: 22rem;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}