/*
 * Konser Ultah (Ulang Tahun): the birthday as a one-night concert tour.
 * A stage with a lighting rig whose beams sweep over a concert ticket; the stub tears off along the
 * perforation to open. Inside: tour poster, LED screen, lyric sheet, tour dates, lightsticks, marquee bulbs,
 * guitar picks, gaff-taped setlist, discography, photocards, ON AIR, seat map + VERIFIED stamp, fan signs,
 * VIP cards, festival line-up, crew passes, credits and an encore over the crowd.
 * Colors from the variant: --inv-primary (light 1), --inv-accent (light 2), --inv-background (the dark
 * stage, also the ink on paper), --inv-text, --inv-silver (metal, foil), --inv-paper (ticket stock).
 */

:root {
    --inv-primary: #8b5cf6;
    --inv-accent: #f472b6;
    --inv-background: #0d0d12;
    --inv-text: #f4f4f8;
    --inv-silver: #c9cbd6;
    --inv-paper: #f3f1fa;
    --inv-radius: 14px;
    --ku-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
    --ku-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ku-deep: var(--inv-background);
    --ku-card: color-mix(in srgb, var(--inv-text) 6%, var(--inv-background));
    --ku-card-2: color-mix(in srgb, var(--inv-text) 11%, var(--inv-background));
    --ku-line: color-mix(in srgb, var(--inv-text) 14%, transparent);
    --ku-line-2: color-mix(in srgb, var(--inv-text) 26%, transparent);
    --ku-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    /* the lights as readable small text on the dark stage */
    --ku-pri-text: color-mix(in srgb, var(--inv-primary) 62%, #fff);
    --ku-acc-text: color-mix(in srgb, var(--inv-accent) 72%, #fff);
    /* the lights as readable small text on paper */
    --ku-pri-ink: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background));
    --ku-holo: linear-gradient(115deg, var(--inv-primary), var(--inv-accent) 18%, var(--inv-silver) 34%, var(--inv-primary) 50%, var(--inv-accent) 68%, var(--inv-silver) 84%, var(--inv-primary));
    --ku-shadow: 0 24px 44px -26px rgb(0 0 0 / .85);
    --ku-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { background: var(--inv-background); scroll-behavior: smooth; }
body.konser-ultah-body {
    margin: 0; min-height: 100vh;
    background: var(--inv-background); color: var(--inv-text);
    font: 400 1rem/1.6 var(--ku-sans);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.konser-ultah-body *, .konser-ultah-body *::before, .konser-ultah-body *::after { box-sizing: border-box; }
/* zero specificity, so every component rule below can set its own margins */
:where(.konser-ultah-body) :where(p, h1, h2, h3, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(.konser-ultah-body) a { color: inherit; }
.konser-ultah-body img { max-width: 100%; }

.konser-ultah-preview {
    position: fixed; top: .6rem; left: 50%; z-index: 70; transform: translateX(-50%);
    padding: .35rem .85rem; border-radius: 999px; white-space: nowrap;
    background: var(--inv-paper); color: var(--ku-deep); font: 700 .68rem/1.3 var(--ku-sans);
}

.konser-ultah-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.konser-ultah-label { font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-hint { margin-top: .75rem !important; text-align: center; font-size: .8rem; line-height: 1.45; color: var(--ku-muted); }
.konser-ultah-lead { margin: -.4rem 0 1.4rem !important; color: var(--ku-muted); font-size: .95rem; }
.konser-ultah-barcode { display: block; color: currentColor; }

/* gaff tape */
.konser-ultah-tape {
    position: absolute; z-index: 3; top: -.7rem; width: 4.8rem; height: 1.45rem;
    background: color-mix(in srgb, var(--inv-silver) 78%, transparent);
    clip-path: polygon(0 10%, 5% 0, 10% 12%, 15% 0, 85% 0, 90% 12%, 95% 0, 100% 10%, 100% 90%, 95% 100%, 90% 88%, 85% 100%, 15% 100%, 10% 88%, 5% 100%, 0 90%);
}
.konser-ultah-tape--l { left: -.9rem; rotate: -32deg; }
.konser-ultah-tape--r { right: -.9rem; rotate: 30deg; }

/* ------------------------------------------------------------------ the lighting rig (cover + closing) */
.konser-ultah-rig { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.konser-ultah-rig__truss { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 1.5rem; }
.konser-ultah-rig__bar { fill: #18181f; }
.konser-ultah-rig__lattice { fill: none; stroke: color-mix(in srgb, var(--inv-silver) 45%, transparent); stroke-width: 1.4; }
.konser-ultah-rig__lamps { position: absolute; z-index: 2; top: .8rem; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 4%; }
.konser-ultah-rig__lamp { display: block; width: 1.5rem; height: auto; overflow: visible; }
.konser-ultah-rig__yoke { fill: #2b2b35; }
.konser-ultah-rig__can { fill: #1f1f28; stroke: color-mix(in srgb, var(--inv-silver) 30%, transparent); stroke-width: .8; }
.konser-ultah-rig__lens { fill: var(--inv-primary); filter: drop-shadow(0 0 4px var(--inv-primary)); }
.konser-ultah-rig__lamp--2 .konser-ultah-rig__lens, .konser-ultah-rig__lamp--4 .konser-ultah-rig__lens { fill: var(--inv-accent); filter: drop-shadow(0 0 4px var(--inv-accent)); }
.konser-ultah-rig__lamp--3 .konser-ultah-rig__lens { fill: #fff; filter: drop-shadow(0 0 5px #fff); }
.konser-ultah-rig__beams { position: absolute; inset: 2.3rem 0 0; }
.konser-ultah-rig__beam {
    --ku-beam: var(--inv-primary);
    position: absolute; top: 0; width: min(46vw, 15rem); height: 125svh; translate: -50% 0;
    transform-origin: 50% 0; rotate: var(--ku-rot, 0deg);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ku-beam) 70%, transparent), color-mix(in srgb, var(--ku-beam) 22%, transparent) 45%, transparent 78%);
    opacity: .34; mix-blend-mode: screen;
}
.konser-ultah-rig__beam--1 { left: 12%; --ku-rot: 16deg; }
.konser-ultah-rig__beam--2 { left: 31%; --ku-rot: -10deg; --ku-beam: var(--inv-accent); }
.konser-ultah-rig__beam--3 { left: 50%; --ku-rot: 4deg; --ku-beam: #fff; opacity: .2; }
.konser-ultah-rig__beam--4 { left: 69%; --ku-rot: 10deg; --ku-beam: var(--inv-accent); }
.konser-ultah-rig__beam--5 { left: 88%; --ku-rot: -16deg; }
html.inv-anim .konser-ultah-rig__beam { animation: konser-ultah-sweep 5.5s ease-in-out infinite alternate; }
html.inv-anim .konser-ultah-rig__beam--2 { animation-duration: 4.4s; animation-delay: -1.2s; }
html.inv-anim .konser-ultah-rig__beam--3 { animation-duration: 6.8s; animation-delay: -2.5s; }
html.inv-anim .konser-ultah-rig__beam--4 { animation-duration: 4.9s; animation-delay: -3.1s; animation-direction: alternate-reverse; }
html.inv-anim .konser-ultah-rig__beam--5 { animation-duration: 6s; animation-delay: -.6s; animation-direction: alternate-reverse; }
@keyframes konser-ultah-sweep { from { rotate: calc(var(--ku-rot) - 14deg); } to { rotate: calc(var(--ku-rot) + 14deg); } }

/* ------------------------------------------------------------------ cover: the ticket on the stage */
.konser-ultah-cover {
    position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ku-deep); color: var(--inv-text);
}
.konser-ultah-cover__haze {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 40% at 50% 104%, color-mix(in srgb, var(--inv-primary) 42%, transparent), transparent 70%),
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 40%),
        radial-gradient(circle at 88% 26%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 42%),
        radial-gradient(circle, color-mix(in srgb, var(--inv-text) 10%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
        var(--ku-deep);
}
.konser-ultah-cover__inner {
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center;
    width: 100%; max-width: 440px; min-height: 100svh; margin: 0 auto;
    padding: 3.6rem 1.1rem 2.6rem;
}
.konser-ultah-ticket { position: relative; display: flex; flex-direction: column; filter: drop-shadow(0 26px 34px rgb(0 0 0 / .7)); }

/* the main part: dark glossy stock with a holographic edge, round notches at the perforation */
.konser-ultah-ticket__main {
    position: relative; padding: .5rem .5rem .85rem; border-radius: 18px 18px 0 0;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-text) 12%, var(--ku-deep)), color-mix(in srgb, var(--inv-text) 5%, var(--ku-deep)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-text) 16%, transparent);
    -webkit-mask: radial-gradient(circle at 0 100%, #0000 .75rem, #000 calc(.75rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 .75rem, #000 calc(.75rem + .5px)) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 100%, #0000 .75rem, #000 calc(.75rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 .75rem, #000 calc(.75rem + .5px)) right / 51% 100% no-repeat;
}
.konser-ultah-ticket__main::before {
    content: ''; position: absolute; top: 1.2rem; bottom: 1.6rem; right: 0; width: 4px; border-radius: 4px 0 0 4px;
    background: var(--ku-holo); background-size: 100% 300%;
}

.konser-ultah-ticket__band {
    position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
    height: clamp(10.5rem, 31svh, 17rem); padding: .7rem .8rem .65rem; border-radius: 12px;
}
.konser-ultah-ticket__band--photo::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: var(--ku-deep) var(--konser-ultah-photo) center 24% / cover no-repeat;
    filter: grayscale(1) contrast(1.12) brightness(.95);
}
/* the duotone tint and the shade that keeps the name readable over any photo */
.konser-ultah-ticket__band--photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--ku-deep) 94%, transparent) 0%, color-mix(in srgb, var(--ku-deep) 60%, transparent) 36%, transparent 64%),
        linear-gradient(to bottom, rgb(0 0 0 / .55), transparent 28%),
        linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 58%, transparent), color-mix(in srgb, var(--inv-accent) 32%, transparent));
}
.konser-ultah-ticket__band--art {
    background:
        radial-gradient(ellipse 70% 90% at 50% -12%, color-mix(in srgb, var(--inv-primary) 75%, transparent), transparent 62%),
        radial-gradient(ellipse 60% 40% at 50% 110%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 70%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 5%, transparent) 0 1px, transparent 1px 16px),
        color-mix(in srgb, var(--inv-text) 4%, var(--ku-deep));
}
.konser-ultah-ticket__mono {
    position: absolute; z-index: -1; right: -.04em; bottom: -.2em;
    font: 400 min(14rem, 30svh)/1 var(--ku-display); text-transform: uppercase;
    color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--inv-text) 30%, transparent);
}
.konser-ultah-ticket__tour {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; padding-right: 3.6rem;
    font: 800 .6rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.konser-ultah-ticket__tour span + span { padding-left: .55rem; border-left: 1px solid rgb(255 255 255 / .55); }

/* the holographic age sticker */
.konser-ultah-holo {
    position: absolute; top: .55rem; right: .6rem; display: grid; place-content: center; justify-items: center;
    width: 3.3rem; aspect-ratio: 1; border-radius: 50%; rotate: -12deg;
    background: var(--ku-holo); background-size: 300% 300%; color: var(--ku-deep);
    box-shadow: 0 6px 14px -4px rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 255 255 / .45);
}
.konser-ultah-holo small { font: 800 .48rem/1 var(--ku-sans); letter-spacing: .2em; text-transform: uppercase; }
.konser-ultah-holo b { font: 400 1.5rem/1 var(--ku-display); }
html.inv-anim .konser-ultah-holo, html.inv-anim .konser-ultah-ticket__main::before { animation: konser-ultah-holo 6s ease-in-out infinite alternate; }
@keyframes konser-ultah-holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

