/* The "map ticket": the hero's main action, a gold card that sends visitors to the pandal finder.
   Left a maroon disc with a gold ring and a map pin that sends out a soft ping every few seconds, middle the title and
   what you get (the real pandal count, filled by js/map-ticket.js), right a caret pointing down to the finder.
   The surface is the site's own gold CTA gradient with faint contour and route lines that echo the finder's line map.
   The ticket sits right under the subtitle; the greeting, status, countdown and timeline follow it. */

/* the hero around it: a smaller disc and title on phones and short laptops, so the ticket lands above the music bar */
header .actions{margin-top:1rem;width:100%;justify-content:center}
#greet{margin-top:.7rem}
@media (max-width:520px){
  :root{--ps:clamp(120px,32vw,150px)}
  .stage{width:calc(var(--ps)*1.36);height:calc(var(--ps)*1.36)}
}
@media (min-width:521px) and (max-height:1000px){
  :root{--ps:clamp(150px,22vh,200px)}
  h1{font-size:clamp(2.8rem,8vh,4.4rem)}
}

.actions .mticket{margin:0 auto}
.mticket{--mt-ink:#3a0512;--mt-ink2:#5a1424;--mt-ring:#ffd27a;--mt-disc:#3a0512;--mt-pingc:rgba(255,210,122,.9);
  position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;width:min(100%,360px);min-height:64px;
  padding:10px 14px 10px 10px;border-radius:20px;text-decoration:none;text-align:left;color:var(--mt-ink);
  background:linear-gradient(135deg,#ffe9b0,#ffb347);
  box-shadow:0 8px 28px rgba(255,170,60,.5),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset;
  transition:transform .2s,box-shadow .2s;animation:mtGlow 2.6s ease-in-out infinite;overflow:hidden}
/* contour + route texture: thin rings off the right edge and one dotted route line, drawn in the ink colour at low alpha */
.mticket::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:
    radial-gradient(circle at 108% 120%,transparent 0 22px,var(--mt-ink) 22px 23px,transparent 23px 40px,var(--mt-ink) 40px 41px,
      transparent 41px 58px,var(--mt-ink) 58px 59px,transparent 59px 76px,var(--mt-ink) 76px 77px,transparent 77px 94px,var(--mt-ink) 94px 95px,transparent 95px),
    radial-gradient(circle at 30% -60%,transparent 0 70px,var(--mt-ink) 70px 71px,transparent 71px 88px,var(--mt-ink) 88px 89px,transparent 89px);
}
.mticket::after{content:"";position:absolute;left:62px;right:0;bottom:5px;height:2px;z-index:-1;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(90deg,var(--mt-ink) 0 6px,transparent 6px 12px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  transform:rotate(-1.5deg)}
.mticket:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,170,60,.65),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset}
.mticket:active{transform:scale(.97)}
.mticket:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@keyframes mtGlow{50%{box-shadow:0 8px 44px rgba(255,190,80,.85),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset}}

/* the pin disc and its ping */
.mt-pin{position:relative;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6a1226,var(--mt-disc) 70%);color:var(--mt-ring);
  box-shadow:0 0 0 2px var(--mt-ring),0 0 0 4px rgba(58,5,18,.18),0 3px 10px rgba(58,5,18,.35)}
.mticket .ph{position:relative;inset:auto;display:block;border-radius:0;opacity:1;transition:none;line-height:1}   /* not the hero's photo .ph */
.mt-pin .ph{font-size:24px;z-index:1}
.mt-pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mt-pingc);opacity:0;
  animation:mtPing 3.6s cubic-bezier(.2,.6,.3,1) 1.2s infinite}
@keyframes mtPing{0%{scale:1;opacity:.9}35%{scale:1.75;opacity:0}100%{scale:1.75;opacity:0}}

/* the ticket stub: a dashed seam between the disc and the words */
.mt-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;padding-left:12px;
  border-left:2px dashed rgba(58,5,18,.28)}
.mt-t{font-size:1.08rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-s{font-size:.8rem;font-weight:500;line-height:1.3;color:var(--mt-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mt-go{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(58,5,18,.12);color:var(--mt-ink);font-size:18px;line-height:1}
.mt-go .ph{animation:mtNudge 2.4s ease-in-out infinite}
@keyframes mtNudge{0%,60%,100%{translate:0 0}30%{translate:0 3px}}

/* light theme: the site's light fill and dark maroon ink; the disc stays maroon with its gold ring */
:where(html[data-theme="light"]) .mticket{--mt-ink:#3d0712;--mt-ink2:#5e0b1c;background:linear-gradient(135deg,#ffd36b,#f5a000);
  box-shadow:0 6px 22px rgba(245,160,0,.4),0 0 0 1px rgba(255,240,200,.6) inset,0 -2px 0 rgba(120,50,0,.2) inset;animation-name:mtGlowLight}
@keyframes mtGlowLight{50%{box-shadow:0 8px 32px rgba(245,160,0,.6),0 0 0 1px rgba(255,240,200,.6) inset,0 -2px 0 rgba(120,50,0,.2) inset}}

@media (prefers-reduced-motion:reduce){.mticket,.mt-pin::after,.mt-go .ph{animation:none}.mticket:hover{transform:none}}