/* ==========================================================================
   main.css — §4.5 hero, §4.6 gift cards, §4.10 final video
   ========================================================================== */

#main-screen { background: var(--cream); }


/* ==========================================================================
   HERO (§4.5)
   Every one-shot here is gated behind #hero.is-entering, which JS adds at
   the moment of arrival. Nothing below animates on page load. (§1.3)
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: grid;
  align-items: end;
  background: var(--burgundy-deep);
}

.hero__media { position: absolute; inset: 0; }

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);        /* resting state — the zoom's start frame */
  will-change: transform;
}
#hero.is-entering .hero__img {
  animation: ken-burns 18s var(--ease-soft) forwards;
}
@keyframes ken-burns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.8%, 0); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(48, 13, 25, .94) 0%,
      rgba(74, 22, 38, .70) 26%,
      rgba(74, 22, 38, .26) 54%,
      rgba(74, 22, 38, .10) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--sp-3) clamp(76px, 16vh, 132px);
  text-align: center;
}

.hero__title,
.hero__date {
  opacity: 0;                    /* first paint state: invisible, waiting */
  transform: translateY(26px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 10vw, 68px);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 var(--sp-2);
  text-shadow: 0 2px 24px rgba(48, 13, 25, .55);
}
.hero__date {
  font-family: var(--font-cute);
  font-size: clamp(19px, 5vw, 24px);
  color: var(--pastel-pink);
  margin: 0;
}
#hero.is-entering .hero__title { animation: rise-in 1.4s var(--ease-premium) 300ms forwards; }
#hero.is-entering .hero__date  { animation: rise-in 1.4s var(--ease-premium) 900ms forwards; }
@keyframes rise-in {
  to { opacity: 1; transform: none; }
}

/* ambient sparkles */
.hero__sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero__sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
  will-change: transform, opacity;
  animation: twinkle var(--ease-soft) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0;   transform: scale(.5); }
  50%      { opacity: .85; transform: scale(1.4); }
}

.hero__cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--pastel-pink);
  opacity: .75;
  animation: cue-bob 2.2s var(--ease-soft) infinite;
}
.hero__cue span {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, var(--pastel-pink));
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(7px); opacity: .95; }
}


/* ==========================================================================
   GIFT CARDS (§4.6) — exactly three. No fourth.
   ========================================================================== */
.gifts {
  padding: clamp(64px, 13vh, 108px) var(--sp-3);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 215, 227, .5), transparent 58%),
    var(--cream);
}

.gift-row {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  max-width: 940px;
  margin: var(--sp-3) auto 0;
}
@media (min-width: 760px) {
  .gift-row { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}

.gift-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-soft);
  transition:
    transform  var(--dur-medium) var(--ease-premium),
    box-shadow var(--dur-medium) var(--ease-soft);
}
.gift-card:hover,
.gift-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

/* diagonal shine sweep */
.gift-card::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, .68),
    transparent);
  transform: rotate(14deg);
  transition: left 700ms var(--ease-premium);
  pointer-events: none;
}
.gift-card:hover::after,
.gift-card:focus-visible::after { left: 140%; }

.gift-card__icon { width: 54px; height: 54px; margin: 0 auto var(--sp); }
.gift-card__icon svg { width: 100%; height: 100%; }

.gift-card__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  color: var(--burgundy);
}
.gift-card__note {
  font-family: var(--font-cute);
  font-size: 17px;
  color: var(--wine);
  opacity: .72;
}


/* ==========================================================================
   QUIZ — optional, low-stakes. A wrong answer is warm, never a penalty.
   ========================================================================== */
.quiz {
  padding: 0 var(--sp-3) clamp(64px, 13vh, 108px);
  text-align: center;
  background: var(--cream);
}

.quiz-card {
  width: min(460px, 100%);
  margin: var(--sp-3) auto 0;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-soft);
  transition:
    opacity   var(--dur-medium) var(--ease-soft),
    transform var(--dur-medium) var(--ease-premium);
}
.quiz-card.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.96);
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 auto;
  overflow: hidden;
}

.quiz-card__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 5vw, 23px);
  color: var(--burgundy);
  margin: 0 0 var(--sp-3);
}

.quiz-card__options {
  display: grid;
  gap: 10px;
}

.quiz-opt {
  appearance: none;
  cursor: pointer;
  padding: 13px var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--burgundy);
  background: var(--cream);
  border: 1.5px solid var(--dusty-pink);
  border-radius: var(--r-sm);
  transition:
    transform  var(--dur-fast) var(--ease-bounce),
    background var(--dur-fast) var(--ease-soft);
}
.quiz-opt:not(:disabled):hover { background: var(--cream-dark); transform: translateY(-2px); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-correct {
  background: linear-gradient(160deg, var(--gold-light), var(--gold));
  border-color: var(--gold);
  color: var(--burgundy-deep);
}
.quiz-opt.is-wrong {
  opacity: .55;
  text-decoration: line-through;
}

.quiz-card__feedback {
  font-family: var(--font-cute);
  font-size: 18px;
  color: var(--wine);
  min-height: 26px;
  margin: var(--sp-2) 0 0;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity   var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-premium);
}
.quiz-card__feedback.is-on { opacity: 1; transform: none; }
.quiz-card__feedback.is-right { color: var(--gold); }

.quiz-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-3);
}
.quiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream-dark);
  border: 1.5px solid var(--dusty-pink);
}
.quiz-dot.is-current { background: var(--wine); border-color: var(--wine); }
.quiz-dot.is-done     { background: var(--dusty-pink); }