.konser-ultah-ticket__name {
    --ku-nick: min(calc((min(100vw, 440px) - 4.4rem) / (var(--konser-ultah-chars) * .5)), 12svh, 6rem);
    display: flex; flex-direction: column; margin-top: auto; font-weight: 400; line-height: .86;
    text-shadow: 0 3px 18px rgb(0 0 0 / .55);
}
.konser-ultah-ticket__nick {
    max-width: 100%; overflow-wrap: anywhere;
    font: 400 var(--ku-nick)/.88 var(--ku-display); letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.konser-ultah-ticket__live {
    display: inline-flex; align-items: center; gap: .3em; margin-top: .08em;
    font: 400 calc(var(--ku-nick) * .4)/1 var(--ku-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ku-pri-text);
}
.konser-ultah-ticket__live i { width: .42em; height: .42em; border-radius: 50%; background: var(--inv-accent); box-shadow: 0 0 10px var(--inv-accent); }
html.inv-anim .konser-ultah-ticket__live i { animation: konser-ultah-blink 1.4s ease-in-out infinite; }
@keyframes konser-ultah-blink { 50% { opacity: .25; } }

.konser-ultah-ticket__title {
    display: flex; align-items: center; gap: .55rem; margin: .7rem .35rem 0 !important;
    font: 800 .76rem/1.25 var(--ku-sans); font-stretch: 120%; letter-spacing: .2em; text-transform: uppercase; color: var(--ku-acc-text);
}
.konser-ultah-ticket__title::after { content: ''; flex: 1 1 1rem; height: 1px; background: var(--ku-line-2); }
.konser-ultah-ticket__grid {
    display: grid; grid-template-columns: 1.45fr 1fr .8fr; margin: .5rem .35rem 0 !important;
    border-top: 1px dashed var(--ku-line-2); border-bottom: 1px dashed var(--ku-line-2);
}
.konser-ultah-ticket__grid > div { min-width: 0; padding: .42rem .45rem .42rem .55rem; border-left: 1px dashed var(--ku-line-2); }
.konser-ultah-ticket__grid > div:first-child { padding-left: 0; border-left: 0; }
.konser-ultah-ticket__grid dt { font: 800 .54rem/1.3 var(--ku-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ku-muted); }
.konser-ultah-ticket__grid dd { margin-top: .1rem !important; font: 700 .84rem/1.2 var(--ku-sans); font-stretch: 92%; color: #fff; }
.konser-ultah-ticket__venue {
    display: flex; align-items: center; gap: .4rem; margin: .5rem .35rem 0 !important;
    font: 600 .82rem/1.3 var(--ku-sans); color: var(--ku-muted);
}
.konser-ultah-ticket__venue .konser-ultah-icon { width: 1rem; height: 1rem; color: var(--ku-pri-text); }

/* the perforation: real holes (transparent gaps) between paper-colored bridges */
.konser-ultah-ticket__perf {
    position: relative; height: 4px; margin: 0 .75rem;
    background: repeating-linear-gradient(90deg, var(--inv-paper) 0 6px, transparent 6px 11px);
}
.konser-ultah-ticket__perf svg { position: absolute; left: -.25rem; top: -.55rem; width: 1.15rem; height: 1.15rem; color: var(--inv-silver); rotate: 180deg; }

/* the stub: paper stock, notches at the perforation */
.konser-ultah-ticket__stub {
    position: relative; padding: .8rem .95rem .95rem; border-radius: 0 0 18px 18px;
    background: var(--inv-paper); color: var(--ku-deep);
    -webkit-mask: radial-gradient(circle at 0 0, #0000 .75rem, #000 calc(.75rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 .75rem, #000 calc(.75rem + .5px)) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 0, #0000 .75rem, #000 calc(.75rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 .75rem, #000 calc(.75rem + .5px)) right / 51% 100% no-repeat;
}
.konser-ultah-ticket__admit { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 0 .3rem; }
.konser-ultah-ticket__admit > div { min-width: 0; }
.konser-ultah-ticket__label { font: 800 .58rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .22em; text-transform: uppercase; color: var(--ku-pri-ink); }
.konser-ultah-ticket__guest { display: block; margin-top: .1rem; font: 400 1.4rem/1.08 var(--ku-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-ticket__barcode { flex: none; width: 4.2rem; height: 2.1rem; color: var(--ku-deep); }

.konser-ultah-body .inv-button.konser-ultah-open {
    width: 100%; min-height: 3.1rem; margin-top: .75rem; gap: .6rem; border-radius: 10px;
    background: var(--ku-deep); color: var(--inv-paper);
    font: 800 .9rem/1 var(--ku-sans); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: inset 0 -3px 0 var(--inv-primary);
}
.konser-ultah-open .konser-ultah-icon { width: 1.25rem; height: 1.25rem; color: var(--ku-pri-text); }

.konser-ultah-cover__flash {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 0%, #fff, color-mix(in srgb, var(--inv-primary) 40%, transparent) 45%, transparent 75%);
}

/* opening: tug the stub, tear it off and let it fall; the beams flash; the ticket flies up; the stage fades */
html.inv-anim .konser-ultah-cover--leave { transition: opacity .4s ease .75s; }
.konser-ultah-cover--gone { opacity: 0; }
html.inv-anim .konser-ultah-cover--leave .konser-ultah-ticket__stub { transform-origin: 8% 0; animation: konser-ultah-tear .95s cubic-bezier(.5, 0, .75, .25) forwards; }
html.inv-anim .konser-ultah-cover--leave .konser-ultah-ticket__main,
html.inv-anim .konser-ultah-cover--leave .konser-ultah-ticket__perf { animation: konser-ultah-fly .8s cubic-bezier(.6, 0, .35, 1) .32s forwards; }
html.inv-anim .konser-ultah-cover--leave .konser-ultah-rig__beam { animation: konser-ultah-beam-hit .9s ease forwards; }
html.inv-anim .konser-ultah-cover--leave .konser-ultah-cover__flash { animation: konser-ultah-flash 1s ease .2s; }
@keyframes konser-ultah-tear {
    0% { transform: none; }
    14% { transform: translateY(5px) rotate(-1.5deg); }
    26% { transform: translate(4px, 8px) rotate(5deg); }
    100% { transform: translate(46px, 85vh) rotate(26deg); }
}
@keyframes konser-ultah-fly { 0% { transform: none; opacity: 1; } 100% { transform: translateY(-70vh) rotate(-5deg) scale(.9); opacity: 0; } }
@keyframes konser-ultah-beam-hit { 0% { opacity: .34; } 35% { opacity: .95; rotate: 0deg; } 100% { opacity: .6; rotate: 0deg; } }
@keyframes konser-ultah-flash { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }

@media (max-height: 760px) {
    .konser-ultah-cover__inner { padding-top: 3.2rem; padding-bottom: 2.4rem; }
    .konser-ultah-ticket__band { height: clamp(10rem, 30svh, 15rem); }
    .konser-ultah-ticket__name { --ku-nick: min(calc((min(100vw, 440px) - 4.4rem) / (var(--konser-ultah-chars) * .5)), 11svh, 5.4rem); }
}
@media (max-height: 660px) {
    .konser-ultah-cover__inner { padding-top: 2.7rem; padding-bottom: 2.3rem; }
    .konser-ultah-rig__lamps { top: .6rem; }
    .konser-ultah-ticket__band { height: clamp(9rem, 28svh, 13rem); padding: .6rem .7rem .55rem; }
    .konser-ultah-ticket__name { --ku-nick: min(calc((min(100vw, 440px) - 4.4rem) / (var(--konser-ultah-chars) * .5)), 10.5svh, 5rem); }
    .konser-ultah-ticket__title { margin-top: .55rem !important; }
    .konser-ultah-ticket__grid > div { padding-top: .35rem; padding-bottom: .35rem; }
    .konser-ultah-ticket__stub { padding: .65rem .85rem .8rem; }
    .konser-ultah-ticket__guest { font-size: 1.25rem; }
    .konser-ultah-body .inv-button.konser-ultah-open { min-height: 2.95rem; margin-top: .6rem; }
}

/* ------------------------------------------------------------------ page */
html:not(.inv-opened) .konser-ultah-main, html:not(.inv-opened) .konser-ultah-branding { visibility: hidden; }
.konser-ultah-main {
    position: relative; z-index: 1; max-width: 460px; margin: 0 auto; overflow: clip; counter-reset: konser-ultah-track;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-text) 6%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px,
        var(--ku-deep);
}
.konser-ultah-section { position: relative; padding: 3.2rem 1.25rem; }
/* a soft colored glow behind every other section, like a different light cue */
.konser-ultah-section:nth-of-type(even) { background: radial-gradient(ellipse 85% 190px at 50% 200px, color-mix(in srgb, var(--inv-primary) 17%, transparent), transparent); }
.konser-ultah-section:nth-of-type(odd) { background: radial-gradient(ellipse 70% 180px at 100% 200px, color-mix(in srgb, var(--inv-accent) 11%, transparent), transparent); }

/* wide screens: the phone-width show on a dark arena with stage lights */
@media (min-width: 700px) {
    body.konser-ultah-body {
        background:
            radial-gradient(ellipse 50% 60% at 50% 0%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 70%) fixed,
            radial-gradient(circle, color-mix(in srgb, var(--inv-text) 8%, transparent) 1px, transparent 1.5px) 0 0 / 26px 26px,
            var(--ku-deep);
    }
    .konser-ultah-main { margin-top: 2.5rem; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px var(--ku-line), 0 0 90px -30px var(--inv-primary); }
}

/* the section heading: a track on the setlist */
.konser-ultah-head { display: grid; justify-items: start; gap: .4rem; margin-bottom: 1.6rem; counter-increment: konser-ultah-track; }
.konser-ultah-head__kicker {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    font: 800 .64rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .2em; text-transform: uppercase; color: var(--ku-pri-text);
}
.konser-ultah-head__track { margin-left: auto; color: var(--ku-muted); letter-spacing: .16em; }
.konser-ultah-head__track::before { content: 'Track ' counter(konser-ultah-track, decimal-leading-zero); }
.konser-ultah-eq { width: 1.1rem; height: .9rem; flex: none; fill: var(--inv-accent); }
.konser-ultah-eq rect { transform-box: fill-box; transform-origin: 50% 100%; }
html.inv-anim .konser-ultah-eq rect { animation: konser-ultah-eq 1.1s ease-in-out infinite alternate; }
html.inv-anim .konser-ultah-eq rect:nth-child(2) { animation-delay: -.4s; }
html.inv-anim .konser-ultah-eq rect:nth-child(3) { animation-delay: -.75s; }
html.inv-anim .konser-ultah-eq rect:nth-child(4) { animation-delay: -.2s; }
@keyframes konser-ultah-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.konser-ultah-head__title {
    font: 400 clamp(2.4rem, 12vw, 3.1rem)/.95 var(--ku-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
    color: var(--inv-text); text-shadow: 0 0 26px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.konser-ultah-head__wave { width: 9rem; height: .9rem; fill: none; stroke: var(--inv-primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* the reveal: each block rises out of the dark and flashes lit, like a light cue */
html.inv-anim [data-reveal="konser-ultah-spot"] {
    opacity: 0; transform: translateY(24px) scale(.985); filter: brightness(.35);
    transition: opacity .7s ease var(--reveal-delay, 0ms), transform .9s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms);
}
html.inv-anim [data-reveal="konser-ultah-spot"].is-revealed { opacity: 1; transform: none; filter: none; animation: konser-ultah-lit 1.1s ease var(--reveal-delay, 0ms) both; }
@keyframes konser-ultah-lit { 0% { filter: brightness(.35); } 45% { filter: brightness(1.3); } 100% { filter: none; } }

/* buttons in this theme */
.konser-ultah-body .inv-button {
    min-height: 2.9rem; padding: .7rem 1.2rem; border-radius: 10px;
    background: var(--inv-primary); color: var(--ku-deep);
    font: 800 .84rem/1.2 var(--ku-sans); font-stretch: 110%; letter-spacing: .07em; text-transform: uppercase;
}
.konser-ultah-body .inv-button .konser-ultah-icon { width: 1.1rem; height: 1.1rem; }
.konser-ultah-body .inv-button--outline { background: transparent; color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--ku-line-2); }
.konser-ultah-body .inv-button:focus-visible, .konser-ultah-body a:focus-visible, .konser-ultah-body button:focus-visible {
    outline: 3px solid var(--inv-accent); outline-offset: 3px;
}

/* ------------------------------------------------------------------ opening: the tour poster */
.konser-ultah-opening { padding-top: 3.6rem; }
.konser-ultah-poster {
    position: relative; margin: 0 .25rem; padding: 2rem 1.3rem 1.3rem; rotate: -1.2deg;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 30%, transparent) 1.3px, transparent 1.9px) 0 0 / 9px 9px,
        linear-gradient(170deg, var(--inv-paper), color-mix(in srgb, var(--inv-paper) 82%, var(--inv-silver)));
    color: var(--ku-deep); box-shadow: var(--ku-shadow);
}
.konser-ultah-poster > :not(.konser-ultah-tape):not(.konser-ultah-poster__burst) { position: relative; z-index: 1; }
.konser-ultah-poster__burst { position: absolute; top: -1.6rem; right: -1.4rem; width: 7.4rem; fill: var(--inv-accent); opacity: .9; }
html.inv-anim .konser-ultah-poster__burst { animation: konser-ultah-spin 26s linear infinite; }
@keyframes konser-ultah-spin { to { rotate: 360deg; } }
.konser-ultah-poster__kicker {
    display: inline-flex; gap: .55rem; padding: .32rem .65rem; background: var(--ku-deep); color: var(--inv-paper);
    font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase;
}
.konser-ultah-poster__headline {
    max-width: 88%; margin-top: .85rem !important;
    font: 400 clamp(2.3rem, 11.5vw, 3rem)/.96 var(--ku-display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
.konser-ultah-poster__message { margin-top: .85rem !important; font: 500 1rem/1.65 var(--ku-sans); color: color-mix(in srgb, var(--ku-deep) 88%, transparent); }
.konser-ultah-poster__quote {
    margin: 1.2rem -1.6rem 0 !important; padding: .8rem 1.6rem; rotate: -2deg;
    background: var(--inv-primary); color: var(--ku-deep);
    font: italic 700 1rem/1.45 var(--ku-sans); text-align: center;
}
.konser-ultah-poster__foot {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .55rem; margin-top: 1.2rem !important;
    font: 800 .58rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ku-deep) 78%, transparent);
}
.konser-ultah-poster__foot i { width: .4rem; height: .4rem; rotate: 45deg; background: var(--ku-pri-ink); }

/* ------------------------------------------------------------------ celebrant: the LED screen */
.konser-ultah-screen { width: min(84%, 20rem); margin: 0 auto; }
.konser-ultah-screen__frame {
    position: relative; aspect-ratio: 4 / 5; padding: 6px; border-radius: 14px; background: #000; overflow: hidden;
    box-shadow: 0 0 0 2px #2a2a34, 0 0 0 7px #14141a, 0 0 70px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.konser-ultah-screen__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: 9px; }
/* scanlines and the camera brackets over the picture (decoration, no text) */
.konser-ultah-screen__frame::after {
    content: ''; position: absolute; inset: 6px; border-radius: 9px; pointer-events: none;
    background:
        linear-gradient(#fff, #fff) 12px 12px / 18px 2px, linear-gradient(#fff, #fff) 12px 12px / 2px 18px,
        linear-gradient(#fff, #fff) calc(100% - 12px) 12px / 18px 2px, linear-gradient(#fff, #fff) calc(100% - 12px) 12px / 2px 18px,
        linear-gradient(#fff, #fff) 12px calc(100% - 12px) / 18px 2px, linear-gradient(#fff, #fff) 12px calc(100% - 12px) / 2px 18px,
        linear-gradient(#fff, #fff) calc(100% - 12px) calc(100% - 12px) / 18px 2px, linear-gradient(#fff, #fff) calc(100% - 12px) calc(100% - 12px) / 2px 18px,
        repeating-linear-gradient(to bottom, rgb(0 0 0 / .16) 0 1px, transparent 1px 3px);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    opacity: .85;
}
.konser-ultah-screen__art {
    position: relative; display: grid; place-items: center; height: 100%; border-radius: 9px; overflow: hidden;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 45%, transparent) 1.4px, transparent 2px) 0 0 / 7px 7px,
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 65%),
        #07070a;
}
.konser-ultah-screen__initial { font: 400 9rem/1 var(--ku-display); color: #fff; text-shadow: 0 0 18px var(--inv-primary), 0 0 50px var(--inv-primary); }
.konser-ultah-screen__bars { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 2.6rem; }
.konser-ultah-screen__bars i { width: 8px; height: 100%; border-radius: 2px; background: var(--inv-accent); transform-origin: 50% 100%; box-shadow: 0 0 8px var(--inv-accent); }
.konser-ultah-screen__bars i:nth-child(odd) { background: var(--inv-primary); box-shadow: 0 0 8px var(--inv-primary); }
html.inv-anim .konser-ultah-screen__bars i { animation: konser-ultah-eq .9s ease-in-out infinite alternate; }
.konser-ultah-screen__bars i:nth-child(2) { animation-delay: -.3s !important; } .konser-ultah-screen__bars i:nth-child(3) { animation-delay: -.6s !important; }
.konser-ultah-screen__bars i:nth-child(4) { animation-delay: -.15s !important; } .konser-ultah-screen__bars i:nth-child(5) { animation-delay: -.45s !important; }
.konser-ultah-screen__bars i:nth-child(6) { animation-delay: -.7s !important; } .konser-ultah-screen__bars i:nth-child(7) { animation-delay: -.25s !important; }
.konser-ultah-screen__tag {
    position: absolute; z-index: 2; top: 22px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: .35rem;
    padding: .22rem .55rem; border-radius: 4px; background: rgb(0 0 0 / .62); color: #fff;
    font: 800 .56rem/1.2 var(--ku-sans); letter-spacing: .2em; text-transform: uppercase;
}
.konser-ultah-screen__tag i { width: .45rem; height: .45rem; border-radius: 50%; background: #ff3b5c; }
html.inv-anim .konser-ultah-screen__tag i { animation: konser-ultah-blink 1.2s steps(2) infinite; }
.konser-ultah-screen__age {
    position: absolute; z-index: 2; right: 22px; bottom: 16px;
    font: 400 4.4rem/.9 var(--ku-display); color: transparent; -webkit-text-stroke: 2px #fff; opacity: .92;
}
.konser-ultah-screen__legs {
    display: block; width: 46%; height: 1.5rem; margin: 0 auto;
    background:
        linear-gradient(#2a2a34, #2a2a34) 18% 0 / 6px 100% no-repeat,
        linear-gradient(#2a2a34, #2a2a34) 82% 0 / 6px 100% no-repeat,
        linear-gradient(#2a2a34, #2a2a34) 50% 100% / 100% 4px no-repeat;
}
.konser-ultah-celebrant__text { display: grid; justify-items: center; gap: .55rem; margin-top: 1.2rem; text-align: center; }
.konser-ultah-celebrant__title {
    padding: .32rem .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--inv-primary); color: var(--ku-pri-text);
    font: 800 .64rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .22em; text-transform: uppercase;
}
.konser-ultah-celebrant__name { font: 400 clamp(2rem, 9.5vw, 2.6rem)/1.02 var(--ku-display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.konser-ultah-celebrant__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; font: 600 .9rem/1.4 var(--ku-sans); color: var(--ku-muted); }
.konser-ultah-celebrant__meta span + span::before { content: '★'; margin-right: .9rem; font-size: .7rem; color: var(--inv-accent); }
.konser-ultah-profile {
    display: grid; justify-items: center; gap: .3rem; margin-top: 1.5rem; padding: 1.1rem 1rem 1.05rem; border-radius: 16px; text-align: center;
    background: var(--ku-card); box-shadow: inset 0 0 0 1px var(--ku-line);
}
.konser-ultah-profile__label { font: 800 .6rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .24em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-profile__order { color: var(--ku-muted); font-size: .9rem; }
.konser-ultah-profile__parents { display: grid; gap: .05rem; font: 700 1.05rem/1.4 var(--ku-sans); }
.konser-ultah-profile__amp { font: 400 1.2rem/1 var(--ku-display); color: var(--ku-pri-text); }
.konser-ultah-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem !important; }
.konser-ultah-chip {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
    background: var(--ku-card-2); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--ku-line);
    font: 700 .86rem/1 var(--ku-sans); text-decoration: none;
}
.konser-ultah-chip .konser-ultah-icon { width: 1.05rem; height: 1.05rem; color: var(--ku-pri-text); }

/* ------------------------------------------------------------------ message: the lyric sheet */
.konser-ultah-lyric {
    position: relative; padding: 2.2rem 1.3rem 1.3rem 1.5rem; border-radius: 18px;
    background:
        repeating-linear-gradient(to bottom, transparent 0 1.85rem, color-mix(in srgb, var(--inv-text) 8%, transparent) 1.85rem calc(1.85rem + 1px)) 0 .3rem,
        var(--ku-card);
    box-shadow: inset 4px 0 0 var(--inv-accent), inset 0 0 0 1px var(--ku-line);
}
.konser-ultah-lyric::before {
    content: '\201C'; position: absolute; top: -.35rem; left: 1rem;
    font: 400 5.4rem/1 var(--ku-display); color: var(--inv-primary);
}
.konser-ultah-lyric__mic {
    position: absolute; top: -1.35rem; right: 1.2rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--ku-deep); box-shadow: 0 0 24px -4px var(--inv-primary);
}
.konser-ultah-lyric__mic .konser-ultah-icon { width: 1.4rem; height: 1.4rem; }
.konser-ultah-lyric__text p { position: relative; font: 600 1.14rem/1.62 var(--ku-sans); }
.konser-ultah-lyric__from { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.konser-ultah-lyric__wave { width: 5.4rem; height: 1.2rem; fill: none; stroke: var(--inv-accent); stroke-width: 1.6; stroke-linejoin: round; }
.konser-ultah-lyric__from cite { font: 400 1.5rem/1 var(--ku-display); font-style: normal; text-transform: uppercase; color: var(--ku-pri-text); }

/* ------------------------------------------------------------------ events: tour dates */
.konser-ultah-dates { display: grid; gap: 1.4rem; padding: 0; list-style: none; }
.konser-ultah-date {
    position: relative; overflow: hidden; padding: 0 1rem 1.1rem; border-radius: 18px;
    background: var(--ku-card); border: 1px solid var(--ku-line);
}
.konser-ultah-date--main { border: 1.5px solid color-mix(in srgb, var(--inv-primary) 65%, transparent); box-shadow: 0 22px 50px -32px var(--inv-primary); }
.konser-ultah-date__photo {
    position: relative; height: 8.5rem; margin: 0 -1rem;
    background: var(--ku-deep) var(--konser-ultah-photo) center / cover no-repeat;
}
.konser-ultah-date__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--ku-card)), linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 35%, transparent), transparent 60%); }
.konser-ultah-date__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding-top: 1rem; }
.konser-ultah-date__block {
    display: grid; justify-items: center; padding: .5rem .3rem .45rem; border-radius: 12px; line-height: 1;
    background: var(--inv-primary); color: var(--ku-deep);
}
.konser-ultah-date__day { font: 400 2.2rem/1 var(--ku-display); }
.konser-ultah-date__month { margin-top: .2rem; font: 800 .74rem/1 var(--ku-sans); letter-spacing: .16em; text-transform: uppercase; }
.konser-ultah-date__year { margin-top: .2rem; font: 700 .64rem/1 var(--ku-sans); letter-spacing: .1em; }
.konser-ultah-date:not(.konser-ultah-date--main) .konser-ultah-date__block { background: var(--inv-accent); }
.konser-ultah-date__tag {
    display: inline-flex; align-items: center; gap: .4rem;
    font: 800 .6rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .22em; text-transform: uppercase; color: var(--ku-acc-text);
}
.konser-ultah-date__tag::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.konser-ultah-date__name { margin-top: .2rem; font: 400 1.6rem/1.05 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-date__rows { display: grid; gap: .6rem; margin-top: 1rem !important; padding: .9rem 0 0; border-top: 1px dashed var(--ku-line-2); list-style: none; font-size: .93rem; line-height: 1.45; }
.konser-ultah-date__rows li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.konser-ultah-date__rows .konser-ultah-icon { color: var(--ku-pri-text); margin-top: .05rem; }
.konser-ultah-date__rows strong { display: block; font-weight: 700; }
.konser-ultah-date__rows small { display: block; font-size: .86rem; color: var(--ku-muted); }
.konser-ultah-date__maps { display: grid; gap: .65rem; margin-top: 1.1rem; }
.konser-ultah-date__maps .inv-button { width: 100%; }
.konser-ultah-date__maps .inv-maps__frame { margin: 0; height: 170px; border-radius: 12px; filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95); }

/* ------------------------------------------------------------------ countdown: lightsticks */
.konser-ultah-countdown { text-align: center; }
.konser-ultah-countdown .konser-ultah-head { justify-items: center; }
.konser-ultah-countdown__note { margin: -.6rem 0 1.4rem !important; color: var(--ku-muted); font-size: .92rem; }
.konser-ultah-sticks .inv-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; align-items: end; padding-top: .6rem; }
.konser-ultah-sticks .inv-countdown__item {
    --ku-stick: var(--inv-primary);
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; border-radius: 0; background: none;
    transform-origin: 50% 100%;
}
.konser-ultah-sticks .inv-countdown__item:nth-child(even) { --ku-stick: var(--inv-accent); }
.konser-ultah-sticks .inv-countdown__value {
    position: relative; order: 1; display: grid; place-items: center; width: min(3.9rem, 16vw); aspect-ratio: 1; border-radius: 50%;
    font: 400 clamp(1.5rem, 7.2vw, 1.95rem)/1 var(--ku-display); color: var(--ku-deep);
    background: radial-gradient(circle at 34% 30%, #fff 0 9%, color-mix(in srgb, var(--ku-stick) 55%, #fff) 26%, var(--ku-stick) 62%, color-mix(in srgb, var(--ku-stick) 72%, #000) 100%);
    box-shadow: 0 0 16px var(--ku-stick), 0 0 42px color-mix(in srgb, var(--ku-stick) 60%, transparent), inset 0 -6px 10px rgb(0 0 0 / .2);
}
.konser-ultah-sticks .inv-countdown__value::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ku-stick) 55%, #fff); opacity: .7; }
/* the collar and the handle with its power button */
.konser-ultah-sticks .inv-countdown__item::before { content: ''; order: 2; width: 1.7rem; height: .55rem; margin-top: .2rem; border-radius: 3px; background: linear-gradient(90deg, #6b6b78, var(--inv-silver) 45%, #6b6b78); }
.konser-ultah-sticks .inv-countdown__item::after {
    content: ''; order: 3; width: 1rem; height: 3.4rem; border-radius: 0 0 .5rem .5rem;
    background: radial-gradient(circle at 50% 24%, var(--ku-stick) 0 .17rem, transparent .22rem), linear-gradient(90deg, #17171d, #3a3a46 45%, #17171d);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.konser-ultah-sticks .inv-countdown__label { order: 4; margin-top: .6rem; font: 800 .6rem/1.2 var(--ku-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ku-muted); }
html.inv-anim .konser-ultah-sticks .inv-countdown__item { animation: konser-ultah-sway 3.2s ease-in-out infinite alternate; }
html.inv-anim .konser-ultah-sticks .inv-countdown__item:nth-child(2) { animation-delay: -1.1s; }
html.inv-anim .konser-ultah-sticks .inv-countdown__item:nth-child(3) { animation-delay: -2.2s; }
html.inv-anim .konser-ultah-sticks .inv-countdown__item:nth-child(4) { animation-delay: -.5s; }
html.inv-anim .konser-ultah-sticks .inv-countdown__value { animation: konser-ultah-glow 1.6s ease-in-out infinite alternate; }
@keyframes konser-ultah-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes konser-ultah-glow { to { box-shadow: 0 0 22px var(--ku-stick), 0 0 60px color-mix(in srgb, var(--ku-stick) 75%, transparent), inset 0 -6px 10px rgb(0 0 0 / .2); } }
.konser-ultah-sticks .inv-countdown__done { padding: 1rem 0; font: 400 1.5rem/1.25 var(--ku-display); text-transform: uppercase; }
.konser-ultah-sticks .inv-countdown__actions { display: grid; gap: .6rem; margin-top: 1.7rem; }
.konser-ultah-cal {
    --inv-cal-bg: var(--ku-card); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-accent);
    width: 100%; margin-top: 2.2rem; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ku-line), var(--ku-shadow);
}
.konser-ultah-cal .inv-cal__month { font: 400 1.8rem/1 var(--ku-display); text-transform: uppercase; }

/* ------------------------------------------------------------------ party: marquee sign, guitar picks, tee */
.konser-ultah-marquee {
    position: relative; padding: 1.7rem 1.3rem 1.6rem; border-radius: 16px; text-align: center;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--inv-primary) 40%, transparent), transparent 70%), #08080b;
}
/* the light bulbs on the frame (only on the border ring), chasing */
.konser-ultah-marquee::before {
    content: ''; position: absolute; inset: 0; padding: 9px; border-radius: 16px; pointer-events: none;
    background: radial-gradient(circle, #fff6d8 0 2.4px, color-mix(in srgb, var(--inv-accent) 85%, transparent) 2.8px 3.6px, transparent 4.2px) 0 0 / 15px 15px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.inv-anim .konser-ultah-marquee::before { animation: konser-ultah-chase 1.2s steps(3) infinite; }
@keyframes konser-ultah-chase { to { background-position: 15px 0; } }
.konser-ultah-marquee__label { font: 800 .6rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .26em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-marquee__name {
    margin-top: .4rem !important; overflow-wrap: anywhere; text-wrap: balance;
    font: 400 clamp(1.9rem, 9vw, 2.5rem)/1.06 var(--ku-display); text-transform: uppercase; color: #fff;
    text-shadow: 0 0 10px var(--inv-primary), 0 0 28px var(--inv-primary);
}
.konser-ultah-dress { margin-top: 1.5rem; padding: 1.15rem 1.1rem 1.1rem; border-radius: 16px; background: var(--ku-card); box-shadow: inset 0 0 0 1px var(--ku-line); }
.konser-ultah-dress__head { display: flex; align-items: flex-start; gap: .8rem; }
.konser-ultah-dress__icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--inv-primary); color: var(--ku-deep); }
.konser-ultah-dress__code { margin-top: .1rem !important; font: 700 1rem/1.4 var(--ku-sans); }
.konser-ultah-dress__stage { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 1rem; }
.konser-ultah-tee { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
.konser-ultah-tee__body { fill: var(--konser-ultah-pick, var(--inv-primary)); stroke: rgb(255 255 255 / .3); stroke-width: 1.5; stroke-linejoin: round; transition: fill .45s ease; }
.konser-ultah-tee__collar { fill: none; stroke: rgb(0 0 0 / .25); stroke-width: 3; }
.konser-ultah-tee__print { fill: color-mix(in srgb, var(--konser-ultah-pick, var(--inv-primary)) 50%, #8a8a8a); transition: fill .45s ease; }
.konser-ultah-picks { display: flex; flex-wrap: wrap; gap: .45rem .55rem; }
.konser-ultah-pick {
    display: grid; place-items: center; width: 2.9rem; height: 3.2rem; padding: 0; border: 0; background: none; cursor: pointer;
    transition: transform .35s var(--ku-spring);
}
.konser-ultah-pick svg { width: 2.3rem; height: auto; overflow: visible; }
.konser-ultah-pick path { fill: var(--konser-ultah-swatch); stroke: rgb(255 255 255 / .4); stroke-width: 1.6; }
.konser-ultah-pick[aria-pressed="true"] { transform: translateY(-6px) rotate(-10deg); }
.konser-ultah-pick[aria-pressed="true"] path { stroke: var(--inv-accent); stroke-width: 3.2; filter: drop-shadow(0 0 6px var(--inv-accent)); }
.konser-ultah-info {
    margin-top: 1.4rem; padding: 1.35rem 1.1rem 1rem; border-radius: 14px;
    background: repeating-linear-gradient(-45deg, var(--inv-accent) 0 10px, var(--ku-deep) 10px 20px) top / 100% 7px no-repeat, var(--ku-card);
    box-shadow: inset 0 0 0 1px var(--ku-line);
}
.konser-ultah-info__label { display: flex; align-items: center; gap: .45rem; font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .2em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-info__label .konser-ultah-icon { width: 1.05rem; height: 1.05rem; }
.konser-ultah-info__text { margin-top: .4rem !important; font: 500 .98rem/1.55 var(--ku-sans); }
.konser-ultah-led {
    display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding: .55rem .55rem .55rem 1rem; border-radius: 12px;
    background: radial-gradient(circle, rgb(255 255 255 / .08) 1px, transparent 1.4px) 0 0 / 5px 5px, #050507;
    box-shadow: inset 0 0 0 1px var(--ku-line), 0 0 34px -14px var(--inv-accent);
}
.konser-ultah-led__text {
    flex: 1; min-width: 0; overflow-wrap: anywhere;
    font: 400 1.5rem/1.1 var(--ku-display); letter-spacing: .04em; color: var(--ku-acc-text); text-shadow: 0 0 10px var(--inv-accent);
}
.konser-ultah-led__copy {
    flex: none; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--inv-accent); color: var(--ku-deep); font: 800 .76rem/1 var(--ku-sans); letter-spacing: .08em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ rundown: the gaff-taped setlist */
.konser-ultah-setlist {
    position: relative; margin: .4rem .3rem 0; padding: 1.5rem 1.25rem 2.6rem; rotate: .9deg;
    background:
        linear-gradient(to right, transparent 3.6rem, color-mix(in srgb, var(--inv-accent) 50%, transparent) 3.6rem calc(3.6rem + 1.5px), transparent calc(3.6rem + 1.5px)),
        var(--inv-paper);
    color: var(--ku-deep); box-shadow: var(--ku-shadow);
}
.konser-ultah-setlist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 3px solid var(--ku-deep); }
.konser-ultah-setlist__head span:first-child { font: 400 2.5rem/1 var(--ku-display); text-transform: uppercase; letter-spacing: .02em; }
.konser-ultah-setlist__head span + span { font: 800 .74rem/1 var(--ku-sans); letter-spacing: .14em; color: var(--ku-pri-ink); }
.konser-ultah-setlist__list { padding: 0; list-style: none; }
.konser-ultah-song { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.05rem; padding: .85rem 0; border-bottom: 1px dashed rgb(0 0 0 / .2); }
.konser-ultah-song__no { font: 400 1.4rem/1.15 var(--ku-display); color: var(--ku-pri-ink); }
.konser-ultah-song__time { font: 800 .72rem/1.2 var(--ku-sans); letter-spacing: .16em; color: var(--ku-pri-ink); }
.konser-ultah-song__title {
    display: inline; margin-top: .1rem; padding: 0 .1em; font: 400 1.32rem/1.25 var(--ku-display); text-transform: uppercase;
    background: linear-gradient(color-mix(in srgb, var(--inv-accent) 55%, transparent), color-mix(in srgb, var(--inv-accent) 55%, transparent)) 0 88% / 100% .42em no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.konser-ultah-song__desc { margin-top: .25rem !important; font: 500 .86rem/1.45 var(--ku-sans); color: color-mix(in srgb, var(--ku-deep) 78%, transparent); }
.konser-ultah-setlist__doodle { position: absolute; right: .9rem; bottom: .6rem; width: 3.8rem; fill: none; stroke: var(--ku-pri-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ story: the discography */
.konser-ultah-disco { display: grid; gap: 3rem; padding: 2rem 0 0; list-style: none; }
.konser-ultah-album { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.konser-ultah-album--flip { grid-template-columns: minmax(0, 1fr) 44%; }
.konser-ultah-album--flip .konser-ultah-album__art { order: 2; }
.konser-ultah-album__art { position: relative; aspect-ratio: 1; }
/* the record slides up out of its sleeve */
.konser-ultah-album__vinyl {
    position: absolute; top: -22%; left: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle, var(--inv-paper) 0 3%, var(--inv-primary) 3.5% 15%, #0b0b0e 15.5% 17%, transparent 17.5%),
        conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .16) 12%, transparent 18% 50%, rgb(255 255 255 / .12) 62%, transparent 68%),
        repeating-radial-gradient(circle, #24242c 0 2px, #33333d 2px 3px);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-silver) 40%, transparent), 0 0 26px -6px var(--inv-primary);
}
.konser-ultah-album:nth-child(even) .konser-ultah-album__vinyl {
    background:
        radial-gradient(circle, var(--inv-paper) 0 3%, var(--inv-accent) 3.5% 15%, #0b0b0e 15.5% 17%, transparent 17.5%),
        conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .16) 12%, transparent 18% 50%, rgb(255 255 255 / .12) 62%, transparent 68%),
        repeating-radial-gradient(circle, #24242c 0 2px, #33333d 2px 3px);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-silver) 40%, transparent), 0 0 26px -6px var(--inv-accent);
}
html.inv-anim .konser-ultah-album__vinyl { animation: konser-ultah-spin 7s linear infinite; }
.konser-ultah-album__sleeve {
    position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
    box-shadow: 0 16px 30px -14px #000, inset 0 0 0 1px rgb(255 255 255 / .1);
}
.konser-ultah-album__sleeve--art {
    display: grid; place-items: center; padding: .5rem;
    background:
        repeating-linear-gradient(-45deg, rgb(0 0 0 / .08) 0 6px, transparent 6px 12px),
        linear-gradient(135deg, var(--inv-primary), var(--inv-accent));
}
.konser-ultah-album__sleeve--art b { font: 400 clamp(1.7rem, 9vw, 2.5rem)/1 var(--ku-display); color: var(--ku-deep); text-align: center; overflow-wrap: anywhere; }
.konser-ultah-album__no { display: flex; flex-wrap: wrap; gap: .2rem .55rem; font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .2em; text-transform: uppercase; color: var(--ku-pri-text); }
.konser-ultah-album__no span + span { color: var(--ku-acc-text); }
.konser-ultah-album__title { margin-top: .3rem; font: 400 1.4rem/1.1 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-album__story { margin-top: .35rem !important; font-size: .9rem; line-height: 1.6; color: var(--ku-muted); }

/* ------------------------------------------------------------------ gallery: the photocard wall */
.konser-ultah-gallery__hint { margin: -.8rem 0 1.2rem !important; }
.konser-ultah-wall .inv-gallery { gap: 1rem .9rem; padding: .3rem .25rem 1.6rem; }
.konser-ultah-wall .inv-gallery__item {
    position: relative; aspect-ratio: 3 / 4; padding: 5px; border-radius: 14px; overflow: hidden;
    background: var(--ku-holo); background-size: 300% 300%;
    box-shadow: 0 16px 26px -14px #000; rotate: -2deg;
}
.konser-ultah-wall .inv-gallery__item:nth-child(even) { rotate: 2deg; translate: 0 1.4rem; }
.konser-ultah-wall .inv-gallery__item img, .konser-ultah-wall .inv-gallery__item video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.konser-ultah-wall .inv-gallery__item::after {
    content: ''; position: absolute; inset: 5px; border-radius: 10px; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .35) 48%, transparent 60%) 0 0 / 300% 100%;
}
html.inv-anim .konser-ultah-wall .inv-gallery__item { animation: konser-ultah-holo 7s ease-in-out infinite alternate; }
html.inv-anim .konser-ultah-wall .inv-gallery__item::after { animation: konser-ultah-shine 5s ease-in-out infinite; }
html.inv-anim .konser-ultah-wall .inv-gallery__item:nth-child(3n + 2)::after { animation-delay: -1.7s; }
html.inv-anim .konser-ultah-wall .inv-gallery__item:nth-child(3n)::after { animation-delay: -3.4s; }
@keyframes konser-ultah-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }

/* ------------------------------------------------------------------ live streaming: ON AIR */
.konser-ultah-onair {
    position: relative; display: grid; justify-items: center; gap: .6rem; padding: 2rem 1.4rem 1.7rem; border-radius: 18px; text-align: center;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 65%), var(--ku-card);
    box-shadow: inset 0 0 0 1px var(--ku-line);
}
.konser-ultah-onair__corner { position: absolute; width: 1.3rem; height: 1.3rem; border: 2px solid var(--inv-silver); opacity: .75; }
.konser-ultah-onair__corner--tl { top: .8rem; left: .8rem; border-right: 0; border-bottom: 0; }
.konser-ultah-onair__corner--tr { top: .8rem; right: .8rem; border-left: 0; border-bottom: 0; }
.konser-ultah-onair__corner--bl { bottom: .8rem; left: .8rem; border-right: 0; border-top: 0; }
.konser-ultah-onair__corner--br { bottom: .8rem; right: .8rem; border-left: 0; border-top: 0; }
.konser-ultah-onair__sign {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 6px;
    background: var(--inv-accent); color: var(--ku-deep); box-shadow: 0 0 24px -4px var(--inv-accent);
    font: 400 1.15rem/1 var(--ku-display); letter-spacing: .16em; text-transform: uppercase;
}
.konser-ultah-onair__sign i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ku-deep); }
html.inv-anim .konser-ultah-onair__sign i { animation: konser-ultah-blink 1.2s steps(2) infinite; }
.konser-ultah-onair__title { margin-top: .3rem; font: 400 2.1rem/1 var(--ku-display); text-transform: uppercase; }
.konser-ultah-onair__text { max-width: 19rem; color: var(--ku-muted); font-size: .94rem; }
.konser-ultah-onair__note { font-weight: 800; font-size: .9rem; color: var(--ku-pri-text); }
.konser-ultah-onair__button { margin-top: .4rem; }

/* ------------------------------------------------------------------ forms (box office, shoutouts) */
.konser-ultah-form .inv-rsvp__deadline {
    display: inline-block; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px;
    background: var(--ku-card-2); color: var(--ku-acc-text); font-size: .78rem; font-weight: 700;
}
.konser-ultah-form .inv-form { gap: 1.05rem; }
.konser-ultah-form .inv-form label, .konser-ultah-form .inv-form__choices legend {
    gap: .45rem; font: 800 .68rem/1.3 var(--ku-sans); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--ku-muted);
}
.konser-ultah-form .inv-form input:not([type=radio]):not([type=checkbox]),
.konser-ultah-form .inv-form select,
.konser-ultah-form .inv-form textarea {
    min-height: 3.1rem; padding: .8rem 1rem; border: 0; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-text) 7%, var(--ku-deep)); color: var(--inv-text);
    box-shadow: inset 0 0 0 1.5px var(--ku-line-2);
    font: 500 1rem/1.4 var(--ku-sans); font-stretch: 100%; letter-spacing: 0; text-transform: none;
    transition: box-shadow .2s ease, background .2s ease;
}
.konser-ultah-form .inv-form textarea { min-height: 6.5rem; resize: vertical; }
.konser-ultah-form .inv-form input:not([type=radio]):focus, .konser-ultah-form .inv-form select:focus, .konser-ultah-form .inv-form textarea:focus {
    outline: none; background: color-mix(in srgb, var(--inv-text) 10%, var(--ku-deep));
    box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-primary) 28%, transparent);
}
.konser-ultah-form .inv-form select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8c2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
}
.konser-ultah-form .inv-form select option { background: #1a1a22; color: #f4f4f8; }

/* attendance: three ticket-shaped toggles with side notches; the chosen one lights up */
.konser-ultah-form .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.konser-ultah-form .inv-form__choices legend { float: left; width: 100%; grid-column: 1 / -1; margin: 0 0 .1rem; padding: 0; }
.konser-ultah-form .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 4.6rem; padding: .6rem .3rem; border-radius: 10px; cursor: pointer; text-align: center;
    background: var(--ku-card-2); color: var(--inv-text); box-shadow: inset 0 0 0 1.5px var(--ku-line-2);
    font: 800 .82rem/1.15 var(--ku-sans); font-stretch: 100%; letter-spacing: 0; text-transform: none;
    -webkit-mask: radial-gradient(circle at 0 50%, #0000 .42rem, #000 .45rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 .42rem, #000 .45rem) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, #0000 .42rem, #000 .45rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 .42rem, #000 .45rem) right / 51% 100% no-repeat;
    transition: transform .2s ease, background-color .25s ease, color .25s ease;
}
.konser-ultah-form .inv-form__choices label::before {
    content: ''; width: 1.3rem; height: 1.3rem; background: currentColor;
    -webkit-mask: var(--konser-ultah-mask) center / contain no-repeat; mask: var(--konser-ultah-mask) center / contain no-repeat;
}
.konser-ultah-form .inv-form__choices label:nth-of-type(1) { --konser-ultah-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.konser-ultah-form .inv-form__choices label:nth-of-type(2) { --konser-ultah-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.konser-ultah-form .inv-form__choices label:nth-of-type(3) { --konser-ultah-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4.2 2.8c-.8.4-1.2 1-1.2 1.9v.6M12 18h.01'/%3E%3C/svg%3E"); }
.konser-ultah-form .inv-form__choices label:has(input:checked) { background: var(--inv-primary); color: var(--ku-deep); box-shadow: none; transform: translateY(-2px); }
.konser-ultah-form .inv-form__choices label:nth-of-type(2):has(input:checked) { background: var(--inv-silver); }
.konser-ultah-form .inv-form__choices label:nth-of-type(3):has(input:checked) { background: var(--inv-accent); }
.konser-ultah-form .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* the mask would clip an outline: the focus ring is drawn inside the toggle */
.konser-ultah-form .inv-form__choices label:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--inv-accent); }
.konser-ultah-form .inv-form__choices label:has(input:checked:focus-visible) { box-shadow: inset 0 0 0 3px var(--inv-text); }
@supports not selector(:has(*)) {
    .konser-ultah-form .inv-form__choices input { position: static; width: 1rem; height: 1rem; opacity: 1; }
}
.konser-ultah-form .inv-form > .inv-button[type="submit"] {
    width: 100%; min-height: 3.25rem; margin-top: .2rem; font-size: .92rem; letter-spacing: .08em;
    box-shadow: 0 14px 30px -14px var(--inv-primary);
}
.konser-ultah-form .inv-form__notice { padding: .9rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-primary) 16%, var(--ku-deep)); color: var(--inv-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent); font-size: .88rem; }
.konser-ultah-form .inv-form__error { border-radius: 10px; }
.konser-ultah-form .inv-rsvp__done { gap: .8rem; }
.konser-ultah-form .inv-rsvp__done .inv-button { justify-self: center; }

