/* ============================================================
   TIX HERO TICKET FAN v3 — matches design handoff.
   Two-tone ticket: coloured top (~60%) + white stub (~40%).
   Left-aligned content: overline / club / pill.  White stub:
   DATE + FROM/price + 1D barcode. Per-club gradients. Gentle
   float. Click-to-select highlight (one at a time).
   Deploy: wp-content/mu-plugins/tix-home-assets/tix-fan.css
   Structure (PHP): .tix-ticket > .tix-ticket-inner >
     .tix-ticket-top (overline, club/logo, pill)
     .tix-ticket-bottom (.tix-ticket-stubrow, .tix-ticket-barcode)
   ============================================================ */

.tix-fan{
  --tix-hero-bg:#0a0a0f;   /* MUST match .tix-hero bg so notches read as cut-outs */
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;      /* centre vertically so the fan aligns with the H1, not below it */
  min-height:480px;
  width:100%;
  perspective:1500px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

/* ---- the ticket (fan position/rotation + drag/click target) ---- */
.tix-ticket{
  position:absolute;
  width:206px;
  height:346px;
  transform-origin:bottom center;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
  text-decoration:none;
  /* SOFT EDGES (dark-UI): drop-shadow follows the notched/masked silhouette
     (box-shadow can't). Layer = faint light rim to lift off the dark bg +
     soft depth shadow + a whisper of outer glow. Tuned 'B medium' - present
     but never announces itself / never reads as a hover-glow. */
  filter:
    drop-shadow(0 0 0.7px rgba(255,255,255,.6))
    drop-shadow(0 28px 40px rgba(0,0,0,.6))
    drop-shadow(0 0 26px rgba(255,255,255,.07));
}

/* inner wrapper: the visual + the float animation (kept off the parent
   so it never fights the JS/fan transform => no flicker) */
.tix-ticket-inner{
  position:relative;
  width:100%;height:100%;
  border-radius:26px;   /* softer corners (was 18px) */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  /* depth now handled by the .tix-ticket drop-shadow filter (mask-aware);
     a box-shadow here would be clipped by the notch mask anyway. */
  animation:tix-float 6s ease-in-out infinite;
  will-change:transform;
}

/* ---- TWO-TONE ---- */
.tix-ticket-top{
  position:relative;
  flex:0 0 60%;
  padding:26px 22px 20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* LEFT aligned per handoff */
  text-align:left;
  color:#fff;
  background:linear-gradient(165deg,#ED2893 0%,#FC4101 100%); /* default; per-club below */
}
.tix-ticket-bottom{
  position:relative;
  flex:1 1 auto;
  background:#fff;
  padding:16px 16px 14px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* ---- PER-CLUB accent token (drives gradient top, price + white-stub border) ---- */
.tix-ticket[data-slug="ushuaia"]  { --tix-accent:#12B39A; --tix-accent-2:#22D3C4; }  /* teal->cyan */
.tix-ticket[data-slug="pacha"]    { --tix-accent:#F5333B; --tix-accent-2:#FF7A3D; }  /* red->orange */
.tix-ticket[data-slug="hi-ibiza"] { --tix-accent:#FF2D9B; --tix-accent-2:#FF7DB5; }  /* hot pink->soft pink */
.tix-ticket[data-slug="unvrs"]    { --tix-accent:#6D28D9; --tix-accent-2:#A855F7; }  /* deep violet->purple */
.tix-ticket[data-slug="dc10"]     { --tix-accent:#FF7A00; --tix-accent-2:#FFB020; }  /* orange->amber */

.tix-ticket-top{
  background:linear-gradient(165deg,var(--tix-accent,#ED2893) 0%,var(--tix-accent-2,#FC4101) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4);  /* top catch-light for soft lit edge */
}
.tix-stub-price{ color:var(--tix-accent,#ED2893); }

/* tear line at the 60% divide */
.tix-ticket-top::after{
  content:"";
  position:absolute;left:12px;right:12px;bottom:0;
  border-bottom:2px dashed rgba(255,255,255,.6);
}
/* side notches at the 60% divide — GENUINELY transparent holes punched via a
   radial-gradient mask, so whatever is behind (incl. the hero glow) shows
   through, not a flat black dot. (Mobile uses Swiper's flat 'slide' effect, so
   there is no 3D transform to conflict with the mask => works everywhere.) */
.tix-ticket-notch{ display:none; }
.tix-ticket-inner{
  -webkit-mask:
    radial-gradient(circle 11px at 0 60%, transparent 0 11px, #000 11.5px) left/50.5% 100% no-repeat,
    radial-gradient(circle 11px at 100% 60%, transparent 0 11px, #000 11.5px) right/50.5% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 60%, transparent 0 11px, #000 11.5px) left/50.5% 100% no-repeat,
    radial-gradient(circle 11px at 100% 60%, transparent 0 11px, #000 11.5px) right/50.5% 100% no-repeat;
}

/* club LOGO slot (SVG drops in here; text fallback until assets land).
   Sits in the VERTICAL MIDDLE of the coloured top: the logo takes the
   flexible middle space (flex:1) and centres itself; the event name is
   pushed to the bottom edge of the coloured section (margin-top:auto). */
.tix-ticket-logo{
  display:flex;align-items:center;justify-content:flex-start;
  flex:1 1 auto;            /* eat the free space so the logo centres vertically */
  min-height:54px;
  padding:6px 4px;          /* a touch more breathing room around the mark */
  margin:0;
}
.tix-ticket-logo img{ max-height:60px;max-width:150px;width:auto;filter:brightness(0) invert(1); }
.tix-ticket-logo-fallback{
  font-size:22px;font-weight:800;line-height:1;letter-spacing:-.01em;color:#fff;
  text-transform:uppercase;
}
/* EVENT name — now the heading (was the club style), smaller so long names fit.
   margin-top:auto anchors it to the BOTTOM of the coloured top, just above the
   dashed tear line, instead of sitting right under the logo. */
/* EVENT name — mirrors .tix-stub-date styling (14px/800/uppercase/tight track)
   but in white. margin-top:auto anchors it to the bottom of the coloured top. */
.tix-ticket-event{
  font-size:14px;font-weight:800;line-height:1.15;letter-spacing:.01em;color:#fff;
  text-transform:uppercase;
  margin:auto 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* ---- white stub ---- */
.tix-ticket-stubrow{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
}
.tix-stub-block{ display:flex;flex-direction:column; }
.tix-stub-block--right{ align-items:flex-end;text-align:right; }
.tix-stub-label{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#9098a3;margin-bottom:3px;
}
.tix-stub-date{ font-size:14px;font-weight:800;color:#15181f;text-transform:uppercase;letter-spacing:.01em; }
.tix-stub-price{ font-size:15px;font-weight:800; }

/* ---- SCAN ROW (redesigned 15 Jul) ----
   Old design stacked a QR on TOP of a full-width 1D barcode = two competing
   scan metaphors in one strip (looked busy/confused). New layout: QR square
   hard-LEFT (the real scannable hero), then a thin 1D barcode strip to the
   right acting as decorative ticket texture, with a small 'scan for event'
   label above it. One clear focal point, authentic ticket-stub feel. */
.tix-ticket-scan{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-top:10px;
}
/* QR — the scannable hero, clean white quiet-zone pad, subtle inset border */
.tix-ticket-qr{
  flex:0 0 auto;
  width:56px;height:56px;
  background:#fff;
  padding:4px;box-sizing:border-box;border-radius:6px;
  border:1px solid #e6e8ec;
  display:flex;align-items:center;justify-content:center;
}
.tix-ticket-qr canvas,.tix-ticket-qr img{ width:100%;height:100%;display:block; }
/* right column: label stacked over the thin barcode texture */
.tix-ticket-scan-meta{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
/* 1D barcode — decorative texture strip (no QR overlaid), fills the QR height */
.tix-ticket-barcode{
  height:56px;width:100%;border-radius:2px;
  background:repeating-linear-gradient(90deg,
    #15181f 0, #15181f 2px, #fff 2px, #fff 4px,
    #15181f 4px, #15181f 7px, #fff 7px, #fff 9px,
    #15181f 9px, #15181f 10px, #fff 10px, #fff 13px,
    #15181f 13px, #15181f 16px, #fff 16px, #fff 18px,
    #15181f 18px, #15181f 19px, #fff 19px, #fff 22px);
}

/* ---- gentle float (idle) — really subtle ---- */
@keyframes tix-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* ---- DESKTOP fan — hand-of-cards, centre (idx2) front & tallest ---- */
@media (min-width:1025px){
  /* Tighter overlap + narrower spread so the fan stays inside the right
     column. Whole fan sits HIGHER (negative base translateY) to align up
     near the H1, not centred/low. */
  .tix-ticket[data-idx="0"]{ transform:rotate(-16deg) translateX(-190px) translateY(-28px); z-index:1; }
  .tix-ticket[data-idx="1"]{ transform:rotate(-8deg)  translateX(-98px)  translateY(-50px); z-index:2; }
  .tix-ticket[data-idx="2"]{ transform:rotate(0deg)   translateX(0)      translateY(-58px); z-index:5; }
  .tix-ticket[data-idx="3"]{ transform:rotate(8deg)   translateX(98px)   translateY(-50px); z-index:2; }
  .tix-ticket[data-idx="4"]{ transform:rotate(16deg)  translateX(190px)  translateY(-28px); z-index:1; }
  .tix-ticket[data-idx="1"] .tix-ticket-inner{ animation-delay:-1.2s; }
  .tix-ticket[data-idx="2"] .tix-ticket-inner{ animation-delay:-2.4s; }
  .tix-ticket[data-idx="3"] .tix-ticket-inner{ animation-delay:-3.6s; }
  .tix-ticket[data-idx="4"] .tix-ticket-inner{ animation-delay:-4.8s; }

  /* hover: gentle in-place lift, NO z-index change at all. z-index can't
     animate, so ANY hover reorder reads as a "flash". We keep each card in
     its natural stacking order and simply ease it up a few px — the lift +
     shadow give the hover feedback without ever snapping the stack order. */
  .tix-fan:not(.has-selection) .tix-ticket:hover .tix-ticket-inner{
    animation:none;
    transform:translateY(-14px) scale(1.03);
    box-shadow:0 24px 50px rgba(0,0,0,.42);
    transition:transform .3s ease, box-shadow .3s ease;
  }

  /* SELECTED (click): the card moves to CENTRE, straightens, scales up LARGE
     and sits high/front. --pull-x (JS) cancels its fan X-offset. Spring. */
  .tix-ticket.is-selected{ z-index:40 !important; }
  .tix-ticket.is-selected .tix-ticket-inner{
    animation:none !important;   /* MUST kill the float, not just pause — a
       paused animation's transform still overrides this rule's transform. */
    /* --unrotate (JS) cancels the parent card's fan rotation so the focused
       card is perfectly UPRIGHT (0deg), not tilted. */
    transform:translateX(var(--pull-x,0px)) translateY(-56px) scale(1.18) rotate(var(--unrotate,0deg));
    box-shadow:0 50px 100px rgba(0,0,0,.7);
    transition:transform .55s cubic-bezier(.34,1.2,.5,1),box-shadow .5s ease;
  }
  /* the OTHER cards SHUFFLE into a small overlapping ROW along the BOTTOM,
     tucked behind the focused card's lower edge (interfacecraft choreography).
     --row-x / --row-rot set per card by JS = evenly-spaced overlapping line. */
  .tix-fan.has-selection .tix-ticket:not(.is-selected){ z-index:2; }
  .tix-fan.has-selection .tix-ticket:not(.is-selected) .tix-ticket-inner{
    animation:none !important;   /* kill float so the row transform applies */
    filter:brightness(.82);
    /* --unrotate cancels the parent fan tilt; --row-rot adds the slight row fan */
    transform:translateX(var(--row-x,0px)) translateY(var(--row-y,150px)) scale(.46) rotate(calc(var(--unrotate,0deg) + var(--row-rot,0deg)));
    transition:transform .55s cubic-bezier(.22,1,.36,1),filter .4s ease;
  }
}

/* ---- TABLET (3 cards) ---- */
@media (min-width:768px) and (max-width:1024px){
  .tix-fan{ min-height:460px; }
  .tix-ticket{ width:200px;height:332px; }
  .tix-ticket[data-idx="0"]{ transform:rotate(-13deg) translateX(-170px) translateY(26px); z-index:1; }
  .tix-ticket[data-idx="1"]{ transform:rotate(0deg)   translateX(0)      translateY(-6px); z-index:5; }
  .tix-ticket[data-idx="2"]{ transform:rotate(13deg)  translateX(170px)  translateY(26px); z-index:1; }
  .tix-ticket[data-idx="3"],
  .tix-ticket[data-idx="4"]{ opacity:0;pointer-events:none; }
  .tix-ticket.is-selected .tix-ticket-inner{ animation:none !important; transform:translateY(-40px) scale(1.35); box-shadow:0 40px 80px rgba(0,0,0,.6); }
  .tix-fan.has-selection .tix-ticket:not(.is-selected) .tix-ticket-inner{ animation:none !important; filter:brightness(.82); transform:translateX(var(--row-x,0px)) translateY(var(--row-y,140px)) scale(.5) rotate(var(--row-rot,0deg)); }
}

/* ---- MOBILE: Tinder-style swipe deck ---- */
@media (max-width:767px){
  .tix-fan{ min-height:480px;touch-action:pan-y;align-items:center; }
  .tix-ticket{ width:min(74vw,286px);height:min(124vw,452px);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease; }
  /* default: hidden behind the active card */
  .tix-ticket{ transform:scale(.86) translateY(0);opacity:0;z-index:1; }
  /* active = front, centred, upright */
  .tix-ticket.is-active{ transform:scale(1) translateY(0) rotate(0);opacity:1;z-index:10; }
  .tix-ticket.is-active .tix-ticket-inner{ animation:none !important; }
  /* next card peeks behind, slightly down/right (the stack tell) */
  .tix-ticket.is-next{ transform:scale(.93) translateY(14px) rotate(3deg);opacity:.6;z-index:6; }
  .tix-ticket.is-next .tix-ticket-inner{ animation:none; }
  /* prev peeks the other way */
  .tix-ticket.is-prev{ transform:scale(.93) translateY(14px) rotate(-3deg);opacity:.6;z-index:6; }
  .tix-ticket.is-prev .tix-ticket-inner{ animation:none; }
}

@media (prefers-reduced-motion:reduce){
  .tix-ticket,.tix-ticket-inner{ transition:none!important;animation:none!important; }
}