/* Tombola WINgs · the raffle, right after the awards: each prize is a ticket, its photo and stub
   held together by a perforated line. Shared by /wings-gala and /leadgala; it only adds rules. */

.tombola{padding-top:24px;overflow:clip} /* same paper as the awards above, so it follows on without a second band of space;
   clip, like the awards above */
.tombola .intro-copy{max-width:56ch}
.tombola .cta-stack{display:grid;justify-items:center;gap:18px;margin-top:clamp(36px,4.5vw,56px);text-align:center}
.tombola .small-note{text-wrap:balance}

.tb-grid{position:relative;left:50%;translate:-50% 0;width:min(1120px,calc(100vw - 2*var(--gutter)));margin-top:clamp(36px,4.5vw,56px);
  display:grid;grid-template-columns:5fr 7fr;grid-template-rows:1fr 1fr;gap:clamp(16px,1.8vw,24px)}
.tb-grid .gold{grid-row:span 2}

/* the ticket: a photo and an ink stub; the notches are real cut-outs (masks), so the drop shadow follows them */
.tb-ticket{--n:13px;position:relative;display:grid;border-radius:var(--radius);overflow:hidden;isolation:isolate;filter:drop-shadow(0 22px 28px rgba(26,10,2,.2))}
.tb-ticket.v{grid-template-rows:minmax(0,1fr) auto}
.tb-ticket.h{grid-template-columns:40% minmax(0,1fr);min-height:330px}

.tb-photo{position:relative;overflow:hidden;background:var(--ink)}
.tb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s var(--ease)}
.tb-ticket.in .tb-photo img{transform:none}
.tb-ticket.v .tb-photo{min-height:clamp(320px,36vw,470px);
  -webkit-mask:radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
.tb-ticket.h .tb-photo{
  -webkit-mask:radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}

.tb-stub{position:relative;padding:clamp(22px,2.4vw,32px);color:var(--cream);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 140% at 100% 0,rgba(242,96,24,.24),rgba(242,96,24,0) 62%),var(--ink)}
.tb-ticket.v .tb-stub{
  -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
.tb-ticket.h .tb-stub{
  -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
/* the perforation, running between the two notches */
.tb-stub::before{content:"";position:absolute;pointer-events:none;border:0 dashed rgba(250,240,228,.26)}
.tb-ticket.v .tb-stub::before{top:0;left:calc(var(--n) + 8px);right:calc(var(--n) + 8px);border-top-width:2px}
.tb-ticket.h .tb-stub::before{left:0;top:calc(var(--n) + 8px);bottom:calc(var(--n) + 8px);border-left-width:2px}

.tb-stub .label{gap:0}
.tb-stub .label::before,.tb-stub .label::after{display:none}
.tb-stub h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.2;margin:.4em 0 .45em;color:var(--cream)}
.tb-stub p{margin:0;max-width:46ch;font-size:var(--fs-body);line-height:1.6;color:rgba(250,240,228,.8);text-wrap:balance}

/* Premiul I: the number of nights printed on the stub, like the value on a ticket */
.tb-val{display:inline-flex;align-items:baseline;gap:10px;margin:0 0 .5em}
.tb-val b{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1;color:var(--orange)}
.tb-val span{font-size:var(--fs-body);font-weight:700;letter-spacing:.06em;color:var(--cream)}

/* entrance: each ticket lands from a slight tilt (alternating sides), its photo settles, the perforation
   is drawn across, then the print on the stub rises line by line */
.tombola .tb-ticket.reveal{transform:translateY(56px) rotate(var(--tilt,-2.5deg)) scale(.96);transform-origin:50% 100%;
  transition-property:opacity,transform;transition-duration:.8s,1.3s;transition-timing-function:ease,var(--ease)}
.tombola .tb-ticket:nth-child(2){--tilt:2.5deg}
.tombola .tb-ticket.reveal.in{transform:none}
.tb-stub::before{transition:transform .9s var(--ease) .55s}
.tb-ticket.v .tb-stub::before{transform:scaleX(0)}
.tb-ticket.h .tb-stub::before{transform:scaleY(0)}
.tb-ticket.in .tb-stub::before{transform:none}
.tb-stub>*{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .9s var(--ease)}
.tb-stub>:nth-child(1){transition-delay:.6s}
.tb-stub>:nth-child(2){transition-delay:.72s}
.tb-stub>:nth-child(3){transition-delay:.84s}
.tb-stub>:nth-child(4){transition-delay:.96s}
.tb-ticket.in .tb-stub>*{opacity:1;transform:none}

/* the golden ticket: a slow shine crosses Premiul I now and then */
.tb-ticket.gold::after{content:"";position:absolute;inset:-10% -70%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,236,214,0) 44%,rgba(255,236,214,.3) 50%,rgba(255,236,214,0) 56%);transform:translateX(-60%)}

@media (hover:hover) and (pointer:fine){
  .tb-ticket .tb-photo img{transition:transform 1.8s var(--ease)}
  .tb-ticket.in:hover .tb-photo img{transform:scale(1.045)}
  .tombola.tb-live .tb-ticket.gold.in::after{opacity:1;animation:tbShine 8s cubic-bezier(.65,0,.35,1) 1.4s infinite}
}
@keyframes tbShine{0%{transform:translateX(-60%)}24%,100%{transform:translateX(60%)}}

@media (max-width:1000px){
  .tb-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .tb-grid .gold{grid-row:auto;grid-column:span 2}
  .tb-ticket.v .tb-photo{min-height:0;aspect-ratio:5/4}
  .tb-ticket.h{grid-template-columns:none;grid-template-rows:auto minmax(0,1fr);min-height:0}
  .tb-ticket.h .tb-photo{aspect-ratio:16/10;
    -webkit-mask:radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
  .tb-ticket.h .tb-stub{justify-content:flex-start;
    -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
  .tb-ticket.h .tb-stub::before{left:calc(var(--n) + 8px);right:calc(var(--n) + 8px);top:0;bottom:auto;border-left-width:0;border-top-width:2px}
  .tb-ticket.h .tb-stub::before{transform:scaleX(0)}
  .tb-ticket.h.in .tb-stub::before{transform:none}
}
@media (max-width:640px){
  .tb-grid{grid-template-columns:minmax(0,1fr)}
  .tb-grid .gold{grid-column:auto}
  .tb-ticket{--n:11px;filter:none;box-shadow:none}
  .tb-ticket.v .tb-photo{aspect-ratio:4/5}
}
@media (hover:none){.tb-ticket{filter:none}} /* touch: keep the cut-outs, drop the costly shadow */

@media (prefers-reduced-motion:reduce){
  .tb-photo img{transform:none;transition:none}
  .tombola .tb-ticket.reveal,.tb-stub::before,.tb-stub>*{transform:none;transition:opacity .4s ease}
  .tb-ticket.gold::after{display:none}
}