/* ------------------------------------------------------------------ RSVP: the box office and the seat map */
.konser-ultah-boxoffice { padding: 1.3rem 1.15rem 1.3rem; border-radius: 20px; background: var(--ku-card); box-shadow: inset 0 0 0 1px var(--ku-line), var(--ku-shadow); }
.konser-ultah-seats { margin: 0 0 1.1rem; }
.konser-ultah-seats svg { display: block; width: 100%; height: auto; }
.konser-ultah-seats__stage { fill: color-mix(in srgb, var(--inv-primary) 35%, transparent); stroke: var(--inv-primary); stroke-width: 1; }
.konser-ultah-seats__stage-label { font: 800 6.5px var(--ku-sans); letter-spacing: .3em; fill: var(--inv-text); }
.konser-ultah-seats__seat { fill: color-mix(in srgb, var(--inv-text) 16%, transparent); }
.konser-ultah-seats__seat--mine { fill: var(--inv-accent); }
html.inv-anim .konser-ultah-seats__seat--mine { animation: konser-ultah-blink 1.3s ease-in-out infinite; }
.konser-ultah-boxoffice.is-claimed .konser-ultah-seats__seat--mine { fill: var(--inv-primary); filter: drop-shadow(0 0 4px var(--inv-primary)); animation: none; }
.konser-ultah-boxoffice.is-no .konser-ultah-seats__seat--mine { fill: var(--inv-silver); filter: none; }
.konser-ultah-seats__caption { display: flex; justify-content: center; align-items: baseline; gap: .6rem; margin-top: .4rem; font: 800 .64rem/1 var(--ku-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ku-muted); }
.konser-ultah-seats__caption b { font: 400 1.3rem/1 var(--ku-display); letter-spacing: .04em; color: var(--ku-acc-text); }
.konser-ultah-boxoffice__intro { margin-bottom: 1.1rem !important; text-align: center; color: var(--ku-muted); font-size: .92rem; }