.quiz-result {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 5vw, 24px);
  color: var(--burgundy);
  max-width: 30ch;
  margin: var(--sp-3) auto 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   var(--dur-medium) var(--ease-premium),
    transform var(--dur-medium) var(--ease-premium);
}
.quiz-result.is-on { opacity: 1; transform: none; }

.quiz-skip {
  display: block;
  margin: var(--sp-3) auto 0;
  padding: 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-cute);
  font-size: 15px;
  color: var(--dusty-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.quiz-skip:hover { color: var(--wine); }
.quiz-skip.is-done { opacity: 0; visibility: hidden; pointer-events: none; }


/* ==========================================================================
   WRITE SOMETHING BACK — the one place this site isn't one-way.
   ========================================================================== */
.writeback {
  padding: clamp(48px, 10vh, 88px) var(--sp-3);
  text-align: center;
  background: var(--cream-dark);
}

.writeback-card {
  width: min(480px, 100%);
  margin: var(--sp-3) auto 0;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-soft);
}

.writeback-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--burgundy);
  background: var(--cream);
  border: 1.5px solid var(--dusty-pink);
  border-radius: var(--r-sm);
  resize: vertical;
  min-height: 96px;
}
.writeback-input:focus-visible { outline-offset: 2px; }

.writeback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-2);
}
.writeback-actions .btn { padding: 12px 26px; font-size: 14.5px; }

.writeback-note {
  font-family: var(--font-cute);
  font-size: 17px;
  color: var(--wine);
  min-height: 24px;
  margin: var(--sp-2) 0 0;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity   var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-premium);
}
.writeback-note.is-on { opacity: 1; transform: none; }


/* ==========================================================================
   GARDEN — draggable flowers with real spring physics.
   Rotation is written directly to each stem's inline transform every frame
   by garden.js, not via CSS transition — a continuous physics loop and a
   CSS transition would fight each other and stutter.
   ========================================================================== */
.garden {
  padding: 0 var(--sp-3) clamp(56px, 12vh, 96px);
  text-align: center;
  background: var(--cream);
  overflow: hidden;
}

.garden-bed {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 20px);
  max-width: 640px;
  height: clamp(200px, 40vw, 260px);
  margin: var(--sp-4) auto 0;
}
/* the ground line the stems appear to grow from */
.garden-bed::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dusty-pink) 20%, var(--dusty-pink) 80%, transparent);
  opacity: .5;
}

.garden-flower {
  position: relative;
  width: clamp(50px, 12vw, 76px);
  transform-origin: 50% 100%;     /* bends from the base, like a real stem */
  touch-action: none;             /* so a drag doesn't also scroll the page */
  cursor: grab;
}
.garden-flower.is-grabbed { cursor: grabbing; }
.garden-flower svg { width: 100%; height: auto; overflow: visible; display: block; }


/* ==========================================================================
   FINAL VIDEO (§4.10) — the exhale, not another spectacle.
   ========================================================================== */
.videosec {
  padding: clamp(56px, 11vh, 96px) var(--sp-3) clamp(72px, 14vh, 112px);
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}

/* thick white border — reads as a printed photo, not a <video> tag */
.frame {
  position: relative;
  width: min(660px, 100%);
  margin: 0 auto;
  padding: 14px 14px 46px;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: var(--shadow-strong);
  transform: rotate(-1.1deg);
}
.frame video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--burgundy-deep);
  border-radius: 2px;
}

.frame__placeholder {
  display: none;
  aspect-ratio: 16 / 10;
  place-content: center;
  gap: var(--sp);
  color: var(--dusty-pink);
  background:
    repeating-linear-gradient(135deg,
      rgba(223, 160, 179, .14) 0 12px,
      rgba(223, 160, 179, .05) 12px 24px),
    var(--cream-dark);
  border-radius: 2px;
}
.frame__placeholder svg { margin: 0 auto; }
.frame__placeholder p {
  font-family: var(--font-cute);
  font-size: 18px;
  margin: 0;
}
/* --- YouTube click-to-play facade ---------------------------------------- */
.frame__yt {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cream-dark);
}
.frame__yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.frame__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  display: grid;
  place-items: center;
}
.frame__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a soft burgundy wash so the play mark reads over any thumbnail */
.frame__play::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(48, 13, 25, .42), rgba(74, 22, 38, .16));
  transition: background var(--dur-medium) var(--ease-soft);
}
.frame__play:hover::after,
.frame__play:focus-visible::after {
  background: linear-gradient(to top,
    rgba(48, 13, 25, .28), rgba(74, 22, 38, .06));
}

.frame__glyph {
  position: relative;
  z-index: 2;
  width: clamp(58px, 13vw, 78px);
  filter: drop-shadow(0 6px 16px rgba(48, 13, 25, .5));
  transition: transform var(--dur-medium) var(--ease-bounce);
}
.frame__glyph svg { width: 100%; height: auto; }
.frame__play:hover .frame__glyph,
.frame__play:focus-visible .frame__glyph { transform: scale(1.12); }

.frame.is-missing video { display: none; }
.frame.is-missing .frame__placeholder { display: grid; }
.frame.is-missing::after { content: none; }   /* the frame has its own empty state */

.videosec__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.mascot-mini {
  display: block;
  width: 76px;
  height: 76px;
  animation: breathe 3.6s var(--ease-soft) infinite;
}
.mascot-mini svg,
.mascot-mini .mascot-img { width: 100%; height: 100%; }

.circle-photo {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid #FFFFFF;
  box-shadow: var(--shadow-soft);
}
.circle-photo img { width: 100%; height: 100%; object-fit: cover; }

.videosec__caption {
  font-family: var(--font-cute);
  font-size: clamp(19px, 4.8vw, 23px);
  color: var(--wine);
  max-width: 26ch;
  margin: var(--sp-3) auto 0;
  line-height: 1.5;
}