/* Launch Boarding Pass v4 (2026-07-03): centered scratch-off overlay.
 * All selectors are .gr-bpass scoped so nothing collides with the shared
 * design system. Loaded only on the anonymous landing via the
 * gorocket/boarding_pass.html include. */

/* Light, non-locking veil (2026-07-06 redesign): the page behind stays
   visible + scrollable; the ticket floats and dismisses on X / click-outside. */
.gr-bpass-overlay { position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(5,20,32,.32);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  /* Non-blocking: the veil renders but lets wheel/click pass to the page so
     it stays scrollable/interactive. The ticket itself re-enables events. */
  pointer-events: none;
  opacity: 0; transition: opacity .3s ease; }
.gr-bpass { pointer-events: auto; }
.gr-bpass-overlay.is-open { opacity: 1; }
.gr-bpass-overlay[hidden] { display: none !important; }

.gr-bpass { position: relative; display: grid; grid-template-columns: 1.55fr auto 1fr; gap: 0;
  width: min(92vw, 760px); margin: auto; color: #fff;
  background: linear-gradient(165deg, #0e3349, #0a2233 68%);
  border-radius: 22px;
  /* drop-shadow (not box-shadow) so the punched notch holes cast correct
     shadow and the mask silhouette stays crisp. */
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(255,90,31,.10));
  /* Clean perforation: two real holes punched at the divider (~60.8% across,
     the 1.55fr|1fr grid boundary) so the page behind shows through — no ring,
     no shadow disc. */
  --gr-notch: 13px;
  -webkit-mask:
    radial-gradient(circle var(--gr-notch) at 60.8% calc(0px - var(--gr-notch)*0.15), #0000 calc(var(--gr-notch) - 1px), #000 var(--gr-notch)) no-repeat,
    radial-gradient(circle var(--gr-notch) at 60.8% calc(100% + var(--gr-notch)*0.15), #0000 calc(var(--gr-notch) - 1px), #000 var(--gr-notch)) no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; transform: scale(.94) translateY(12px);
  transition: opacity .4s cubic-bezier(.2,1,.3,1), transform .4s cubic-bezier(.2,1,.3,1); }
.gr-bpass-overlay.is-open .gr-bpass { opacity: 1; transform: none; }

.gr-bpass__close { position: absolute; top: .7rem; right: .8rem; z-index: 4;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  background: rgba(5,28,44,.55); cursor: pointer; line-height: 1;
  font-size: 1rem; color: rgba(255,255,255,.75); }
.gr-bpass__close:hover, .gr-bpass__close:focus-visible { color: #fff; border-color: rgba(255,255,255,.6); }

/* Guilloche security texture + subtle inner-highlight border (premium depth). */
.gr-bpass__main { position: relative; padding: 2.2rem 2.4rem; min-width: 0;
  border-radius: 22px 0 0 22px;
  background-image:
    repeating-linear-gradient(60deg, rgba(0,212,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-60deg, rgba(0,212,255,.045) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.gr-bpass__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #FF5A1F; }
.gr-bpass__title { margin: .55rem 0 .4rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; }
.gr-bpass__sub { margin: 0 0 1.6rem; font-size: .95rem; color: rgba(255,255,255,.75); max-width: 34ch; }
.gr-bpass__meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem 1.4rem; margin: 0; }
.gr-bpass__meta dt { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: .12rem; }
.gr-bpass__meta dd { margin: 0; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.88); }
#gr-bpass-status.is-unlocked { color: #FF5A1F; }

/* Just the dashed perforation line; the round holes are punched by the
   .gr-bpass mask (clean, page shows through, no ring/shadow disc). */
.gr-bpass__divider { position: relative; width: 0; border-left: 2px dashed rgba(255,255,255,.22); margin: 1.6rem 0; }

.gr-bpass__stub { position: relative; display: flex; min-width: 0; min-height: 380px; }

/* The scratch surface IS the whole stub: the foil canvas covers it
   edge-to-edge and the prize card + actions live underneath. */
.gr-scratch { position: relative; flex: 1; display: flex; overflow: hidden;
  border-radius: 0 21px 21px 0; }
.gr-scratch__inner { display: flex; flex-direction: column; justify-content: center;
  gap: .8rem; width: 100%; padding: 1.6rem 1.5rem; }
.gr-scratch__prize { position: relative; display: grid; place-items: center; gap: .4rem;
  padding: 1.4rem 1rem 1.6rem; border-radius: 14px; color: #051C2C; overflow: hidden;
  background: radial-gradient(circle at 32% 22%, #ffe0bd, #FF6A24 68%, #ef4f16 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); }
/* Holographic sheen slowly sweeping across the orange stub. */
.gr-scratch__prize::after { content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.32) 48%, rgba(120,220,255,.22) 52%, transparent 60%);
  transform: translateX(-30%); animation: grBpHolo 5.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes grBpHolo { 0%,100% { transform: translateX(-45%); } 50% { transform: translateX(45%); } }
.gr-bpass__rocket { position: absolute; top: .7rem; left: .8rem; width: 20px; height: 20px;
  color: rgba(5,28,44,.8); }
.gr-scratch__unlocked { font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #051C2C;
  border: 1.5px solid rgba(5,28,44,.55); border-radius: 999px; padding: .3rem .8rem; }
.gr-scratch__unlocked[hidden] { display: none !important; }
.gr-scratch__off { font-size: .82rem; font-weight: 700; letter-spacing: .04em; opacity: .9;
  text-align: center; padding: 0 .4rem; }
.gr-scratch__mask, .gr-scratch__code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 2rem; letter-spacing: .1em; font-weight: 800; }
.gr-scratch__code[hidden] { display: none !important; }
.gr-scratch__cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;
  cursor: grab; touch-action: none; transition: opacity .45s ease; }
.gr-scratch__cover.is-cleared { opacity: 0; pointer-events: none; }
.gr-scratch__sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
  transform: translateX(-100%); }
.gr-bpass-overlay.is-open .gr-scratch__sweep { animation: grBpSweep 1.1s .55s ease both; }
@keyframes grBpSweep { from { opacity: 1; transform: translateX(-100%); } to { opacity: 1; transform: translateX(100%); } }
.gr-bpass__trail { position: absolute; inset: 0; pointer-events: none; color: rgba(255,255,255,.85); }
.gr-bpass__trail path { stroke-dasharray: 340; stroke-dashoffset: 340; }
.gr-bpass.is-revealed .gr-bpass__trail path { animation: grBpTrail .9s ease-out forwards; }
@keyframes grBpTrail { to { stroke-dashoffset: 0; opacity: 0; } }
.gr-bpass.is-revealed .gr-scratch { animation: grBpPulse .5s ease 1; }
@keyframes grBpPulse { 40% { transform: scale(1.015); } }

.gr-bpass__actions { display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
  width: 100%; animation: grBpIn .35s ease; }
.gr-bpass__actions[hidden] { display: none !important; }
@keyframes grBpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gr-bpass__cta { width: 100%; text-align: center; }
.gr-bpass__code { background: transparent; border: 1px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.85);
  border-radius: 999px; padding: .55rem 1rem; font-size: .82rem; cursor: pointer;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }
.gr-bpass__code:hover { border-color: #FF5A1F; }
.gr-bpass__code strong { letter-spacing: .1em; }
.gr-dust { position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.8); animation: grDust .6s ease-out forwards; }
@keyframes grDust { to { opacity: 0; transform: translateY(-14px) scale(.4); } }

@media (max-width: 640px) {
  /* Stacked: panels sit vertically with a horizontal perforation. Drop the
     desktop vertical-notch mask (page-behind punch is a desktop nicety). */
  .gr-bpass { grid-template-columns: 1fr; width: min(94vw, 420px); max-height: 92vh; overflow-y: auto;
    -webkit-mask: none; mask: none; }
  .gr-bpass__divider { width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(255,255,255,.22); margin: 0 1.2rem; }
  .gr-bpass__main { padding: 1.8rem 1.5rem 1.4rem; border-radius: 22px 22px 0 0; }
  .gr-bpass__stub { min-height: 300px; }
  .gr-scratch { border-radius: 0 0 21px 21px; }
  .gr-bpass__meta { gap: .7rem 1rem; }
}

/* Full-scratch rocket-fire celebration (visual only). A canvas overlays the
   stub; JS paints an orange/yellow flame plume + spark particles for ~1.2s. */
.gr-bpass__spark { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity .2s ease; }
.gr-bpass__spark.is-firing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gr-bpass-overlay { transition: none; }
  .gr-bpass { transition: none; opacity: 1; transform: none; }
  .gr-bpass-overlay.is-open .gr-scratch__sweep, .gr-bpass.is-revealed .gr-scratch,
  .gr-bpass.is-revealed .gr-bpass__trail path, .gr-scratch__prize::after { animation: none; }
  .gr-bpass.is-revealed .gr-bpass__trail { display: none; }
  .gr-bpass__spark { display: none; }
}