.konser-ultah-claim { margin-bottom: 1.1rem; text-align: center; }
.konser-ultah-claim__ticket {
    position: relative; padding: .95rem 1.2rem 1rem; border-radius: 12px; text-align: left;
    background: var(--inv-paper); color: var(--ku-deep);
    -webkit-mask: radial-gradient(circle at 0 50%, #0000 .6rem, #000 .63rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 .6rem, #000 .63rem) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, #0000 .6rem, #000 .63rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 .6rem, #000 .63rem) right / 51% 100% no-repeat;
}
html.inv-anim .konser-ultah-claim__ticket { animation: konser-ultah-print .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes konser-ultah-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); } to { clip-path: inset(0); transform: none; } }
.konser-ultah-claim__label { font: 800 .58rem/1.3 var(--ku-sans); font-stretch: 115%; letter-spacing: .22em; text-transform: uppercase; color: var(--ku-pri-ink); }
.konser-ultah-claim__guest { max-width: 70%; font: 400 1.6rem/1.08 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-claim__seat { margin-top: .2rem !important; font: 800 .74rem/1.3 var(--ku-sans); letter-spacing: .14em; text-transform: uppercase; }
.konser-ultah-claim__barcode { width: 7rem; height: 1.5rem; margin-top: .55rem; color: var(--ku-deep); }
.konser-ultah-stamp {
    position: absolute; right: .9rem; top: 50%; translate: 0 -50%; rotate: -14deg;
    padding: .25rem .55rem; border: 3px double currentColor; border-radius: 8px;
    font: 400 1.35rem/1 var(--ku-display); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ku-pri-ink); mix-blend-mode: multiply;
}
.konser-ultah-boxoffice.is-no .konser-ultah-stamp, .konser-ultah-boxoffice.is-maybe .konser-ultah-stamp { color: color-mix(in srgb, var(--ku-deep) 70%, transparent); }
html.inv-anim .konser-ultah-stamp { animation: konser-ultah-stamp .5s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
@keyframes konser-ultah-stamp { from { opacity: 0; transform: scale(2.6); } to { opacity: .92; transform: none; } }
.konser-ultah-claim__line { margin-top: .85rem !important; font: 600 .94rem/1.5 var(--ku-sans); }

/* ------------------------------------------------------------------ wishes: fan signs */
.konser-ultah-shout { position: relative; }
.konser-ultah-fans .inv-form { padding: 1.3rem 1.1rem 1.2rem; border-radius: 18px; background: var(--ku-card); box-shadow: inset 0 0 0 1px var(--ku-line); }
.konser-ultah-shout__sent {
    position: absolute; z-index: 3; top: -.9rem; right: .8rem; padding: .35rem .75rem; border-radius: 6px; rotate: 5deg;
    background: var(--inv-accent); color: var(--ku-deep); font: 800 .7rem/1.2 var(--ku-sans); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 8px 18px -8px rgb(0 0 0 / .7);
}
html.inv-anim .konser-ultah-shout__sent { animation: konser-ultah-pop .5s var(--ku-spring) both; }
@keyframes konser-ultah-pop { from { transform: scale(.3); opacity: 0; } }
html.inv-anim .konser-ultah-shout.is-sent .inv-form { animation: konser-ultah-nudge .5s var(--ku-spring); }
@keyframes konser-ultah-nudge { 40% { transform: translateY(4px) scale(.99); } }
.konser-ultah-fans .inv-wishes__list { --inv-wishes-height: 27rem; gap: 1.25rem; margin-top: 1.6rem; padding: .7rem .6rem 1.2rem .4rem; }
.konser-ultah-fans .inv-wish {
    position: relative; padding: 1rem 1rem .85rem; border-radius: 6px; rotate: -1.2deg;
    background: var(--inv-paper); color: var(--ku-deep);
    box-shadow: 0 12px 18px -12px #000;
}
.konser-ultah-fans .inv-wish:nth-child(3n + 2) { rotate: 1.1deg; background: var(--inv-primary); }
.konser-ultah-fans .inv-wish:nth-child(3n) { rotate: -.6deg; background: var(--inv-accent); }
.konser-ultah-fans .inv-wish__name { font: 400 1.3rem/1.1 var(--ku-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-fans .inv-wish__message { margin-top: .3rem; font: 600 .93rem/1.5 var(--ku-sans); }
.konser-ultah-fans .inv-wish__time { margin-top: .35rem; font-size: .72rem; opacity: .75; }
.konser-ultah-fans .inv-wish__reply { margin-top: .6rem; padding: .5rem .7rem; border-left: 3px solid var(--ku-deep); background: rgb(255 255 255 / .4); }
.konser-ultah-fans .inv-wishes__empty { padding: .4rem .2rem; text-align: center; color: var(--ku-muted); }

/* ------------------------------------------------------------------ gift: VIP cards at the merch booth */
.konser-ultah-vip .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.konser-ultah-vip .inv-gift__accounts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.konser-ultah-vip .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; margin: 0;
    padding: 1.45rem .85rem .85rem; border-radius: 14px; overflow: hidden; color: var(--inv-text);
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 38%, var(--ku-deep)), var(--ku-card) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent), var(--ku-shadow);
}
.konser-ultah-vip .inv-gift__accounts .inv-gift__account:nth-child(even) { background: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 32%, var(--ku-deep)), var(--ku-card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), var(--ku-shadow); }
/* the holographic strip and the lanyard slot */
.konser-ultah-vip .inv-gift__accounts .inv-gift__account::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .45rem; background: var(--ku-holo); background-size: 300% 100%; }
.konser-ultah-vip .inv-gift__accounts .inv-gift__account::after {
    content: ''; position: absolute; top: .85rem; right: .85rem; width: 1.6rem; height: .42rem; border-radius: 999px;
    background: var(--ku-deep); box-shadow: inset 0 1px 2px #000, 0 0 0 1px var(--ku-line);
}
html.inv-anim .konser-ultah-vip .inv-gift__accounts .inv-gift__account::before { animation: konser-ultah-holo 5s ease-in-out infinite alternate; }
.konser-ultah-vip .inv-gift__account > * { position: relative; z-index: 1; margin: 0; }
.konser-ultah-vip .inv-gift__accounts .inv-gift__bank { display: flex; align-items: center; min-height: 2rem; padding-right: 2rem; font: 800 .9rem/1.2 var(--ku-sans); }
.konser-ultah-vip .inv-gift__logo { height: 1.9rem; border-radius: .4rem; }
.konser-ultah-vip .inv-gift__number { margin-top: .6rem !important; font: 800 clamp(.84rem, 3.8vw, 1rem)/1.2 var(--ku-sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.konser-ultah-vip .inv-gift__holder { font-size: .76rem; font-weight: 700; color: var(--ku-muted); }
.konser-ultah-vip .inv-gift__account .inv-button { width: 100%; min-height: 2.75rem; margin-top: .65rem !important; padding: .5rem .6rem; font-size: .72rem; background: var(--inv-primary); color: var(--ku-deep); box-shadow: none; }
.konser-ultah-vip .inv-gift__accounts .inv-gift__account:nth-child(even) .inv-button { background: var(--inv-accent); }
/* the gift address: a shipping label with a barcode edge */
.konser-ultah-vip .inv-gift__address {
    position: relative; display: flex; flex-direction: column; gap: .25rem; margin-top: .9rem; padding: 1rem 1rem 1rem 2.7rem; border-radius: 10px;
    background:
        repeating-linear-gradient(to bottom, var(--ku-deep) 0 2px, transparent 2px 4px, var(--ku-deep) 4px 7px, transparent 7px 9px) .95rem 1rem / 1rem calc(100% - 2rem) no-repeat,
        var(--inv-paper);
    color: var(--ku-deep); font-size: .92rem; line-height: 1.5;
}
.konser-ultah-vip .inv-gift__address > * { margin: 0; }
.konser-ultah-vip .inv-gift__address .inv-gift__bank { font: 800 .64rem/1.3 var(--ku-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ku-pri-ink); }
.konser-ultah-vip .inv-gift__address .inv-gift__holder { font: 400 1.2rem/1.2 var(--ku-display); text-transform: uppercase; color: var(--ku-deep); }
.konser-ultah-vip .inv-gift__address .inv-button { align-self: flex-start; margin-top: .5rem; background: var(--ku-deep); color: var(--inv-paper); box-shadow: none; }

/* ------------------------------------------------------------------ wishlist: merch tags */
.konser-ultah-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; padding: 0; list-style: none; }
.konser-ultah-tag {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.9rem .8rem 1rem; text-align: center;
    background: var(--inv-paper); color: var(--ku-deep); rotate: var(--konser-ultah-tilt, 0deg); border-radius: 0 0 10px 10px;
    clip-path: polygon(20% 0, 80% 0, 100% 11%, 100% 100%, 0 100%, 0 11%);
}
.konser-ultah-tag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 12.5rem); }
.konser-ultah-tag__hole { position: absolute; top: .7rem; left: 50%; width: .8rem; height: .8rem; translate: -50% 0; border-radius: 50%; background: var(--ku-deep); box-shadow: 0 0 0 3px var(--inv-silver); }
.konser-ultah-tag__no { margin-top: .2rem; font: 800 .62rem/1.2 var(--ku-sans); letter-spacing: .2em; color: var(--ku-pri-ink); }
.konser-ultah-tag__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.konser-ultah-tag__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--inv-primary); color: var(--ku-deep); }
.konser-ultah-tag__name { font: 400 1.15rem/1.15 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-tag__note { font-size: .8rem; line-height: 1.4; color: color-mix(in srgb, var(--ku-deep) 78%, transparent); }
.konser-ultah-tag__link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin-top: .3rem; padding: 0 .9rem; border-radius: 8px;
    background: var(--ku-deep); color: var(--inv-paper); font: 800 .72rem/1 var(--ku-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.konser-ultah-tag__link .konser-ultah-icon { width: .95rem; height: .95rem; }

/* ------------------------------------------------------------------ co-hosts: the festival line-up */
.konser-ultah-lineup {
    padding: 1.6rem 1rem 1.5rem; border-radius: 18px; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 24%, var(--ku-deep)), var(--ku-card));
    box-shadow: inset 0 0 0 1px var(--ku-line);
}
.konser-ultah-lineup__label { font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .3em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-lineup__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem .55rem; margin-top: .6rem !important; padding: 0; list-style: none; }
.konser-ultah-lineup__list li { display: inline-flex; align-items: center; gap: .55rem; font: 400 1.3rem/1.3 var(--ku-display); text-transform: uppercase; }
.konser-ultah-lineup__list li + li::before { content: '★'; font-size: .8rem; color: var(--inv-accent); }
.konser-ultah-lineup__list .konser-ultah-lineup__top {
    flex-basis: 100%; justify-content: center; margin-bottom: .25rem;
    font-size: clamp(1.8rem, 8.6vw, 2.3rem); line-height: 1.1; text-shadow: 0 0 22px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
.konser-ultah-lineup__top + li::before { display: none; }

/* ------------------------------------------------------------------ contacts: crew passes */
.konser-ultah-crew { display: grid; gap: 1.8rem; padding-top: .6rem; }
.konser-ultah-pass { position: relative; padding-bottom: 1rem; border-radius: 14px; background: var(--inv-paper); color: var(--ku-deep); box-shadow: var(--ku-shadow); }
.konser-ultah-pass__clip {
    position: absolute; top: -.9rem; left: 50%; width: 2.6rem; height: 1.4rem; translate: -50% 0; border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #e5e7ef, var(--inv-silver) 55%, #8b8d99); box-shadow: 0 2px 4px rgb(0 0 0 / .4);
}
.konser-ultah-pass__band {
    padding: 1rem 1rem .5rem; border-radius: 14px 14px 0 0; text-align: center;
    background: var(--inv-primary); color: var(--ku-deep); font: 800 .66rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .26em; text-transform: uppercase;
}
.konser-ultah-pass__body { display: flex; align-items: center; gap: .85rem; padding: 1rem 1rem 0; }
.konser-ultah-pass__avatar { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: 10px; background: var(--ku-deep); color: var(--inv-paper); font: 400 1.6rem/1 var(--ku-display); }
.konser-ultah-pass__who { min-width: 0; }
.konser-ultah-pass__name { font: 400 1.35rem/1.1 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-pass__role { margin-top: .15rem !important; font: 600 .86rem/1.35 var(--ku-sans); color: color-mix(in srgb, var(--ku-deep) 78%, transparent); }
.konser-ultah-body .konser-ultah-pass__button { width: calc(100% - 2rem); margin: 1rem 1rem 0; background: var(--ku-deep); color: var(--inv-paper); }
.konser-ultah-pass__phone { padding: 1rem 1rem 0; font-weight: 700; }

/* ------------------------------------------------------------------ health protocol: venue rules */
.konser-ultah-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: 0; list-style: none; }
.konser-ultah-rules li { display: grid; gap: .5rem; padding: 1rem; border-radius: 14px; background: var(--ku-card); box-shadow: inset 0 0 0 1px var(--ku-line); font: 700 .88rem/1.35 var(--ku-sans); }
.konser-ultah-rules__check { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--inv-accent); color: var(--ku-deep); }
.konser-ultah-rules__check .konser-ultah-icon { width: 1.1rem; height: 1.1rem; }
.konser-ultah-rules__note { margin-top: 1rem !important; text-align: center; color: var(--ku-muted); }

