/* Scene 3 — the scratch card sitting on 2.psd 'slide 3'.
   Card rect comes straight from the PSD: (221,2159)-(860,2772), rebased to
   the scene's own frame => left 221, top 239, 639 x 613. */

#slide3 .scene__backdrop {
  background-image: url('../assets/slide3-pattern.webp?v=8');
  background-size: auto 100dvh;
  background-repeat: repeat-x;
}

.card {
  position: absolute;
  left: 221px;
  top: 239px;
  width: 639px;
  height: 613px;
  border: 1.5px solid rgba(201, 161, 74, 0.35);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.07),
              0 24px 70px rgba(201, 161, 74, 0.15);
  transition: box-shadow 0.8s var(--ease-out), border-color 0.8s;
  /* A scratch is a long drag over text-bearing pixels: without these iOS
     raises the callout menu and starts a selection mid-stroke. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------- revealed content
 * Port of the reference card's `_hiddenContent_`: a cream plate with a crown
 * glyph, the script label, the gold-gradient date, the small italic sub and a
 * flower glyph. It is NOT the calendar -- that is scene 4's alone.
 *
 * Lengths are DESIGN px (the card is 639x613 inside the scaled 1080x1920
 * frame), so the reference's CSS-px values are scaled by 639/384 ~= 1.66,
 * 384px being the card width its mobile clamp() bounds resolve against. That
 * keeps every proportion the reference has at 390px wide.
 */
.card__reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 56px;                       /* ref 35px (20px @<=480) */
  border-radius: 40px;
  background: linear-gradient(135deg, #fdfaf6 0%, #f7efe3 50%, #f3e5d0 100%);
  box-shadow: inset 0 0 37px rgba(201, 161, 74, 0.14);   /* ref inset 30px #c9a14a24 */
  opacity: 0;
  pointer-events: none;
}

/* The reference's paper grain, the same fractal-noise SVG its `.paper-texture`
   uses. A background image, not a runtime filter — nothing here is composited
   live (see the iOS note in README). */
.card__reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.card__crown {
  font-size: 34px;
  line-height: 1;
  color: var(--c-gold);
  text-shadow: 0 0 10px rgba(201, 161, 74, 0.3);
  margin-bottom: 13px;
}

.card__label {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 70px;
  line-height: 1.1;
  letter-spacing: 1.7px;
  color: #400008;                      /* the reference's wine-dark */
  opacity: 0.95;
  /* Hello Bride's swashes overshoot the glyph box; iOS WebKit shears composited
     text at the box edge, so the box is padded to contain the ink. The negative
     margins keep the optical spacing the reference has. */
  padding: 0.10em 0.22em 0.16em;
  margin: -0.10em -0.22em -0.08em;
}

.card__date {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-indent: 2px;                    /* tracking is trailing-side; re-centre */
  white-space: nowrap;
  /* Cormorant's default figures are old-style -- without `case` the 0 and 2 in
     "2026" sit short, as they do nowhere else on this invite (FONTS.md trap 1). */
  font-feature-settings: 'case' 1;
  margin-top: 13px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #b8860b, #d4af37, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.card__sub {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-indent: 2px;                    /* tracking is trailing-side; re-centre */
  text-transform: uppercase;
  color: #b8860b;
}

.card__flower {
  font-size: 28px;
  line-height: 1;
  color: var(--c-gold);
  opacity: 0.85;
  margin-top: 17px;
}

/* Travelling-light border, ported from the reference card. */
.card__border {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.card__border-static {
  fill: none;
  stroke: rgba(201, 161, 74, 0.35);
  stroke-width: 2.2;
  transition: stroke 0.8s;
}
/* The glow used to be `filter: drop-shadow(...)` on the animated rect. An SVG
   filter over an element whose stroke-dashoffset changes every frame is
   re-rasterised on the main thread every frame, for as long as the card is on
   screen — measurably the worst offender in the post-hero scroll on iOS. The
   same look comes from a second, wider, fainter copy of the same stroke
   underneath, which the compositor handles for free. */
.card__border-halo,
.card__border-glow {
  fill: none;
  stroke: url(#gf-glow);
  stroke-linecap: round;
  stroke-dasharray: 360 1040;
  stroke-dashoffset: 1400;
  animation: travel-light 4.5s linear infinite;
}
.card__border-halo { stroke-width: 14; opacity: 0.28; }
.card__border-glow { stroke-width: 5; }
@keyframes travel-light {
  0%   { stroke-dashoffset: 1400; }
  100% { stroke-dashoffset: 0; }
}

/* The foil itself. `touch-action: none` is load-bearing: with `pan-y` a stroke
   that drifts vertically was handed to the scroller as well as to our pointer
   handler, so the page scrolled and rubber-banded under the finger while the
   card was being scratched — the "shakes the entire view" the client reported.
   A touch that STARTS on the foil now belongs to the foil, full stop; the page
   still scrolls normally from anywhere outside the card. Restored to `auto`
   (with pointer-events off) the moment the foil is gone. */
.card__foil {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 40px;
  touch-action: none;
}
/* Cursor affordances are for pointing devices only. Guarded so no hover state
   can ever be latched by a touch and left applied (a transform latched this
   way is what makes a card visibly jump on tap). */
@media (hover: hover) {
  .card__foil { cursor: grab; }
  .card__foil:active { cursor: grabbing; }
}
.card.is-revealed .card__foil { pointer-events: none; touch-action: auto; }

.card__particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 40px;
}

/* Keyboard affordance: the card is focusable and Enter/Space reveals. */
.card:focus-visible { outline: 3px solid var(--c-gold-lt); outline-offset: 4px; }