/* =========================================================
   METROPOLIS — modern metal / rock
   Originálne logo sa nikdy nemení: animácie sú len okolo neho.
   ========================================================= */
:root {
  --bg: #000;
  --bg2: #070605;
  --panel: #0e0c0a;
  --gold: #ffb544;
  --gold2: #ffe1a0;
  --amber: #ff7919;
  --bronze: #a86c2f;
  --text: #f3eee8;
  --muted: #a39a90;
  --line: rgba(255, 181, 68, .18);
  --ff-d: 'Barlow Condensed', Impact, sans-serif;
  --ff: Inter, system-ui, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 6vw, 110px);
  /* max. šírka obsahu – na veľkých monitoroch sa obsah drží v strede, pozadia ostávajú na celú šírku */
  --max: 1480px;
  --side: max(var(--pad), calc((100% - var(--max)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ff); line-height: 1.6; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, label { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
::selection { background: var(--gold); color: #111; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 5px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: #111; padding: 10px 16px; font-weight: 700; }
.skip-link:focus { top: 16px; }

/* Logo: obrázok je nezmenený, len čierne okraje JPG sa jemne strácajú do pozadia */
.logo-img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 79%, transparent 97%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 79%, transparent 97%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

/* ---------------- INTRO ---------------- */
.intro { display: none; }
.js .intro { display: block; touch-action: none; position: fixed; inset: 0; z-index: 100; background: #000; --tx: 50vw; --ty: 45vh; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-ui { position: absolute; left: 0; right: 0; bottom: 9vh; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--gold2); pointer-events: none; transition: opacity .4s; }
.intro-label { font: 700 10px/1 var(--ff); letter-spacing: 6px; text-transform: uppercase; color: #d9a35a; }
.intro-pct { font: 800 clamp(46px, 6vw, 84px)/1 var(--ff-d); font-variant-numeric: tabular-nums; letter-spacing: 2px; background: linear-gradient(180deg, #fff1c9, #ffb544 60%, #ff7919); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-bar { width: min(320px, 60vw); height: 1px; background: rgba(255, 181, 68, .18); overflow: hidden; }
.intro-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--gold2)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px var(--gold); }
.intro-hint { font-size: 11px; letter-spacing: 1.5px; color: #8f8578; }
.intro-skip { position: absolute; top: 28px; right: var(--side); font: 700 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: #e8c48a; padding: 12px 16px; border: 1px solid rgba(255, 181, 68, .35); transition: background .3s, color .3s; }
.intro-skip:hover { background: var(--gold); color: #120900; }
.intro.is-flash .intro-ui, .intro.is-flash .intro-skip { opacity: 0; transition: opacity .2s; }
.intro.is-out { opacity: 0; visibility: hidden; transition: opacity 1s ease .15s, visibility 0s 1.2s; }

/* ---------------- CURSOR ---------------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; transition: opacity .3s; }
.has-cursor .cursor.is-hidden { opacity: 0; }
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 12px var(--gold), 0 0 3px #fff; }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; }
.cursor-ring::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 190, 90, .65); border-radius: 50%; transition: transform .45s var(--ease-out), background .35s, border-color .35s; }
.cursor.is-link .cursor-ring::before { transform: scale(1.7); background: rgba(255, 181, 68, .12); border-color: var(--gold); }
.cursor.is-label .cursor-ring::before { transform: scale(2.3); background: var(--gold); border-color: var(--gold); }
.cursor.is-down .cursor-ring::before { transform: scale(.75); }
.cursor-label { position: relative; font: 800 9px/1 var(--ff); letter-spacing: 1.5px; text-transform: uppercase; color: #140a00; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-label .cursor-label { opacity: 1; }

.progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 70; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--amber), var(--gold2)); box-shadow: 0 0 12px var(--gold); pointer-events: none; }

/* ---------------- NAV ---------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--side); transition: transform .6s var(--ease-out), background .4s, height .4s, border-color .4s; border-bottom: 1px solid transparent; }
.js:not(.hero-ready) .nav { transform: translateY(-110%); }
.nav.is-scrolled { background: rgba(0, 0, 0, .9); height: 74px; border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-110%); }
.brand { display: block; line-height: 0; flex-shrink: 0; }
.brand img { width: 84px; height: auto; transition: width .4s var(--ease-out); }
.nav.is-scrolled .brand img { width: 66px; }
.navlinks { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.navlinks a { position: relative; font: 700 11px/1.3 var(--ff); letter-spacing: 2.4px; text-transform: uppercase; color: #ded8d1; }
.navlinks a:not(.navcta) { display: inline-block; height: 1.3em; overflow: hidden; }
.navlinks a span[data-text] { display: block; transition: transform .5s var(--ease-out); }
.navlinks a span[data-text]::after { content: attr(data-text); display: block; color: var(--gold2); }
.navlinks a:hover span[data-text], .navlinks a:focus-visible span[data-text] { transform: translateY(-100%); }
.navlinks a.is-active { color: var(--gold); }
.navlinks a:not(.navcta)::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.navlinks a.is-active::before { transform: scaleX(1); transform-origin: left; }
.navcta { padding: 13px 18px; border: 1px solid #b57531; color: var(--gold2) !important; transition: background .3s, color .3s, transform .3s var(--ease-out); }
.navcta:hover { background: var(--gold); color: #140a00 !important; }
.hamb { display: none; width: 44px; height: 44px; position: relative; z-index: 2; }
.hamb i { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--gold2); transition: transform .4s var(--ease-out), top .4s; }
.hamb i:first-child { top: 17px; } .hamb i:last-child { top: 25px; }
.menu-open .hamb i:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .hamb i:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------------- HERO ---------------- */
.hero {
  --cx: 50%; --cy: 44%; --px: 0; --py: 0; --charge: 0;
  --lw: min(78vw, 50vh, 470px);
  --lw: min(78vw, 50svh, 470px);
  position: relative; min-height: max(720px, 100vh); min-height: max(720px, 100svh);
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  padding: 110px var(--side) 130px; background: #000;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg > *, .energy > * { position: absolute; }
.energy { inset: 0; transform-origin: var(--cx) var(--cy); }
.energy-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmos { inset: 0; width: 100%; height: 100%; }
.skyline { left: -4%; bottom: 0; width: 108%; height: 36%; overflow: visible; }
.skyline { will-change: transform; }
.skyline--back { opacity: .55; }
.skyline--front { opacity: .9; height: 26%; }
.skyline--back .sk-body { fill: rgba(30, 18, 8, .55); stroke: rgba(255, 181, 68, .22); stroke-width: 1; }
.skyline--front .sk-body { fill: #040302; stroke: rgba(255, 181, 68, .42); stroke-width: 1.2; }
.skyline .sk-win { fill: #ffc766; }
.skyline .sk-win--a { animation: flicker 4.2s steps(2) infinite; }
.skyline .sk-win--b { animation: flicker 6.6s steps(2) infinite 1.3s; }
.skyline .sk-win--c { opacity: .45; }
.cursor-glow { left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(255, 175, 70, .2), rgba(255, 120, 20, .08) 35%, transparent 62%); will-change: transform; }
.hero.is-hover .cursor-glow { opacity: 1; }
.stage { left: var(--cx); top: var(--cy); width: calc(var(--lw) * 2.1); height: calc(var(--lw) * 1.7); translate: -50% -50%;
  background: radial-gradient(closest-side, #000 0, #000 56%, rgba(0, 0, 0, .86) 70%, rgba(0, 0, 0, .45) 86%, transparent 100%); }
.halo { left: var(--cx); top: var(--cy); width: calc(var(--lw) * 1.62); aspect-ratio: 1; translate: -50% -50%;
  will-change: transform; }
.ring { position: absolute; inset: 0; border-radius: 50%; }
.ring--a { border: 1px solid rgba(255, 180, 62, .24); box-shadow: 0 0 40px rgba(255, 136, 10, .1), inset 0 0 40px rgba(255, 150, 20, .06); }
.ring-glow { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 196, 100, .75); box-shadow: 0 0 46px rgba(255, 140, 20, .4), inset 0 0 40px rgba(255, 150, 20, .14); opacity: 0; will-change: opacity; }
.ring--a::before { content: ''; position: absolute; inset: -1%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,138,18,.32) 34deg, #ffc05b 61deg, #fff1c1 69deg, transparent 80deg, transparent 150deg, rgba(255,133,18,.33) 193deg, #ffc05b 236deg, #fff1c1 244deg, transparent 255deg);
  -webkit-mask-image: radial-gradient(circle, transparent 67%, rgba(0,0,0,.18) 68.6%, #000 69.6%, #000 70.3%, rgba(0,0,0,.18) 71.4%, transparent 73%);
  mask-image: radial-gradient(circle, transparent 67%, rgba(0,0,0,.18) 68.6%, #000 69.6%, #000 70.3%, rgba(0,0,0,.18) 71.4%, transparent 73%);
  animation: spin 26s linear infinite; will-change: transform; }
.ring--b { inset: -12%; border: 1px dashed rgba(255, 175, 52, .16); animation: spin 70s linear infinite reverse; }
.ring--c { inset: 16%; border: 1px solid rgba(255, 195, 92, .12); animation: spin 22s linear infinite; }
.ring i { position: absolute; top: 14.6%; left: 14.6%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffedb5; box-shadow: 0 0 10px 3px #ffa92d, 0 0 24px #ff7b12; }
.flare { left: 50%; top: 50%; width: 170%; height: 1px; translate: -50% -50%; position: absolute; opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(255,154,38,.12) 15%, #ffd075 44%, #fff5cb 50%, #ffd075 56%, rgba(255,154,38,.12) 85%, transparent); }
.hero-fade { inset: auto 0 0 0; height: 30%; background: linear-gradient(0deg, #000 0, rgba(0,0,0,.75) 30%, transparent); }

.hero-inner { position: relative; z-index: 2; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-inner > *:not(.hero-logo) { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 16px; color: var(--gold2); font: 700 11px/1 var(--ff); letter-spacing: 5px; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { content: ''; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after { transform: scaleX(-1); }
.hero-logo { width: var(--lw); margin: calc(var(--lw) * -.05) 0 calc(var(--lw) * -.19); line-height: 0; font-size: 0; }
.hero-logo img { width: 100%; height: auto; }
.hero-sub { font: 600 clamp(15px, 1.7vw, 22px)/1.3 var(--ff-d); letter-spacing: .5em; margin: 0 0 30px; padding-left: .5em; color: #f2d3a3; text-shadow: 0 0 22px rgba(255, 150, 40, .35); }
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero-bottom { position: absolute; left: var(--side); right: var(--side); bottom: 30px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; font: 700 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: #d3a769; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.mouse { width: 18px; height: 28px; border: 1px solid rgba(255, 181, 68, .6); border-radius: 10px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: var(--gold2); animation: wheel 1.8s var(--ease) infinite; }
.next-show { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(255, 181, 68, .28); background: rgba(0, 0, 0, .72); transition: border-color .3s, color .3s; }
.next-show:hover { border-color: var(--gold); color: var(--gold2); }
.pulse, .live-dot { position: relative; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.pulse::after, .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.8s ease-out infinite; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #765127; background: rgba(6, 4, 2, .8); color: #f4cb8a; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.motion-toggle:hover { border-color: #ffc45e; color: #ffe8b5; }
.motion-mark { width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.effects-paused .motion-mark { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.hero.effects-paused .hero-bg *, .hero.effects-paused .hero-bg *::before { animation-play-state: paused !important; }

/* Vstupná animácia hero po intre */
.js .hero-anim { opacity: 0; transform: translateY(28px); }
.js .hero-logo img { opacity: 0; clip-path: circle(0% at 50% 45%); }
.js .energy, .js .halo { opacity: 0; scale: .35; }
.js .skyline { opacity: 0; translate: 0 60px; }
.hero-ready .hero-anim { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.3s var(--ease-out) var(--d, 0s); }
.hero-ready .hero-logo img { opacity: 1; clip-path: circle(80% at 50% 45%); transition: clip-path 1.6s var(--ease-out), opacity .5s; }
.hero-ready .energy { opacity: 1; scale: 1; transition: opacity 1.4s ease, scale 2.4s var(--ease-out); }
.hero-ready .halo { opacity: 1; scale: 1; transition: opacity 1.2s ease .2s, scale 1.8s var(--ease-out) .2s; }
.hero-ready .skyline--back { opacity: .55; translate: 0 0; transition: opacity 1.6s ease .3s, translate 1.8s var(--ease-out) .3s; }
.hero-ready .skyline--front { opacity: .9; translate: 0 0; transition: opacity 1.6s ease .45s, translate 1.8s var(--ease-out) .45s; }

/* Najbližší koncert v úvode */
.hero-show { position: relative; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: clamp(16px, 2.6vw, 34px); margin-top: 26px; padding: 14px 16px 14px 22px; text-align: left;
  border: 1px solid rgba(255, 181, 68, .45); background: linear-gradient(120deg, rgba(40, 24, 8, .88), rgba(0, 0, 0, .86)); box-shadow: 0 18px 50px -20px rgba(255, 140, 20, .55), inset 0 0 30px rgba(255, 150, 30, .06);
  overflow: hidden; transition: border-color .4s, box-shadow .5s, translate .5s var(--ease-out); }
.hero-show::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 220, 150, .16), transparent); transform: skewX(-20deg); animation: sheen 5s ease-in-out infinite 2s; }
.hero-show:hover { border-color: var(--gold); box-shadow: 0 22px 60px -18px rgba(255, 150, 30, .8), inset 0 0 30px rgba(255, 150, 30, .1); translate: 0 -3px; }
.hs-info { display: grid; gap: 4px; }
.hs-label { display: inline-flex; align-items: center; gap: 9px; font: 800 9px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.hs-date { font: 800 26px/1 var(--ff-d); letter-spacing: 1px; color: #fff3dc; }
.hs-date i { font-style: normal; color: var(--gold2); margin-left: 6px; }
.hs-venue { font-size: 11px; letter-spacing: .5px; color: #b8a58a; }
.countdown--mini { gap: 6px; align-items: flex-start; padding-left: clamp(16px, 2.6vw, 34px); border-left: 1px solid rgba(255, 181, 68, .25); }
.countdown--mini .cd-unit { min-width: 0; padding: 0; border: 0; background: none; }
.countdown--mini .cd-unit:hover { transform: none; }
.countdown--mini .cd-unit b { font-size: clamp(28px, 3vw, 38px); text-shadow: 0 0 18px rgba(255, 160, 40, .45); }
.countdown--mini .cd-unit small { font-size: 8px; letter-spacing: 2px; }
.cd-sep { font: 700 26px/1.1 var(--ff-d); color: rgba(255, 181, 68, .55); animation: blink 1s steps(2) infinite; }
.hs-more { font: 800 10px/1 var(--ff); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold2); padding: 12px 14px; border: 1px solid rgba(255, 181, 68, .35); transition: background .3s, color .3s; white-space: nowrap; }
.hs-more:hover { background: var(--gold); color: #140a00; }
.note a { color: var(--gold2); border-bottom: 1px solid currentColor; }
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 140%; } }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------- BUTTONS ---------------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 28px; font: 800 11px/1 var(--ff); letter-spacing: 2.2px; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color .4s, box-shadow .4s, transform .4s var(--ease-out); }
.btn > * { position: relative; z-index: 1; }
.btn-gold { background: linear-gradient(115deg, #ffd27a, #ffab30); color: #170c01; box-shadow: 0 12px 40px -12px rgba(255, 150, 30, .7); }
.btn-gold::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), #fff4d4, transparent 65%); opacity: 0; transition: opacity .4s; }
.btn-gold::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); transition: left .8s var(--ease-out); }
.btn-gold:hover { box-shadow: 0 16px 50px -10px rgba(255, 160, 40, .9); }
.btn-gold:hover::before { opacity: 1; }
.btn-gold:hover::after { left: 130%; }
.btn-outline { border: 1px solid rgba(255, 181, 68, .45); color: #f1e3cc; background: rgba(0, 0, 0, .4); }
.btn-outline::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, #ffd27a, #ffab30); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.btn-outline:hover { color: #140a00; }
.btn-outline:hover::before { transform: scaleY(1); }
.arr { display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px) rotate(-45deg); }

/* ---------------- MARQUEE ---------------- */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: #050403; padding: 22px 0; }
.marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.marquee span, .marquee i { font: 800 clamp(30px, 4.6vw, 64px)/1 var(--ff-d); text-transform: uppercase; letter-spacing: 1px; padding: 0 28px; white-space: nowrap; font-style: normal; }
.marquee .o { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.marquee i { font-size: clamp(14px, 1.6vw, 22px); color: var(--amber); padding: 0; }
.marquee span { transition: color .3s, -webkit-text-stroke-color .3s, text-shadow .3s; }
.marquee span:hover { color: var(--gold2); text-shadow: 0 0 30px rgba(255, 160, 40, .6); }

/* ---------------- SECTIONS ---------------- */
.section { position: relative; padding: clamp(90px, 12vw, 160px) var(--side); }
.kicker { display: flex; align-items: center; gap: 14px; font: 800 11px/1 var(--ff); letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.title { font: 800 clamp(50px, 8.2vw, 116px)/.95 var(--ff-d); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 30px; }
.title em, .mega em { font-style: normal; color: var(--gold); }
.section p { color: var(--muted); line-height: 1.95; font-size: 15px; max-width: 600px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.lead { max-width: 330px !important; font-size: 13px !important; }

/* split text */
.word { display: inline-block; white-space: nowrap; overflow: hidden; padding: .12em .02em 0; margin: -.12em -.02em 0; vertical-align: top; }
.char { display: inline-block; }
.js [data-split] .char { transform: translateY(110%); }
.js [data-split].is-in .char { transform: none; transition: transform 1s var(--ease-out) calc(var(--i) * 24ms); }
.js [data-split].is-done .char { transition: transform .45s var(--ease-out), color .3s, text-shadow .3s; }
[data-proximity] .word { overflow: visible; }
.js [data-split]:not(.is-in) .word { overflow: hidden; }

.js .reveal { opacity: 0; transform: translateY(42px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s); }

/* ---------------- BAND ---------------- */
.band { background: linear-gradient(180deg, #050403, #0d0b09); }
.band-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8%; align-items: center; }
.identity { --px: 0; --py: 0; position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: end; display: grid; place-items: center; border: 1px solid rgba(255, 181, 68, .14); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #000 0 52%, rgba(60, 30, 5, .3) 74%, #050403 100%), repeating-linear-gradient(0deg, transparent 0 32px, rgba(255, 181, 68, .05) 33px 34px); }
.identity img { position: relative; width: 74%; height: auto; z-index: 1; }
.identity small { position: absolute; bottom: 18px; left: 22px; z-index: 2; letter-spacing: 3px; color: #bba98c; font-size: 10px; }
.id-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; transition: transform .8s var(--ease-out); }
.id-ring--1 { width: 92%; aspect-ratio: 1; border: 1px solid rgba(255, 181, 68, .2); }
.id-ring--2 { width: 112%; aspect-ratio: 1; border: 1px dashed rgba(255, 181, 68, .18); animation: spin 50s linear infinite; }
.id-ring--3 { width: 70%; aspect-ratio: 1; border: 1px solid rgba(255, 181, 68, .1); animation: spin 18s linear infinite reverse; }
.id-ring i { position: absolute; top: 14.6%; left: 14.6%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffe7ad; box-shadow: 0 0 10px 3px #ffa92d; }
.id-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--gold); z-index: 2; transition: all .6s var(--ease-out); }
.id-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.id-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.id-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.id-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.identity:hover .id-corner { width: 44px; height: 44px; }
.identity:hover .id-corner.tl { top: 8px; left: 8px; } .identity:hover .id-corner.tr { top: 8px; right: 8px; }
.identity:hover .id-corner.bl { bottom: 8px; left: 8px; } .identity:hover .id-corner.br { bottom: 8px; right: 8px; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(70px, 9vw, 120px); background: var(--line); border: 1px solid var(--line); }
.pillar { position: relative; padding: 40px 34px 44px; background: #0b0908; overflow: hidden; }
.pillar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 170, 60, .14), transparent 50%); opacity: 0; transition: opacity .4s; }
.pillar::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--amber), var(--gold2)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.pillar:hover::before { opacity: 1; }
.pillar:hover::after { transform: scaleX(1); }
.pillar > * { position: relative; }
.pillar-num { display: block; font: 800 64px/1 var(--ff-d); color: transparent; -webkit-text-stroke: 1px rgba(255, 181, 68, .45); margin-bottom: 26px; transition: color .5s, transform .6s var(--ease-out); }
.pillar:hover .pillar-num { color: var(--gold); transform: translateX(8px); }
.pillar h3 { font: 800 32px/1 var(--ff-d); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.pillar p { font-size: 13px; margin: 0; }

/* ---------------- MUSIC ---------------- */
.music { background: #000; }
.music-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; }
.card { position: relative; min-height: 360px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(255, 181, 68, .16);
  background: linear-gradient(150deg, #1b1610, #0b0a09 70%); transition: transform .7s var(--ease-out), border-color .4s, box-shadow .5s; transform-style: preserve-3d; }
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 170, 60, .17), transparent 45%); opacity: 0; transition: opacity .4s; }
.card::after { content: ''; position: absolute; inset: 0; padding: 1px; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--gold), transparent 55%);
  -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); opacity: 0; transition: opacity .4s; }
.card:hover { box-shadow: 0 30px 70px -30px rgba(255, 140, 20, .45); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.big-num { position: absolute !important; right: -8px; bottom: -48px; z-index: 0 !important; font: 900 260px/1 var(--ff-d); color: transparent; -webkit-text-stroke: 1px rgba(255, 181, 68, .16); transition: transform .8s var(--ease-out), -webkit-text-stroke-color .5s; }
.card:hover .big-num { transform: translate(-14px, -18px); -webkit-text-stroke-color: rgba(255, 181, 68, .4); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.num { color: var(--gold); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.card h3 { font: 800 44px/1 var(--ff-d); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; transition: transform .6s var(--ease-out); }
.card:hover h3 { transform: translateX(6px); }
.card p { font-size: 13px; margin-bottom: 18px; }
.link { font: 700 11px/1 var(--ff); letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); display: inline-flex; align-items: flex-end; min-height: 40px; gap: 8px; padding: 14px 0 6px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.link:hover, .card:hover .link { background-size: 100% 1px; }
.eq { display: flex; gap: 4px; height: 28px; align-items: flex-end; }
.eq i { width: 4px; height: 100%; background: linear-gradient(0deg, var(--amber), var(--gold2)); transform: scaleY(.25); transform-origin: 50% 100%; transition: transform .4s; }
.card:hover .eq i { animation: eq .55s ease-in-out infinite alternate var(--d); }
.play { width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%; position: relative; transition: transform .5s var(--ease-out), background .3s; }
.play::after { content: ''; position: absolute; left: 13px; top: 10px; border-left: 10px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; transition: border-color .3s; }
.card:hover .play { transform: scale(1.18); background: var(--gold); }
.card:hover .play::after { border-left-color: #140a00; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4b1f; }

/* ---------------- VIDEO ---------------- */
.video { background: radial-gradient(ellipse at 20% 0%, rgba(90, 45, 8, .28), transparent 50%), #050403; }
.player-wrap { perspective: 1400px; }
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(255, 181, 68, .3); cursor: pointer;
  background: radial-gradient(ellipse at 50% 55%, #1c1107 0%, #070503 45%, #000 80%); transition: transform .8s var(--ease-out), box-shadow .5s, border-color .4s; transform-style: preserve-3d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.player:hover { border-color: rgba(255, 181, 68, .6); box-shadow: 0 40px 110px -30px rgba(255, 140, 20, .45); }
.player::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 190, 90, .12), transparent 45%); opacity: 0; transition: opacity .4s; }
.player:hover::after { opacity: 1; }
.player-rays { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%; opacity: .55; transition: opacity .6s; will-change: transform; animation: spin 60s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 14deg, rgba(255,170,50,.35) 18deg, transparent 24deg, transparent 70deg, rgba(255,200,100,.3) 74deg, transparent 80deg, transparent 130deg, rgba(255,160,40,.32) 135deg, transparent 141deg,
    transparent 195deg, rgba(255,210,120,.3) 199deg, transparent 205deg, transparent 255deg, rgba(255,170,50,.3) 259deg, transparent 265deg, transparent 315deg, rgba(255,200,100,.32) 320deg, transparent 326deg);
  -webkit-mask-image: radial-gradient(circle, transparent 6%, #000 14%, rgba(0,0,0,.6) 36%, transparent 60%); mask-image: radial-gradient(circle, transparent 6%, #000 14%, rgba(0,0,0,.6) 36%, transparent 60%); }
.player:hover .player-rays { opacity: 1; animation-duration: 14s; }
.player-skyline { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; opacity: .7; pointer-events: none; }
.player-skyline .sk-body { fill: rgba(10, 6, 3, .9); stroke: rgba(255, 181, 68, .35); stroke-width: 1; }
.player-skyline .sk-win { fill: #ffc766; }
.player-skyline .sk-win--a { animation: flicker 3.8s steps(2) infinite; }
.player-skyline .sk-win--c { opacity: .4; }
.player-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: flex; align-items: flex-end; gap: 3px; padding: 0 4%; pointer-events: none; opacity: .5; transition: opacity .5s; }
.player-eq i { flex: 1; height: 100%; transform: scaleY(.08); transform-origin: 50% 100%; background: linear-gradient(0deg, rgba(255, 121, 25, 0), rgba(255, 181, 68, .55)); animation: eqSoft 1.4s ease-in-out infinite alternate var(--d); }
.player:hover .player-eq { opacity: 1; }
.player:hover .player-eq i { animation-name: eq; animation-duration: .5s; }
.player-logo { position: absolute; top: 4%; left: 3%; width: clamp(80px, 13%, 150px); height: auto; z-index: 2; }
.play-btn { position: relative; z-index: 3; width: clamp(82px, 11vw, 124px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe2a1, #ffb544 45%, #ff7919 100%); box-shadow: 0 0 40px rgba(255, 150, 40, .55), 0 0 0 1px rgba(255, 225, 160, .6) inset; transition: transform .6s var(--ease-out), box-shadow .5s; }
.player:hover .play-btn { transform: scale(1.12); box-shadow: 0 0 80px rgba(255, 150, 40, .85), 0 0 0 1px rgba(255, 240, 200, .8) inset; }
.play-icon { width: 0; height: 0; margin-left: 8%; border-left: 26px solid #140a00; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.play-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 190, 90, .7); animation: ripple 2.6s var(--ease-out) infinite; }
.play-ring + .play-ring { animation-delay: 1.3s; }
.player-meta { position: absolute; left: 4%; bottom: 7%; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.player-title { font: 700 clamp(18px, 2.2vw, 30px)/1 var(--ff-d); letter-spacing: 1px; text-transform: uppercase; transition: color .3s; }
.player-title.is-flash { color: var(--gold2); animation: tick .5s var(--ease-out); }
.player .id-corner { z-index: 2; }
.player:hover .id-corner { width: 44px; height: 44px; }
.player.is-playing { cursor: auto; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

.video-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); }
.vid-item { position: relative; display: flex; align-items: center; gap: 20px; padding: 26px; background: #070605; overflow: hidden; }
.vid-item::before { content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 170, 60, .14), transparent 50%); opacity: 0; transition: opacity .4s; }
.vid-item::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--amber), var(--gold2)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.vid-item:hover::before { opacity: 1; }
.vid-item:hover::after { transform: scaleX(1); }
.vid-item > * { position: relative; }
.vid-num { font: 800 40px/1 var(--ff-d); color: transparent; -webkit-text-stroke: 1px rgba(255, 181, 68, .5); transition: color .4s; }
.vid-item:hover .vid-num { color: var(--gold); }
.vid-item h3 { font: 800 24px/1 var(--ff-d); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; }
.vid-item p { font-size: 12px !important; margin: 0; line-height: 1.4; }
.vid-arr { margin-left: auto; color: var(--gold2); transition: transform .5s var(--ease-out); }
.vid-item:hover .vid-arr { transform: translate(4px, -4px); }
@keyframes eqSoft { from { transform: scaleY(.08); } to { transform: scaleY(.6); } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* ---------------- CONCERTS / TICKET ---------------- */
.concerts { background: radial-gradient(ellipse at 80% 0%, rgba(90, 45, 8, .35), transparent 50%), #0b0907; }
.countdown { display: flex; gap: 10px; }
.cd-unit { min-width: 84px; padding: 16px 12px 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .5); text-align: center; transition: border-color .3s, transform .4s var(--ease-out); }
.cd-unit:hover { border-color: var(--gold); transform: translateY(-4px); }
.cd-unit b { display: block; font: 800 46px/1 var(--ff-d); font-variant-numeric: tabular-nums; color: var(--gold2); }
.cd-unit b.tick { animation: tick .5s var(--ease-out); }
.cd-unit small { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }

.ticket-wrap { perspective: 1400px; }
.ticket { --mx: 50%; --my: 50%; position: relative; display: grid; grid-template-columns: 1fr 230px; transition: transform .8s var(--ease-out); transform-style: preserve-3d; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); }
.ticket-main { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px); background: linear-gradient(120deg, #0c0906 0%, #000 45%, #120c06 100%); border: 1px solid rgba(255, 181, 68, .35); border-right: 0;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 14px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 14px, #000 15px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent 14px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 14px, #000 15px) bottom / 100% 51% no-repeat; }
.ticket-skyline { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; opacity: .55; pointer-events: none; }
.ticket-skyline .sk-body { fill: rgba(30, 18, 8, .5); stroke: rgba(255, 181, 68, .3); stroke-width: 1; }
.ticket-skyline .sk-win { fill: #ffc766; }
.ticket-skyline .sk-win--a { animation: flicker 3.4s steps(2) infinite; }
.ticket-top { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.tag { font: 800 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; padding: 9px 12px; background: var(--gold); color: #140a00; }
.tag--line { background: rgba(0, 0, 0, .5); color: var(--gold2); border: 1px solid rgba(255, 181, 68, .4); }
.ticket-body { position: relative; display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin: 18px 0 10px; }
.ticket-logo { width: 100%; height: auto; }
.ticket-info { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; margin: 0; }
.ticket-info .wide { grid-column: 1 / -1; }
.ticket-info dt { font: 700 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ticket-info dd { margin: 0; font: 800 clamp(30px, 4vw, 54px)/1 var(--ff-d); letter-spacing: 1px; }
.ticket-info .wide dd { font-size: clamp(24px, 2.6vw, 36px); color: #f1e3cc; }
.ticket-foot { position: relative; display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; padding-top: 22px; border-top: 1px dashed rgba(255, 181, 68, .3); }
.price small { display: block; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.price b { font: 800 36px/1 var(--ff-d); color: var(--gold2); }
.ticket-foot .btn { margin-left: auto; }
.ticket-glare, .photo-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: screen;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255, 220, 150, .22), transparent 40%), linear-gradient(115deg, transparent 30%, rgba(255, 200, 120, .08) 45%, rgba(255, 255, 255, .12) 50%, rgba(255, 200, 120, .08) 55%, transparent 70%) var(--mx) 0 / 250% 100%; }
.ticket:hover .ticket-glare, .ticket-photo:hover .photo-glare { opacity: 1; }
.ticket-stub { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 26px 18px; text-align: center; transform-origin: 0 50%; transition: transform .8s var(--ease-out);
  background: linear-gradient(160deg, #15100a, #050403); border: 1px solid rgba(255, 181, 68, .35); border-left: 2px dashed rgba(255, 181, 68, .45);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 14px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 14px, #000 15px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 14px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 14px, #000 15px) bottom / 100% 51% no-repeat; }
.ticket:hover .ticket-stub { transform: translateX(10px) rotate(4deg); }
.stub-name { font: 800 26px/1 var(--ff-d); letter-spacing: 3px; color: var(--gold2); }
.stub-sub { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ticket-stub b { font: 800 26px/1.05 var(--ff-d); }
.barcode { width: 80%; height: 34px; margin: 10px 0 6px; background: repeating-linear-gradient(90deg, #e9c993 0 2px, transparent 2px 4px, #e9c993 4px 5px, transparent 5px 8px, #e9c993 8px 11px, transparent 11px 13px); opacity: .8; }
.serial { font: 700 11px/1 var(--ff); letter-spacing: 2px; color: var(--muted); }
.serial output { display: inline-block; padding: 6px 12px; margin-left: 6px; background: #efe3cc; color: #140a00; font-weight: 800; letter-spacing: 3px; }
.note { margin-top: 26px; font-size: 12px !important; }

/* ---------------- VISUAL ---------------- */
.visual { background: #000; }
.visual-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6%; align-items: center; perspective: 1400px; }
.ticket-photo { position: relative; display: block; width: 100%; transition: transform .8s var(--ease-out), box-shadow .5s; box-shadow: 0 30px 70px rgba(0, 0, 0, .8); transform-style: preserve-3d; }
/* orezanie tlačových okrajov vstupenky */
.crop { display: block; aspect-ratio: 654 / 225; overflow: hidden; }
.crop img { width: 112.69%; max-width: none; height: auto; margin: -6.575% 0 0 -6.116%; }
.ticket-photo:hover { box-shadow: 0 40px 90px -10px rgba(255, 140, 20, .35); }

/* ---------------- CONTACT ---------------- */
.contact { text-align: center; overflow: hidden; overflow: clip; background: #000; }
.contact-glow { position: absolute; left: 0; right: 0; bottom: -40%; height: 110%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 130, 20, .32), rgba(120, 50, 5, .15) 35%, transparent 65%); animation: breathe 7s ease-in-out infinite alternate; }
.contact > * { position: relative; }
.contact .kicker { justify-content: center; }
.mega { font: 900 clamp(64px, 13vw, 210px)/.88 var(--ff-d); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 34px; }
.contact p { margin-inline: auto; }
.contact .actions { margin-top: 36px; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 44px 0 0; }
.chips li { padding: 10px 16px; border: 1px solid var(--line); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #d9c4a2; transition: border-color .3s, color .3s, transform .4s var(--ease-out), background .3s; }
.chips li:hover { border-color: var(--gold); color: #140a00; background: var(--gold); transform: translateY(-4px); }

/* Booking telefón */
.phone { display: inline-flex; align-items: center; gap: 18px; margin-top: 34px; padding: 16px 26px 16px 16px; text-align: left; border: 1px solid rgba(255, 181, 68, .45);
  background: linear-gradient(120deg, rgba(40, 24, 8, .9), rgba(0, 0, 0, .9)); box-shadow: 0 18px 50px -22px rgba(255, 140, 20, .6); transition: border-color .4s, box-shadow .5s, transform .4s var(--ease-out); }
.phone:hover { border-color: var(--gold); box-shadow: 0 22px 60px -18px rgba(255, 150, 30, .85); }
.phone-icon { position: relative; flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe2a1, #ffb544 45%, #ff7919); box-shadow: 0 0 24px rgba(255, 150, 40, .55); }
.phone-icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 190, 90, .7); animation: ripple 2.4s var(--ease-out) infinite; }
.phone-icon svg { width: 22px; height: 22px; fill: #140a00; transition: transform .4s var(--ease-out); }
.phone:hover .phone-icon svg { animation: ring .6s ease-in-out 2; }
.phone-txt { display: grid; gap: 4px; }
.phone-txt small { font: 800 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.phone-txt b { font: 800 clamp(26px, 3.4vw, 38px)/1 var(--ff-d); letter-spacing: 1px; color: #fff3dc; white-space: nowrap; }
.phone .arr { color: var(--gold2); font-size: 18px; }
.phone:hover .arr { transform: translate(3px, -3px); }
.footer-phone { color: var(--gold2); transition: color .3s; }
.footer-phone:hover { color: #fff; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }

/* ---------------- BOOKING FORM ---------------- */
.booking { position: relative; max-width: 860px; margin: 44px auto 0; padding: clamp(24px, 4vw, 48px); text-align: left; border: 1px solid rgba(255, 181, 68, .22);
  background: linear-gradient(160deg, rgba(26, 18, 10, .92), rgba(0, 0, 0, .92)); }
.booking::before { content: ''; position: absolute; inset: -1px; pointer-events: none; padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--gold), transparent 60%);
  -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); opacity: .7; }
.topics { border: 0; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.topics legend { width: 100%; margin-bottom: 14px; font: 800 10px/1 var(--ff); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; opacity: 0; pointer-events: none; }
.topics span { display: inline-block; padding: 11px 18px; border: 1px solid var(--line); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #d9c4a2; transition: border-color .3s, color .3s, background .3s, transform .4s var(--ease-out), box-shadow .4s; }
.topics label:hover span { border-color: var(--gold); transform: translateY(-3px); }
.topics input:checked + span { background: linear-gradient(115deg, #ffd27a, #ffab30); border-color: transparent; color: #140a00; font-weight: 800; box-shadow: 0 8px 26px -8px rgba(255, 150, 30, .7); }
.topics input:focus-visible + span { outline: 2px solid var(--gold2); outline-offset: 4px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.field { position: relative; padding-top: 18px; }
.field.wide { grid-column: 1 / -1; }
.field input, .field textarea { width: 100%; padding: 12px 0 12px; border: 0; border-bottom: 1px solid rgba(255, 181, 68, .25); background: transparent; color: var(--text); font: 500 16px/1.5 var(--ff); outline: 0; border-radius: 0; resize: vertical; }
.field textarea { min-height: 130px; }
.field label { position: absolute; left: 0; top: 30px; font-size: 13px; letter-spacing: 1px; color: #8f8578; pointer-events: none; transform-origin: 0 0; transition: transform .45s var(--ease-out), color .3s, letter-spacing .3s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-26px) scale(.78); color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; }
.field-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--amber), var(--gold2)); transform: scaleX(0); transform-origin: var(--lx, 50%) 50%; transition: transform .6s var(--ease-out); box-shadow: 0 0 12px rgba(255, 160, 40, .6); }
.field textarea ~ .field-line { bottom: 6px; }
.field input:focus ~ .field-line, .field textarea:focus ~ .field-line { transform: scaleX(1); }
.field:hover input, .field:hover textarea { border-bottom-color: rgba(255, 181, 68, .5); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #ff5a36; }
.field.is-invalid label { color: #ff7a5c; }
.field.is-invalid { animation: shake .45s var(--ease); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.consent { display: flex; align-items: flex-start; gap: 12px; max-width: 460px; cursor: pointer; font-size: 12px; line-height: 1.6; color: var(--muted); }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent .box { flex: 0 0 20px; height: 20px; margin-top: 1px; border: 1px solid rgba(255, 181, 68, .5); position: relative; transition: background .3s, border-color .3s; }
.consent .box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #140a00; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease-out); }
.consent input:checked + .box { background: var(--gold); border-color: var(--gold); }
.consent input:checked + .box::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible + .box { outline: 2px solid var(--gold2); outline-offset: 3px; }
.consent.is-invalid .box { border-color: #ff5a36; animation: shake .45s var(--ease); }
.booking .btn[disabled] { opacity: .7; pointer-events: none; }
.booking.is-sending .btn-txt::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 10px; border: 2px solid #140a00; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
.form-status { min-height: 1.4em; margin: 18px 0 0 !important; font-size: 13px !important; color: #ff8a6a !important; text-align: left; }
.form-status.is-ok { color: var(--gold2) !important; }
.form-success { max-width: 620px; margin: 44px auto 0; padding: 48px 28px; border: 1px solid rgba(255, 181, 68, .35); background: radial-gradient(circle at 50% 0%, rgba(255, 150, 40, .18), transparent 60%), rgba(0, 0, 0, .7); outline: 0; animation: zoomIn .7s var(--ease-out); }
.form-success svg { width: 84px; height: 84px; margin: 0 auto 18px; display: block; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(255, 160, 40, .7)); }
.form-success circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: draw 1s var(--ease-out) .1s forwards; }
.form-success path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .6s var(--ease-out) .8s forwards; }
.form-success h3 { font: 900 clamp(44px, 6vw, 72px)/1 var(--ff-d); text-transform: uppercase; color: var(--gold2); margin-bottom: 10px; }
.form-success .btn { margin-top: 18px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------------- FOOTER ---------------- */
.footer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; padding: 26px var(--side); border-top: 1px solid rgba(255, 255, 255, .1); color: #8e8780; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; background: #000; }
.footer img { width: 64px; height: auto; }
.to-top { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 181, 68, .4); color: var(--gold2); font-size: 16px; transition: background .3s, color .3s, transform .4s var(--ease-out); }
.to-top:hover { background: var(--gold); color: #140a00; }

/* ---------------- LIGHTBOX ---------------- */
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 5vw; background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn .4s ease; }
.lightbox[hidden] { display: none; }
.lightbox .crop { width: min(92vw, calc(88vh * 654 / 225)); box-shadow: 0 0 120px rgba(255, 140, 20, .25); animation: zoomIn .6s var(--ease-out); }
.lightbox-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border: 1px solid var(--gold); color: var(--gold2); font-size: 18px; transition: background .3s, color .3s; }
.lightbox-close:hover { background: var(--gold); color: #140a00; }

/* ---------------- KEYFRAMES ---------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { opacity: .7; } to { opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes zoomIn { from { transform: scale(.85) rotateX(12deg); opacity: 0; } }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 960px) {
  .hamb { display: block; }
  .navlinks { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 26px; background: rgba(0, 0, 0, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
  .menu-open .navlinks { opacity: 1; visibility: visible; transition: opacity .4s; }
  .navlinks a:not(.navcta) { font: 800 42px/1.1 var(--ff-d); letter-spacing: 2px; height: 1.1em; }
  .navlinks a { transform: translateY(20px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s; }
  .menu-open .navlinks a { transform: none; opacity: 1; }
  .menu-open .navlinks a:nth-child(2) { transition-delay: .05s; } .menu-open .navlinks a:nth-child(3) { transition-delay: .1s; }
  .menu-open .navlinks a:nth-child(4) { transition-delay: .15s; } .menu-open .navlinks a:nth-child(5) { transition-delay: .2s; } .menu-open .navlinks a:nth-child(6) { transition-delay: .25s; } .menu-open .navlinks a:nth-child(7) { transition-delay: .3s; }
  .menu-open .nav { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .band-grid, .visual-grid { grid-template-columns: 1fr; gap: 56px; }
  .identity { justify-self: center; }
  .pillars, .music-grid, .video-list { grid-template-columns: 1fr; }
  .card { min-height: 280px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-main { border-right: 1px solid rgba(255, 181, 68, .35); -webkit-mask: none; mask: none; }
  .ticket-stub { flex-direction: row; flex-wrap: wrap; border-left: 1px solid rgba(255, 181, 68, .35); border-top: 2px dashed rgba(255, 181, 68, .45); -webkit-mask: none; mask: none; transform-origin: 50% 0; }
  .ticket-stub .barcode { width: 120px; margin: 0; }
  .ticket:hover .ticket-stub { transform: translateY(8px) rotate(-1.5deg); }
}
@media (max-width: 640px) {
  .nav { height: 76px; }
  .brand img { width: 64px; }
  .hero { padding: 96px 20px 150px; --lw: min(86vw, 46svh, 380px); }
  .eyebrow { font-size: 9px; letter-spacing: 3px; gap: 10px; }
  .eyebrow::before, .eyebrow::after { width: 20px; }
  .hero-sub { letter-spacing: .3em; padding-left: .3em; font-size: 14px; }
  .hero-bottom { flex-wrap: wrap; justify-content: center; bottom: 22px; gap: 12px; }
  .scroll-cue { display: none; }
  .actions .btn { padding: 16px 20px; }
  .cd-unit small { letter-spacing: 1px; font-size: 8px; }
  .countdown { gap: 6px; }
  .cd-unit { padding: 14px 4px 10px; }
  .topics { gap: 8px; }
  .topics label { flex: 1 1 auto; }
  .topics span { display: block; text-align: center; padding: 13px 12px; }
  .vid-item { padding: 18px; gap: 14px; }
  .vid-num { font-size: 32px; }
  .vid-item h3 { font-size: 21px; }
  .hero-show { grid-template-columns: 1fr; justify-items: center; gap: 12px; padding: 16px 14px 14px; width: 100%; max-width: 380px; }
  .hs-info { text-align: center; justify-items: center; }
  .countdown--mini { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255, 181, 68, .2); justify-content: center; gap: 4px; }
  .countdown--mini .cd-unit { flex: 0 0 auto; min-width: 44px; }
  .countdown--mini .cd-unit b { font-size: 30px; }
  .cd-sep { font-size: 22px; }
  .hs-more { width: 100%; text-align: center; padding: 14px; }
  .motion-toggle { min-height: 40px; }
  .hs-venue { font-size: 12px; }
  .ticket-body { grid-template-columns: 1fr; }
  .ticket-logo { width: 200px; margin: 0 auto; }
  .ticket-foot .btn { margin-left: 0; width: 100%; }
  .countdown { width: 100%; }
  .cd-unit { flex: 1; min-width: 0; }
  .cd-unit b { font-size: 36px; }
  .fields { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
  .player { aspect-ratio: 4 / 3; }
  .player-meta { left: 5%; right: 5%; }
  .footer { justify-content: center; text-align: center; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-toggle { display: none; }
}

@media (max-width: 360px) {
  .hs-date { font-size: 22px; }
  .countdown--mini .cd-unit { min-width: 38px; }
  .countdown--mini .cd-unit b { font-size: 26px; }
  .hero-sub { letter-spacing: .22em; padding-left: .22em; font-size: 13px; }
  .actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .player { aspect-ratio: 1 / 1; }
  .play-btn { width: 76px; }
  .play-icon { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
  .player-logo { width: 64px; top: 5%; left: 5%; }
  .player-title { font-size: 16px; }
  .player-meta { bottom: 6%; gap: 10px; }
  .player .id-corner { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .eyebrow { font-size: 8px; letter-spacing: 2px; white-space: nowrap; }
  .eyebrow::before, .eyebrow::after { width: 14px; }
}
/* Vstupenka v zväčšení: na telefóne na výšku sa otočí, aby bola čitateľná */
@media (orientation: portrait) and (max-width: 640px) {
  .lightbox .crop { position: absolute; left: 50%; top: 50%; width: min(86vh, 230vw); transform: translate(-50%, -50%) rotate(90deg); animation: none; }
  .lightbox-close { z-index: 2; }
  .lightbox { overflow: hidden; }
}

/* Nízke obrazovky (telefón na šírku): intro texty nezakrývajú energiu */
@media (max-height: 520px) {
  .intro-ui { bottom: 14px; gap: 6px; }
  .intro-label, .intro-hint { display: none; }
  .intro-pct { font-size: 34px; }
  .intro-skip { top: 14px; padding: 10px 12px; }
  .hero { padding-top: 84px; }
}

@media (max-width: 480px) {
  .phone { width: 100%; max-width: 380px; gap: 14px; padding: 14px 16px 14px 14px; }
  .phone-icon { flex-basis: 46px; height: 46px; }
  .phone-txt b { font-size: 25px; }
}
@media (max-width: 340px) { .phone-txt b { font-size: 22px; } .phone .arr { display: none; } }

/* sociálne siete */
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.social-link { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border: 1px solid rgba(255, 181, 68, .3); border-radius: 999px; background: rgba(0, 0, 0, .72);
  font: 800 13px/1 var(--ff); letter-spacing: 2.5px; text-transform: uppercase; color: #fff3dc; transition: border-color .3s, color .3s, box-shadow .4s; }
.social-link svg { flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(255, 150, 40, .1); border: 1px solid rgba(255, 181, 68, .4);
  fill: none; stroke: var(--gold2); stroke-width: 1.8; transition: background .35s, stroke .35s, fill .35s, transform .45s var(--ease-out); }
.social-link svg .dot, .footer-social svg .dot { fill: var(--gold2); stroke: none; }
.social-link svg .fill, .footer-social svg .fill { fill: var(--gold2); stroke: none; }
.social-link:hover { border-color: var(--gold); box-shadow: 0 18px 50px -20px rgba(255, 150, 30, .85); }
.social-link:hover svg { background: radial-gradient(circle at 35% 30%, #ffe2a1, #ffb544 45%, #ff7919); stroke: #140a00; transform: rotate(-10deg) scale(1.06); }
.social-link:hover svg .dot, .social-link:hover svg .fill { fill: #140a00; }
.footer-social { display: inline-flex; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); transition: border-color .3s, transform .3s var(--ease-out); }
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: var(--gold2); stroke-width: 1.8; }
.footer-social a:hover { border-color: var(--gold); transform: translateY(-3px); }
@media (max-width: 640px) { .social { gap: 10px; } .social-link { gap: 9px; padding: 7px 16px 7px 7px; font-size: 11px; letter-spacing: 1.5px; } .social-link svg { flex-basis: 34px; width: 34px; height: 34px; padding: 8px; } }
@media (max-width: 360px) { .social { gap: 10px; } .social-link span { display: none; } .social-link { padding: 6px; } }