/* ==========================================================================
   STAY FREE ENTERPRISE — Boarding Pass transition
   Reskin of fx18-vault-door.js's clip-path mechanic (Credit Site/build/
   fx-lab/fx18-vault-door.js): the bank-vault metaphor is discarded
   (plan §4 Bucket C), the panel-parting mechanism is kept. Ivory ticket
   stub with a perforated tear-line (CSS mask, dotted holes) and a gold
   foil stamp accent at the seam. Reduced motion: crossfade only, no tear.
   ========================================================================== */

.sf-boarding-pass {
  position: relative;
  overflow: hidden;
  border-radius: var(--sf-radius-lg);
}

.sf-boarding-pass__panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 5;
  background: var(--sf-ivory);
  display: none; /* JS reveals only while playing */
}
.sf-boarding-pass__panel--l { left: 0; }
.sf-boarding-pass__panel--r { right: 0; }

/* perforated inner edge — scalloped hole pattern via mask, the "tear line" */
.sf-boarding-pass__panel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  background: var(--sf-ivory);
  -webkit-mask-image: radial-gradient(circle 5px at 8px 0, transparent 97%, #000 100%);
  -webkit-mask-size: 16px 16px;
  -webkit-mask-repeat: repeat-y;
  mask-image: radial-gradient(circle 5px at 8px 0, transparent 97%, #000 100%);
  mask-size: 16px 16px;
  mask-repeat: repeat-y;
}
.sf-boarding-pass__panel--l::after { right: -8px; }
.sf-boarding-pass__panel--r::after { left: -8px; }

/* gold foil stamp accent at the seam — settles into view as panels part */
.sf-boarding-pass__stamp {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 6;
  width: 54px; height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--sf-gold);
  pointer-events: none;
}
.sf-boarding-pass__stamp-inner {
  font-family: var(--sf-font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- static host content the panels part to reveal ---- */
.sf-boarding-pass__content { position: relative; }

/* armed (JS + motion only): hide the content pre-paint so the tear reveal is
   its FIRST appearance. A tiny inline arm script adds .sf-bp--armed; play() in
   boarding-pass.js removes it (behind the covering panels), and a safety timer
   removes it if the reveal never fires. No-JS / reduced-motion never arm, so
   the accessible fallback keeps the content visible from the first byte. */
.sf-bp--armed .sf-boarding-pass__content { opacity: 0; }

/* ---- demo trigger control (styleguide only) ---- */
.sf-boarding-pass-trigger { margin-top: var(--sf-space-3); }

/* ---- reduced motion: simple crossfade, panels never shown ---- */
@media (prefers-reduced-motion: reduce) {
  .sf-boarding-pass__panel,
  .sf-boarding-pass__stamp { display: none !important; }
  .sf-boarding-pass__content { animation: sf-bp-crossfade 0.4s var(--sf-ease-out); }
}
@keyframes sf-bp-crossfade { from { opacity: 0; } to { opacity: 1; } }