/* ============================================================
   ROLL — the ticket rolls in over the hero + form, on the diver.
   Past the request form the hero + form block pins by its bottom edge and
   HOLDS (the form stays readable for a whole beat). Then, scroll-linked:
   the form lifts away and the pinned block washes to the seam colour, the
   site's blue diver (the homepage hero frame) fades up behind, the ticket
   rides in from below and settles on it, and at the end the diver fades
   back to the seam so the section joins the comparison with no edge.
   roll.js wraps hero + form + ticket in .selr-stage at boot, mounts the
   diver backdrop inside the ticket section, and drives:
     --roll-p  raw progress 0..1 over the whole runway
     --roll-f  form lifts away          --roll-w  pinned block washes to seam
     --roll-v  diver fades up           --roll-e  ticket rides in
     --roll-h  ticket drifts on hold    --roll-o  diver fades out to seam
   Loaded after ground.css so the ticket ground can go transparent.
   ============================================================ */

.selr-stage {
  position: relative;
  /* roll.js mounts this wrapper inside the Framer <main>, which is a centred
     flex column. Without an explicit width the wrapper shrinks to its content
     and the hero paints as a narrow panel with bare gutters on wide screens. */
  width: 100%;
  align-self: stretch;
  --roll-p: 0; --roll-f: 0; --roll-w: 0; --roll-v: 0; --roll-e: 0; --roll-h: 0; --roll-o: 0;
  --roll-seam: #FAF9F5;
}

/* the pinned block: no filter (a blurred edge is what made the exit harsh);
   it simply washes to the seam colour under the arriving backdrop */
.selr-stage-pin {
  position: sticky;
  width: 100%;
  z-index: 0;
}
.selr-stage-pin::after {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  background: var(--roll-seam);
  opacity: var(--roll-w);
  pointer-events: none;
}
/* after the hold the whole pinned block scrolls off through the top at the
   page's own pace, so the request form is readable right up to the edge */
.selr-stage-pin {
  transform: translateY(calc(-100vh * var(--roll-f)));
  will-change: transform;
}
.selr-stage-pin #request {
  will-change: transform, opacity;
}

/* the ticket section rides over it, transparent, block flow so the backdrop
   and the content can both stick to the top of the viewport */
#the-ticket.selr-ticket-sec {
  position: relative;
  z-index: 2;
  display: block;
  height: 240vh;              /* the runway: hold, wash, diver, ride-in, settle, fade-out */
  background: transparent !important;
}
#the-ticket.selr-ticket-sec .selr-sec-inner {
  position: sticky; top: 0; z-index: 1;
  margin: 0 auto;
  height: 100vh;
  padding-top: 40px;
  padding-bottom: 26vh;       /* the ticket sits above centre; the diver has the lower third */
  justify-content: center;
}
/* The runway pane is a transparent 100vh box riding over the pinned form on a
   higher stacking layer. Left hit-testable it swallows every click on the live
   #request form beneath it: the page looks perfect and taps do nothing, with no
   error. Only the ticket card itself is a real target, so the pane passes
   everything else through. */
#the-ticket.selr-ticket-sec,
#the-ticket.selr-ticket-sec .selr-sec-inner,
#the-ticket.selr-ticket-sec .selr-ticket { pointer-events: none; }
#the-ticket.selr-ticket-sec.is-live .selr-ticket-line,
#the-ticket.selr-ticket-sec.is-live .selr-pill-btn { pointer-events: auto; }

/* the backdrop, full-bleed, pinned with the ticket. The wrap is absolute and
   full-height so the sticky child takes no flow space and stops with the
   runway. */
.selr-roll-bgwrap {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.selr-roll-bg {
  position: sticky; top: 0; z-index: 0;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  /* soft top and bottom edges: the frame dissolves into the page ground
     instead of ending on a line, under the nav and above the hand-off */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* the field: the same homepage frame, but drawn from its light alone. The
   frame is 300vh and anchored at the top, so what fills the viewport is the
   open water and the rays, and the figure sits two screens below the fold.
   The tickets arrive on light, not on a picture of a man. */
.selr-roll-bg-img {
  position: absolute;
  top: 0; left: 50%;
  height: 300vh; width: auto;
  min-width: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  opacity: var(--roll-v);
  transform: translateX(-50%) scale(calc(1.05 - .05 * var(--roll-v)));
  transform-origin: 50% 20%;
  will-change: opacity, transform;
}
/* the veil: a whisper of depth so the ticket sits on the field, kept light
   so the water stays blue and clear */
.selr-roll-bg-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(23, 21, 31, 0) 0%,
    rgba(23, 21, 31, .08) 45%,
    rgba(23, 21, 31, .20) 100%);
  opacity: var(--roll-v);
}
/* the exit: the diver hands back to the seam colour before the section
   scrolls off, so the join with the comparison never shows */