/* ------------------------------------------------------------------ vendors: production credits */
.konser-ultah-vendors .konser-ultah-head { justify-items: center; text-align: center; }
.konser-ultah-credits { padding: 0; list-style: none; text-align: center; }
.konser-ultah-credits li { display: grid; justify-items: center; gap: .1rem; padding: .9rem 0; border-bottom: 1px solid var(--ku-line); }
.konser-ultah-credits li:last-child { border-bottom: 0; }
.konser-ultah-credits__role { font: 800 .6rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .26em; text-transform: uppercase; color: var(--ku-muted); }
.konser-ultah-credits__name { font: 400 1.45rem/1.15 var(--ku-display); text-transform: uppercase; overflow-wrap: anywhere; }
.konser-ultah-credits__link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .4rem; font: 700 .84rem/1 var(--ku-sans); color: var(--ku-pri-text); text-decoration: none; }
.konser-ultah-credits__link .konser-ultah-icon { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------ closing: the encore */
.konser-ultah-closing {
    overflow: hidden; padding: 5rem 1.25rem 3.8rem !important; text-align: center;
    background:
        linear-gradient(to top, #030305 4rem, transparent 4rem),
        radial-gradient(ellipse 90% 55% at 50% 0%, color-mix(in srgb, var(--inv-primary) 34%, transparent), transparent 70%), var(--ku-deep) !important;
}
.konser-ultah-closing > :not(.konser-ultah-rig) { position: relative; z-index: 1; }
.konser-ultah-rig--closing .konser-ultah-rig__beam { opacity: .22; }
.konser-ultah-closing__screen {
    width: min(80%, 18rem); aspect-ratio: 4 / 3; margin: 0 auto; padding: 5px; border-radius: 12px; overflow: hidden; background: #000;
    box-shadow: 0 0 0 2px #2a2a34, 0 0 0 6px #14141a, 0 0 60px -10px var(--inv-primary);
}
.konser-ultah-closing__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 8px; }
.konser-ultah-closing__initial { display: grid; place-items: center; height: 100%; border-radius: 8px; background: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 40%, transparent), #07070a 70%); font: 400 6rem/1 var(--ku-display); color: #fff; text-shadow: 0 0 20px var(--inv-primary); }
.konser-ultah-closing__kicker { margin-top: 1.7rem !important; font: 800 .66rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .3em; text-transform: uppercase; color: var(--ku-acc-text); }
.konser-ultah-closing__message { max-width: 22rem; margin: .8rem auto 0 !important; font: 600 1.12rem/1.55 var(--ku-sans); text-wrap: balance; }
.konser-ultah-closing__signature { margin-top: 1.1rem !important; font: italic 600 1rem/1.4 var(--ku-sans); color: var(--ku-muted); }
.konser-ultah-closing__name {
    max-width: 100%; margin-top: .2rem !important; padding: 0 .05em; overflow-wrap: anywhere;
    font: 400 clamp(3.4rem, 19vw, 5rem)/.92 var(--ku-display); text-transform: uppercase;
    background: var(--ku-holo); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.inv-anim .konser-ultah-closing__name { animation: konser-ultah-holo 5s ease-in-out infinite alternate; }
.konser-ultah-crowd { display: block; width: calc(100% + 2.5rem); height: 6.5rem; margin: 1rem -1.25rem 0; }
.konser-ultah-closing__floor {
    margin: -1px -1.25rem 0 !important; padding: .35rem 1rem .9rem; background: #030305;
    font: 800 .62rem/1.3 var(--ku-sans); font-stretch: 118%; letter-spacing: .26em; text-transform: uppercase; color: var(--ku-muted);
}
.konser-ultah-crowd__people, .konser-ultah-crowd__arm { fill: #030305; }
.konser-ultah-crowd__arm { stroke: #030305; stroke-width: 7; stroke-linecap: round; }
.konser-ultah-crowd__stick path { stroke: #3a3a46; stroke-width: 3; stroke-linecap: round; }
.konser-ultah-crowd__stick circle { fill: var(--inv-primary); filter: drop-shadow(0 0 5px var(--inv-primary)); }
.konser-ultah-crowd__stick:nth-child(even) circle { fill: var(--inv-accent); filter: drop-shadow(0 0 5px var(--inv-accent)); }
.konser-ultah-crowd__stick { transform-box: fill-box; transform-origin: 50% 100%; }
html.inv-anim .konser-ultah-crowd__stick { animation: konser-ultah-sway 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); }

/* ------------------------------------------------------------------ scroll-drawn details (finished drawing by default) */
@supports (animation-timeline: view()) {
    html.inv-anim .konser-ultah-head__wave path, html.inv-anim .konser-ultah-lyric__wave path {
        stroke-dasharray: 1; animation: konser-ultah-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
    }
    html.inv-anim .konser-ultah-song__title { animation: konser-ultah-marker linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    html.inv-anim .konser-ultah-poster { animation: konser-ultah-straighten linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    html.inv-anim .konser-ultah-album__art { animation: konser-ultah-slide linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes konser-ultah-marker { from { background-size: 0% .42em; } to { background-size: 100% .42em; } }
    @keyframes konser-ultah-straighten { from { rotate: -6deg; translate: 0 20px; } to { rotate: -1.2deg; translate: 0 0; } }
    /* the record rises out of its sleeve (the sleeve is drawn above the record) */
    @keyframes konser-ultah-slide { from { --konser-ultah-vinyl: 18%; } to { --konser-ultah-vinyl: 0%; } }
}
@property --konser-ultah-vinyl { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.konser-ultah-album__vinyl { translate: 0 var(--konser-ultah-vinyl, 0%); }
@keyframes konser-ultah-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ shared pieces: branding, nav, music, ambient */
.konser-ultah-body .konser-ultah-branding { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding-top: 1rem; background: #030305; color: var(--ku-muted); opacity: 1; }
.konser-ultah-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #08080b 90%, transparent);
    --inv-nav-text: var(--ku-muted);
    --inv-nav-active: var(--inv-primary);
    border-color: color-mix(in srgb, var(--inv-primary) 35%, transparent);
    font-family: var(--ku-sans);
}
.konser-ultah-body .inv-nav__item.is-active { color: var(--ku-deep); }
.konser-ultah-body .inv-music__button { background: var(--inv-primary); color: var(--ku-deep); }
.konser-ultah-body .inv-ambient { --inv-ambient-1: var(--inv-accent); --inv-ambient-2: var(--inv-primary); }

/* ------------------------------------------------------------------ reduced motion: everything still */
@media (prefers-reduced-motion: reduce) {
    .konser-ultah-cover--leave, .konser-ultah-cover--leave *, .konser-ultah-pick, .konser-ultah-tee__body, .konser-ultah-tee__print {
        animation: none !important; transition: none !important;
    }
    html { scroll-behavior: auto; }
}