/* ==========================================================
   seal.css – realistic wax seal, satin ribbon, seal-breaking
   opening, and the tap-highlight fix.
   Load AFTER enchanted.css (it overrides the old seal).
   ========================================================== */

/* ---------- Remove the blue/grey flash when tapping on phones ---------- */
html { -webkit-tap-highlight-color: transparent; }

/* ---------- The seal button ---------- */
.intro__seal {
  width: 172px;
  height: 172px;
  margin: .25rem 0 .5rem;
  background: none;
  box-shadow: none;
  border-radius: 50%;
  animation: none;                       /* no floating – the ring does the inviting */
  filter: drop-shadow(0 12px 12px rgba(35, 42, 28, .34)) drop-shadow(0 2px 2px rgba(35, 42, 28, .35));
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;            /* no double-tap zoom delay */
}
.intro__seal::before { display: none; }  /* old dashed ring */
.intro__seal > span:not(.seal-half):not(.seal-whole) { display: none; }  /* old flat "J&M" text */
.intro__seal:active { transform: scale(.97); }

/* Keyboard focus ring, in the same light gold as the pulse */
.intro__seal:focus { outline: none; }
.intro__seal:focus-visible { outline: 2px solid #e6d3a3; outline-offset: 8px; }

.wax { display: block; width: 100%; height: 100%; overflow: visible; }
.wax__mono { font-family: var(--font-serif); font-size: 23px; font-weight: 600; letter-spacing: .5px; }
.wax__amp  { font-family: var(--font-script); font-weight: 400; font-size: 21px; }

/* The two halves sit on top of each other and are clipped along a jagged crack */
.intro__seal .seal-half {             /* beats the old ".intro__seal span" rule */
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 1.5s cubic-bezier(.6, 0, .3, 1);
}
/* Closed: show the whole seal. The halves wait, invisible, so there is no seam */
.intro__seal .seal-whole { position: absolute; inset: 0; display: block; }
.intro__seal .seal-half  { visibility: hidden; }
.intro.is-opening .seal-whole { visibility: hidden; }
.intro.is-opening .seal-half  { visibility: visible; }

.intro__seal .seal-half--left  { clip-path: polygon(0 0, 53% 0, 48% 14%, 55% 29%, 47% 44%, 54% 58%, 46% 73%, 52% 87%, 49% 100%, 0 100%); }
.intro__seal .seal-half--right { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 52% 87%, 46% 73%, 54% 58%, 47% 44%, 55% 29%, 48% 14%); }

/* ---------- Soft gold "tap me" ring ---------- */
.intro__seal::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid #e6d3a3;
  pointer-events: none;
  animation: seal-ripple 3.4s ease-out infinite;
}
@keyframes seal-ripple {
  0%        { transform: scale(.97); opacity: .85; }
  65%, 100% { transform: scale(1.3);  opacity: 0; }
}

/* ---------- Satin ribbon across both doors ---------- */
.intro__ribbon {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--seal-y, 50%);
  height: 30px;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.35) 2px 3px, transparent 3px calc(100% - 3px), rgba(0,0,0,.12) calc(100% - 3px) calc(100% - 2px), transparent calc(100% - 2px)),
    linear-gradient(180deg, #7f8b64 0%, #b7c09b 26%, #cfd6b6 38%, #a2ad85 58%, #87936a 82%, #6f7a55 100%);
  box-shadow: 0 3px 6px -2px rgba(40, 48, 30, .35);
}

/* ---------- Opening: the seal breaks and each half leaves with its door ---------- */
.intro.is-opening .intro__content { opacity: 1; transform: none; }
.intro.is-opening .intro__content > :not(.intro__seal) {
  opacity: 0;
  animation: none;                       /* stops "Tap the seal to open" pulsing back in */
  transition: opacity .45s ease;
}
.intro.is-opening .intro__seal {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 12px 12px rgba(35, 42, 28, .3));
}
.intro.is-opening .intro__seal::after { display: none; }
.intro.is-opening .seal-half--left  { transform: translateX(-62vw) rotate(-18deg); }
.intro.is-opening .seal-half--right { transform: translateX(62vw)  rotate(18deg); }