.selr-roll-bg-out {
  position: absolute; inset: 0;
  background: var(--roll-seam);
  opacity: var(--roll-o);
}
.selr-roll-bg-img, .selr-roll-bg-veil, .selr-roll-bg-out {
  transition: opacity .12s linear;
}

/* the ticket swings in, scroll-linked: up from below-left, unrotating and
   sharpening as it comes, then keeps a slow drift upward through the hold
   so it never sits dead */
#the-ticket .selr-ticket[data-selr-page] { opacity: 1 !important; animation: none !important; }
.selr-roll-item {
  width: 100%;
  opacity: var(--roll-e);
  filter: blur(calc(10px * (1 - var(--roll-e))));
  transform:
    translate(calc(-14vw * (1 - var(--roll-e))), calc(44vh * (1 - var(--roll-e)) - 6vh * var(--roll-h)))
    rotate(calc(-7deg * (1 - var(--roll-e))))
    scale(calc(.84 + .16 * var(--roll-e)));
  transform-origin: 30% 100%;
  transition: opacity .12s linear, filter .12s linear, transform .12s linear;
  will-change: transform, opacity, filter;
}

/* small screens: the ticket is nearly a full viewport tall, so the photo
   panel shortens and the drift eases so the card never leaves the frame */
@media (max-width: 809.98px) {
  #the-ticket.selr-ticket-sec .selr-sec-inner,
  .selr-roll-bg { height: 100vh; height: 100svh; }
  #the-ticket.selr-ticket-sec .selr-sec-inner { padding-top: 24px; padding-bottom: 24px; }
  .selr-roll-bg-img { left: 0; height: 100%; width: 100%; object-position: 50% 0%; transform: none; }
  #the-ticket .selr-ticket-photo,
  #the-ticket .selr-ticket-photo img { height: 150px; }
  .selr-roll-item {
    transform:
      translate(calc(-14vw * (1 - var(--roll-e))), calc(44vh * (1 - var(--roll-e)) - 2vh * var(--roll-h)))
      rotate(calc(-7deg * (1 - var(--roll-e))))
      scale(calc(.84 + .16 * var(--roll-e)));
  }
}

/* THE CHECKOUT RELEASES THE PIN (2026-08-24).
   selr-event-form.js marks the stage when the GoHighLevel checkout opens. The
   pin sticks by its bottom edge, so once the block is taller than the viewport
   it reaches its sticky top and simply stops: an iframe inside it cannot be
   scrolled to, however far the wheel turns. That is what a buyer met after
   pressing "Pay for my place" — a blank screen with 22px of checkout wedged at
   the bottom edge. While the checkout is open the stage is an ordinary block,
   the ticket runway collapses to its content, and the payment form scrolls
   normally. The motion is decoration; taking the money is not. */
.selr-stage.is-checkout .selr-stage-pin {
  position: static;
  top: auto !important;
  transform: none;
}
.selr-stage.is-checkout .selr-stage-pin::after { display: none; }
.selr-stage.is-checkout #the-ticket.selr-ticket-sec { height: auto; }
.selr-stage.is-checkout #the-ticket.selr-ticket-sec .selr-sec-inner {
  position: relative; height: auto; padding-top: 110px; padding-bottom: 110px;
}
.selr-stage.is-checkout .selr-roll-bg { position: absolute; inset: 0; height: auto; }
.selr-stage.is-checkout .selr-roll-item {
  opacity: 1; filter: none; transform: none; transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .selr-stage-pin { position: static; }
  .selr-stage-pin::after { display: none; }
  .selr-stage-pin #request { transform: none; opacity: 1; }
  #the-ticket.selr-ticket-sec { height: auto; }
  #the-ticket.selr-ticket-sec .selr-sec-inner { position: relative; height: auto; padding-top: 110px; padding-bottom: 110px; }
  .selr-roll-bg { position: absolute; inset: 0; height: auto; }
  .selr-roll-bg-img, .selr-roll-bg-veil { opacity: 1; }
  .selr-roll-bg-img { transform: translateX(-50%); }
  .selr-roll-bg-out { display: none; }
  .selr-roll-item { opacity: 1; filter: none; transform: none; transition: none; }
}