/* ============================================================
   TIX HERO \u2014 Swiper "Cards" build (parallel to the custom fan).
   Reuses the ticket VISUALS from tix-fan.css, but overrides the
   fan's absolute-positioning so Swiper controls layout.
   Deploy: wp-content/mu-plugins/tix-home-assets/tix-swiper.css
   ============================================================ */

/* The media column fills the row height; center the fan within it so its
   vertical MIDDLE lines up with the H1 across the row (was a fragile fixed
   margin-top:-40px that let the fan hang low + overflow the row bottom). */
.tix-swiper-wrap{
  --tix-hero-bg:#0a0a0f;
  width:100%;
  height:100%;              /* fill the column so centering has room to work */
  min-height:400px;         /* match the hero row height as a floor */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;   /* vertical-centre the stack in the column */
  gap:16px;
  padding:0;
  margin:0;
}
@media (max-width:781px){
  .tix-swiper-wrap{ min-height:0; height:auto; padding:16px 0; }
}

/* the swiper viewport \u2014 sized to one card, cards effect stacks the rest */
.tix-swiper{
  width:240px;
  height:400px;
  overflow:visible;          /* let the stacked cards behind peek out */
  /* ANTI-FLASH (FOUC): hide the whole viewport until JS adds .tix-ready (right
     after new Swiper() stacks the cards). Stops the split-second where the 5
     slides paint side-by-side as plain HTML before the Cards effect kicks in.
     Container-level only - does NOT touch the per-ticket opacity:1 rule that
     fixes the mobile-blank bug. */
  opacity:0;
  transition:opacity .35s ease;
}
.tix-swiper.tix-ready,
.tix-swiper.swiper-initialized{ opacity:1; }  /* .swiper-initialized = JS-fail safety net */
.tix-swiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  overflow:visible;
  background:transparent;      /* no slide bg (was contributing to the black) */
}
/* belt-and-braces: neutralise any Swiper shadow panels if ever enabled */
.tix-swiper .swiper-slide-shadow,
.tix-swiper .swiper-slide-shadow-left,
.tix-swiper .swiper-slide-shadow-right{
  background:transparent !important;
}

/* ---- neutralise the fan's positioning inside a swiper slide ---- */
.tix-swiper .tix-ticket{
  position:relative;         /* was absolute in the fan */
  width:236px;
  height:392px;
  transform:none !important; /* Swiper drives the transform on the slide */
  opacity:1 !important;      /* never let the fan's deck opacity:0 apply here */
  cursor:grab;
}
.tix-swiper .swiper-slide:active .tix-ticket{ cursor:grabbing; }

/* keep the subtle idle float (it's on .tix-ticket-inner; Swiper transforms the
   .swiper-slide parent, so they don't conflict). Stagger per slide so they
   don't bob in unison. */
.tix-swiper .swiper-slide:nth-child(2) .tix-ticket-inner{ animation-delay:-1.2s; }
.tix-swiper .swiper-slide:nth-child(3) .tix-ticket-inner{ animation-delay:-2.4s; }
.tix-swiper .swiper-slide:nth-child(4) .tix-ticket-inner{ animation-delay:-3.6s; }
.tix-swiper .swiper-slide:nth-child(5) .tix-ticket-inner{ animation-delay:-4.8s; }
.tix-swiper .tix-ticket:hover .tix-ticket-inner{ box-shadow:0 22px 50px rgba(0,0,0,.45); }

/* nice depth shadow on the active card */
.tix-swiper .swiper-slide-active .tix-ticket-inner{
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

/* hint text */
.tix-swiper-hint{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin:0;
}

/* mobile: flat 'slide' effect (JS switches effect). Slides are auto-width so
   each needs an explicit width; container full width with peek. */
@media (max-width:767px){
  /* Cards effect on mobile too => keep the viewport card-sized + overflow
     visible so the stacked cards behind peek out (like desktop). */
  .tix-swiper{ width:266px; max-width:86vw; height:440px; overflow:visible; padding:8px 0; }
  .tix-swiper .swiper-slide{
    width:100% !important; height:420px !important;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  /* FORCE the ticket to fill the slide (base fan rule makes it absolute/tiny
     — that collapse was why the card painted as a solid black block). */
  .tix-swiper .tix-ticket{
    position:relative !important;
    width:100% !important; height:420px !important;
    transform:none !important;
    display:block !important;
    opacity:1 !important;   /* THE BUG: the fan's mobile swipe-deck rules set
       tickets to opacity:0 (shown only via .is-active). Swiper uses its own
       active class, so the tickets stayed invisible => the black/blank screen. */
  }
  .tix-swiper .tix-ticket-inner{
    position:relative !important;
    width:100% !important; height:100% !important;
    /* keep the mask ON mobile too => genuinely transparent notches (the mobile
       blank was an opacity bug, NOT the mask). Inherits from tix-fan.css. */
  }
  /* explicit two-tone heights so the gradient top + white stub always paint */
  .tix-swiper .tix-ticket-top{ flex:0 0 60% !important; height:60% !important; }
  .tix-swiper .tix-ticket-bottom{ flex:1 1 auto !important; }
}