/* ==========================================================================
   Hero — cover photo, date sheet, scratch cards, flip countdown
   Behaviour: js/scratch.js, js/countdown.js
   ========================================================================== */

/* ---------- Cover: full-screen photo with names over it ---------- */
.cover {
  position: relative; overflow: hidden; background: var(--wine-deep);
  height: 92vh; height: 92svh; min-height: 560px; max-height: 820px;
}
.cover__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
}
.cover__fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 5, 11, .45) 0%, rgba(30, 5, 11, 0) 20%,
    rgba(30, 5, 11, 0) 46%, rgba(46, 8, 18, .55) 64%,
    rgba(46, 8, 18, .9) 82%, var(--wine-deep) 100%);
}
.cover__label {
  position: absolute; top: 28px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--serif); font-size: 12px; letter-spacing: .4em;
  text-transform: uppercase; color: #F6EBD6; font-weight: 600;
  text-shadow: 0 1px 12px rgba(30, 5, 11, .35);
}
.cover__label::before, .cover__label::after { content: ''; width: 26px; height: 1px; background: rgba(246, 235, 214, .7); }
.cover__names {
  position: absolute; left: 0; right: 0; bottom: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cover__logo { width: 84%; }
.cover__logo img { width: 100%; height: auto; }
.cover__sub { font-weight: 200; font-size: 13px; letter-spacing: .5em; color: #E3CFAA; padding-left: .5em; }

/* Entrance after the intro opens (js/intro.js adds .is-entered) */
.card.is-entered .cover__photo { animation: kenBurns 9s ease-out both; }
.card.is-entered .cover__label { animation: riseIn 1.2s ease .3s both; }
.card.is-entered .cover__names { animation: riseIn 1.4s ease .6s both; }

/* ---------- Cream sheet that slides over the cover ---------- */
.sheet {
  position: relative; z-index: 1; margin-top: -30px;
  border-radius: 30px 30px 0 0;
  background: inherit;
  box-shadow: 0 -12px 30px -18px rgba(30, 5, 11, .5);
}

/* ---------- Date block ---------- */
.date { padding: 40px 28px 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.date__day { font-family: var(--serif); font-size: 15px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }
.date__th { font-size: 15px; color: var(--muted); }
.date__venue { margin-top: 8px; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; color: var(--burgundy); }

/* ---------- Scratch-to-reveal cards ---------- */
.scratch-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scratch-hint { font-size: 12px; font-weight: 300; letter-spacing: .12em; color: var(--muted-2); }
.scratch-hint b { font-weight: 400; color: var(--burgundy); }
.scratch-row { display: flex; gap: 10px; }
.scratch {
  position: relative; width: 92px; height: 104px; border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px;
  background: #fff; border: 1px solid var(--sand);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; box-shadow: 0 10px 22px -16px rgba(74, 14, 30, .5);
}
.scratch__value { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; color: var(--wine); }
.scratch__value--sm { font-size: 26px; letter-spacing: .12em; }
.scratch__label { font-size: 10px; font-weight: 300; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.scratch canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: grab; transition: opacity .6s ease;
}
.scratch.is-revealed canvas { opacity: 0; pointer-events: none; }
.scratch.is-revealed .scratch__value { animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.scratch-skip {
  min-height: 44px; padding: 0 16px; border: 0; background: none;
  font-family: inherit; font-size: 12px; color: var(--muted-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- Flip countdown ---------- */
.countdown { margin-top: 14px; display: flex; gap: 10px; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.countdown__label { font-size: 11px; font-weight: 300; color: var(--muted-2); }
.countdown__label i {
  display: block; font-style: normal; font-family: var(--serif); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
/* split-flap card: markup is built by js/countdown.js */
.flip {
  position: relative; width: 64px; height: 60px; perspective: 300px;
  border-radius: 10px; box-shadow: 0 12px 20px -14px rgba(74, 14, 30, .7);
  font-size: 30px; font-weight: 200; color: #F6EBD6; font-variant-numeric: tabular-nums;
}
.flip__half, .flip__flap {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  background: var(--wine); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip__half span, .flip__flap span { display: block; height: 60px; line-height: 60px; text-align: center; }
.flip__half--top, .flip__flap--top { top: 0; border-radius: 10px 10px 0 0; transform-origin: 50% 100%; }
.flip__half--bottom, .flip__flap--bottom { bottom: 0; border-radius: 0 0 10px 10px; transform-origin: 50% 0; background: #561426; }
.flip__half--bottom span, .flip__flap--bottom span { transform: translateY(-50%); }
.flip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(30, 5, 11, .6); z-index: 3; }
.flip__flap { z-index: 2; visibility: hidden; }
.flip.is-flipping .flip__flap { visibility: visible; }
.flip.is-flipping .flip__flap--top { animation: flapTop .32s ease-in forwards; }
.flip.is-flipping .flip__flap--bottom { transform: rotateX(90deg); animation: flapBottom .32s ease-out .32s forwards; }

@keyframes kenBurns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes flapTop { to { transform: rotateX(-90deg); } }
@keyframes flapBottom { to { transform: rotateX(0deg); } }

@media (max-width: 360px) {
  .scratch { width: 82px; height: 96px; }
  .flip { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-entered .cover__photo, .card.is-entered .cover__label, .card.is-entered .cover__names { animation: none; }
  .flip.is-flipping .flip__flap { animation: none; visibility: hidden; }
}