/* Festival tickets (/one-long-friday/tickets/): loads after olf.css and plans.css and only adds what this page needs.
   The five tickets are drawn once each (SVG symbols at the end of the page) and animated here: a sheen that crosses the card, a
   holographic strip that drifts through its colours, sparkles that twinkle, embers that rise and a glow that breathes on the pass.
   Item-quality colours: common, uncommon green, rare blue, epic violet, legendary ember. Cards never move under the pointer; they only light up. */

.tk--ga { --q: #e4dccb; --q-soft: rgba(228, 220, 203, 0.28); }
.tk--plus { --q: #4ee06f; --q-soft: rgba(78, 224, 111, 0.28); }
.tk--vip { --q: #3f8fff; --q-soft: rgba(63, 143, 255, 0.3); }
.tk--platinum { --q: #c07cff; --q-soft: rgba(192, 124, 255, 0.32); }
.tk--artist { --q: #ff8a1f; --q-soft: rgba(255, 138, 31, 0.34); }

/* ---- intro ---- */
.phero--tickets::before { background: radial-gradient(55% 60% at 85% 20%, rgba(255, 138, 31, 0.14), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(255, 200, 87, 0.07), transparent 70%); }
.phero__stack { position: relative; display: grid; grid-template-columns: 1fr; margin: 0; aspect-ratio: 640 / 420; }
.phero__stack .tk { position: absolute; left: 0; right: 0; width: 86%; margin-inline: auto; }
.phero__stack .tk--vip { top: 0; transform: translateX(-6%) rotate(-6deg); }
.phero__stack .tk--platinum { top: 22%; transform: translateX(4%) rotate(2deg); }
.phero__stack .tk--artist { top: 44%; transform: translateX(-2%) rotate(-3deg); }
.phero__stack .tk { transition: filter 0.5s var(--ease); }
.phero__stack .tk:hover { filter: brightness(1.06); }

/* ---- the drawing ---- */
.tk { position: relative; border-radius: 10px; isolation: isolate; box-shadow: 0 30px 50px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--q-soft); }
.tk__art { display: block; width: 100%; height: auto; border-radius: 10px; overflow: visible; }
.tk--mini .tk__art { box-shadow: none; }
.tk--artist .tk { box-shadow: 0 30px 60px -30px rgba(255, 138, 31, 0.6), 0 0 0 1px var(--q-soft); }
.tk--platinum .tk { box-shadow: 0 30px 60px -32px rgba(192, 124, 255, 0.55), 0 0 0 1px var(--q-soft); }
.tk--vip .tk { box-shadow: 0 30px 60px -34px rgba(63, 143, 255, 0.5), 0 0 0 1px var(--q-soft); }

.tk__sheen { animation: tk-sheen 7s var(--ease) infinite; }
.tk__sheen--strong { animation-duration: 5.5s; }
.tk--ga .tk__sheen { animation-duration: 11s; }
@keyframes tk-sheen { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(900px); } }
.tk__holo { animation: tk-holo 6s linear infinite; }
@keyframes tk-holo { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.tk__sparks use { transform-box: fill-box; transform-origin: center; animation: tk-twinkle 2.8s ease-in-out infinite; opacity: 0.2; }
.tk__sparks use:nth-child(2) { animation-delay: 0.7s; animation-duration: 3.4s; }
.tk__sparks use:nth-child(3) { animation-delay: 1.3s; animation-duration: 2.3s; }
.tk__sparks use:nth-child(4) { animation-delay: 1.9s; animation-duration: 3.1s; }
.tk__sparks use:nth-child(5) { animation-delay: 0.4s; animation-duration: 2.6s; }
@keyframes tk-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.tk__embers circle { animation: tk-ember 5s ease-out infinite; opacity: 0; }
.tk__embers circle:nth-child(2) { animation-delay: 0.8s; animation-duration: 6s; }
.tk__embers circle:nth-child(3) { animation-delay: 1.6s; animation-duration: 4.6s; }
.tk__embers circle:nth-child(4) { animation-delay: 2.4s; animation-duration: 5.4s; }
.tk__embers circle:nth-child(5) { animation-delay: 3.1s; animation-duration: 6.4s; }
.tk__embers circle:nth-child(6) { animation-delay: 0.4s; animation-duration: 5.8s; }
.tk__embers circle:nth-child(7) { animation-delay: 2s; animation-duration: 4.9s; }
@keyframes tk-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(14px, -250px); opacity: 0; } }
.tk__glow { animation: tk-breathe 3.6s ease-in-out infinite; }
@keyframes tk-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .tk__sheen, .tk__holo, .tk__sparks use, .tk__embers circle, .tk__glow { animation: none; }
    .tk__sparks use { opacity: 0.7; }
    .tk__embers circle { opacity: 0.5; }
    .tk__sheen { transform: translateX(380px); }
}

/* ---- the cards ---- */
.box-office { margin: 18px 0 0; min-height: 1.6em; }
.tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.ticket { position: relative; display: flex; flex-direction: column; padding: 18px 18px 22px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--bg-2); transition: border-color 0.35s, box-shadow 0.5s var(--ease); }
.ticket:hover { border-color: var(--q); box-shadow: 0 0 0 1px var(--q-soft), 0 24px 60px -40px var(--q); }
.ticket .tk { margin: 0 0 18px; }
.tk__rarity { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--q); font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.tk__rarity i { width: 9px; height: 9px; border-radius: 2px; background: var(--q); box-shadow: 0 0 10px var(--q); }
.ticket h3 { font-size: 26px; margin-top: 12px; }
.ticket .plan__price span { display: block; width: 100%; }
.ticket .checks--tight { flex: 1; }
.ticket .checks--tight li b { color: var(--ink); font-weight: 600; }
.tk__buy { margin-top: 22px; width: 100%; }
.tk__buy[aria-disabled="true"] { pointer-events: none; opacity: 0.55; }
.tk--artist .tk__buy { background: linear-gradient(90deg, #ffb347, #ff8a1f 60%, #ffc857); color: #1c1206; }
.tk--artist .tk__buy:hover { background: linear-gradient(90deg, #ffc46b, #ff9a3d 60%, #ffd374); box-shadow: 0 18px 40px -22px rgba(255, 138, 31, 0.85); }

/* the pass: a wide card, the drawing beside the words */
.ticket--pass { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 14px; padding: clamp(20px, 3vw, 36px); border-color: rgba(255, 138, 31, 0.38); background: linear-gradient(160deg, rgba(255, 138, 31, 0.1), var(--bg-2) 50%, rgba(192, 124, 255, 0.06)); }
.ticket--pass:hover { border-color: var(--q); }
.pass__art .tk { margin: 0; }
.pass__copy h3 { font-size: clamp(30px, 3.4vw, 44px); }
.pass__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.pass__cols .checks--tight { margin-top: 18px; }
.ticket--pass .tk__buy { width: auto; align-self: flex-start; margin-top: 26px; padding-inline: 34px; }

/* ---- compare (plans.css draws the table; the "no" mark hides its own word) ---- */
.compare .no { font-size: 0; }
.compare table { min-width: 960px; }
.compare td { font-size: 14px; }

/* ---- the waves ---- */
.waves { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; counter-reset: wave; }
.wave { position: relative; padding: 22px 18px 24px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--bg-2); }
.wave::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-2); }
.wave__n { display: block; margin-bottom: 14px; color: var(--dim); font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.wave h3 { font-size: 19px; }
.wave p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.wave.is-now { border-color: rgba(93, 224, 195, 0.45); }
.wave.is-now::before { background: var(--mint); }
.wave.is-now .wave__n { color: var(--mint); }
.wave.is-open { border-color: rgba(255, 200, 87, 0.4); }
.wave.is-open::before { background: var(--gold); }
.wave.is-open .wave__n { color: var(--gold); }
.wave.is-past { opacity: 0.6; }

/* ---- how it works ---- */
.how { grid-template-columns: repeat(4, 1fr); margin-top: clamp(28px, 4vw, 44px); }
.how .trial__card:first-child { border-left: 2px solid var(--gold); }

/* ---- find my ticket ---- */
.find { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.find__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--bg-2); }
.find__form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.find__form input { min-height: 48px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 400 16px var(--sans); transition: border-color 0.25s, box-shadow 0.25s; }
.find__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 200, 87, 0.18); }
.find__form button { grid-column: 1 / -1; justify-self: start; }
.find__out { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 15px; min-height: 1.5em; }
.find__out.is-bad { color: #ff9c7a; }
.find__out b { color: var(--gold); font-weight: 600; }
.find__out .serial { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---- phones and tablets ---- */
@media (max-width: 1100px) {
    .tickets { grid-template-columns: repeat(2, 1fr); }
    .waves { grid-template-columns: repeat(3, 1fr); }
    .how { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .phero__stack { display: none; }
    .tickets, .waves, .how, .pass__cols, .find, .find__form { grid-template-columns: 1fr; }
    .ticket--pass { grid-template-columns: 1fr; }
    .ticket--pass .tk__buy { width: 100%; }
    .compare__hint { display: block; }
}