/* ═══════════════════════════════════════════════════
   CELEST & CHARLES — New Web 2025
   Design tokens + Complete stylesheet
   ═══════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─── */
:root {
   /* Colors */
   --c-bg:       #FFFFFF;
   --c-bg-alt:   #F6F2FF;
   --c-black:    #060606;
   --c-text:     #1a1a1a;
   --c-text-soft:#5a5a5a;
   --c-primary:  #A774FF;
   --c-red:      #E94F37;
   --c-yellow:   #F9C339;
   --c-teal:     #F9C339;
   --c-white:    #FFFFFF;

   /* Typography */
   --f-display: 'Jost', sans-serif;
   --f-body:    'Antonio', sans-serif;

   /* Spacing */
   --space-xs:  0.5rem;
   --space-sm:  1rem;
   --space-md:  2rem;
   --space-lg:  4rem;
   --space-xl:  8rem;
   --space-2xl: 12rem;

   /* Sizing */
   --container: min(90vw, 1320px);
   --radius:    0px;
   --radius-lg: 0px;

   /* Transitions */
   --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
   --ease-dramatic: cubic-bezier(0.22, 1, 0.36, 1);
   --duration:  0.6s;
   --duration-slow: 1s;
}

/* ─── RESET ─── */
*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #000;
}

body {
   font-family: var(--f-body);
   font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.35rem);
   line-height: 1.7;
   color: var(--c-text);
   background: #000;
   overflow-x: hidden;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: var(--c-primary);
   text-decoration: none;
   transition: color 0.3s var(--ease-out);
}
a:hover {
   color: var(--c-red);
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
   font-family: var(--f-display);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   text-transform: uppercase;
}

h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
h4 { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem); }

p + p { margin-top: var(--space-sm); }

em { font-style: italic; color: var(--c-primary); }
strong { font-weight: 700; }

::selection {
   background: var(--c-primary);
   color: var(--c-white);
}

/* ─── CONTAINER ─── */
.container {
   width: var(--container);
   margin-inline: auto;
}

/* ─── SECTIONS ─── */
.section {
   padding: var(--space-xl) 0;
   position: relative;
}

.section__title {
   margin-bottom: var(--space-lg);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.section__title--center {
   text-align: center;
}

/* Alternating subtle backgrounds */
.section--koncerty {
   background: var(--c-bg-alt);
}

.section--kapela {
   background: #1a1008 url('../img/layout/magic_background.webp') center/cover no-repeat;
   overflow: hidden;
}

.section--kapela .section__title {
   color: var(--c-white);
   text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

.section--booking {
   background: var(--c-black);
   color: var(--c-white);
   position: relative;
   overflow: hidden;
   padding-bottom: calc(var(--space-xl) * 2);
}

.section--booking .container {
   position: relative;
   z-index: 1;
}

.concert-photo {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 0;
   line-height: 0;
}

.concert-photo::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      var(--c-black) 0%,
      var(--c-black) 30%,
      rgba(6,6,6,0.55) 58%,
      rgba(6,6,6,0.55) 100%
   );
   z-index: 1;
   pointer-events: none;
}

.concert-photo img {
   width: 100%;
   height: auto;
   display: block;
   filter: brightness(0.8);
}

.section--booking .section__title {
   color: var(--c-white);
}

.section--booking a {
   color: var(--c-yellow);
}
.section--booking a:hover {
   color: var(--c-white);
}


/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */

/* ── Hamburger button ── */
.hamburger {
   position: fixed;
   top: calc(1.4rem + env(safe-area-inset-top, 0px));
   right: 1.5rem;
   z-index: 2000;
   width: 50px;
   height: 50px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   mix-blend-mode: difference;
   transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.hamburger:hover { transform: scale(1.1); }

.hamburger__icon,
.hamburger__close {
   width: 100%;
   height: 100%;
   display: block;
}

.hamburger__close { display: none; }
.hamburger--open .hamburger__icon { display: none; }
.hamburger--open .hamburger__close { display: block; }

/* ── Fullscreen overlay navigation ── */
.nav-overlay {
   position: fixed;
   inset: 0;
   z-index: 1800;
   background: rgba(0, 0, 0, 0.72);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.nav-overlay--open {
   opacity: 1;
   visibility: visible;
}

.nav-overlay__list {
   list-style: none;
   text-align: center;
   padding: 0;
}

.nav-overlay__link {
   display: block;
   font-family: var(--f-display);
   font-weight: 900;
   font-size: clamp(2.8rem, 7vw, 6rem);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--c-white);
   text-decoration: none;
   line-height: 1.1;
   padding: 0.25rem 0;
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.nav-overlay__link:hover {
   color: var(--c-primary);
   background: var(--c-yellow);
   padding-left: 0.35em;
   padding-right: 0.35em;
}

/* Icon sections */
.nav-overlay__icons {
   display: flex;
   flex-direction: column;
   gap: 1.4rem;
   margin-top: 2.6rem;
   align-items: center;
}

.nav-overlay__icon-section {
   text-align: center;
}

.nav-overlay__icon-label {
   font-family: var(--f-display);
   font-weight: 900;
   font-size: 0.65rem;
   letter-spacing: 0.14em;
   color: rgba(255,255,255,0.45);
   text-transform: uppercase;
   margin: 0 0 0.85rem;
}

.nav-overlay__icon-row {
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

.nav-overlay__icon-row a {
   display: block;
   padding: 6px;
}

.nav-overlay__icon-row a img {
   width: 58px;
   height: 58px;
   display: block;
   opacity: 0.8;
   filter: brightness(0) invert(1);
   transition: opacity 0s, transform 0.15s ease;
}

.nav-overlay__icon-row a:hover img {
   opacity: 1;
   transform: scale(1.08);
}

/* Staggered entrance */
.nav-overlay--open .nav-overlay__list li:nth-child(1) .nav-overlay__link { opacity: 1; transform: none; transition-delay: 0.07s; }
.nav-overlay--open .nav-overlay__list li:nth-child(2) .nav-overlay__link { opacity: 1; transform: none; transition-delay: 0.13s; }
.nav-overlay--open .nav-overlay__list li:nth-child(3) .nav-overlay__link { opacity: 1; transform: none; transition-delay: 0.19s; }
.nav-overlay--open .nav-overlay__list li:nth-child(4) .nav-overlay__link { opacity: 1; transform: none; transition-delay: 0.25s; }
.nav-overlay--open .nav-overlay__list li:nth-child(5) .nav-overlay__link { opacity: 1; transform: none; transition-delay: 0.31s; }

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */

.hero {
   position: relative;
   width: 100%;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
   background: var(--c-black);
}

.hero__media {
   position: absolute;
   inset: 0;
}

/* Dark gradient overlay — darkens background behind text so mix-blend-mode title pops */
.hero__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background:
      linear-gradient(to right,  rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 55%, transparent 85%),
      linear-gradient(to top,    rgba(0,0,0,0.3)  0%, transparent 60%);
   pointer-events: none;
}

.hero__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 30%;
}

.hero__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
}

.hero__content {
   position: absolute;
   z-index: 2;
   mix-blend-mode: difference;
   color: var(--c-white);
   pointer-events: none;
   left: 22%;
   bottom: clamp(2rem, 6vh, 5rem);
   max-width: 65vw;
}

.hero__title {
   font-family: var(--f-display);
   font-weight: 900;
   font-size: clamp(3rem, 18vh, 13rem);
   line-height: 0.75;
   text-transform: uppercase;
   letter-spacing: -0.03em;
   mix-blend-mode: difference;
   color: var(--c-white);
   text-shadow: none;
}


/* Scroll indicator */
.hero__scroll {
   position: absolute;
   bottom: var(--space-md);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   z-index: 2;
   mix-blend-mode: difference;
   color: var(--c-white);
}

.hero__scroll span {
   font-family: var(--f-display);
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.2em;
}

.hero__scroll-line {
   width: 1px;
   height: 48px;
   background: var(--c-white);
   animation: scrollPulse 2s var(--ease-out) infinite;
}

@keyframes scrollPulse {
   0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
   40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
   60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
   100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ═══════════════════════════════════════════════════
   VIDEO SECTION
   ═══════════════════════════════════════════════════ */

.section--video {
   padding: var(--space-xl) 0;
   background: var(--c-black);
   overflow: hidden;
}

.section--bio {
   background: var(--c-bg);
   padding-top: var(--space-md);
}

.video-section {
   position: relative;
   width: min(940px, 90vw);
   margin: 0 auto;
}

/* SVG decorations flanking the video */
.video-section__svg {
   position: absolute;
   pointer-events: none;
   transform: rotate(-90deg);
}

.video-section__svg--left {
   left: -300px;
   width: 260px;
   height: auto;
   transform-origin: center center;
}

.video-section__svg--right {
   right: -330px;
   width: 300px;
   height: auto;
   transform-origin: center center;
}

/* Hide SVGs when video is near full width */
@media (max-width: 1400px) {
   .video-section__svg {
      display: none;
   }
}

/* Video wrapper */
.video-wrapper {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   background: var(--c-black);
}

.video-wrapper iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: none;
}

/* ═══════════════════════════════════════════════════
   BIO
   ═══════════════════════════════════════════════════ */

.grid--bio {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-lg);
   align-items: center;
}

.bio__lead {
   font-size: 2.2rem;
   font-weight: 500;
   line-height: 1.4;
   margin-bottom: var(--space-md);
}

.bio__body {
   font-size: 2.2rem;
   font-weight: 500;
   line-height: 1.4;
}

.bio__text em,
.bio__text strong {
   font-style: normal;
   font-weight: 500;
   color: inherit;
}

.bio__photo {
   overflow: hidden;
}

.bio__photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Social icons */
.socials {
   display: flex;
   gap: var(--space-sm);
   margin-top: var(--space-md);
   justify-content: center;
}

.socials a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   color: var(--c-text-soft);
   transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.socials a:hover {
   color: var(--c-primary);
   transform: translateY(-3px);
}

.socials svg {
   width: 22px;
   height: 22px;
}

/* Newsletter */
.newsletter {
   margin-top: var(--space-lg);
}

.newsletter__fields {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
}

.newsletter__input {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--f-body);
   font-size: 1rem;
   padding: 0.75rem 1rem;
   border: 1px solid rgba(0,0,0,0.12);
   background: var(--c-white);
   color: var(--c-text);
   outline: none;
   transition: border-color 0.3s;
}

.newsletter__input:focus {
   border-color: var(--c-primary);
}

.newsletter__extra {
   display: none;
   opacity: 0;
   width: 100%;
   transition: opacity 0.4s ease;
}

.newsletter__extra--visible {
   display: block;
   opacity: 1;
}

.newsletter__note {
   margin-top: var(--space-xs);
   font-size: 0.85rem;
   color: var(--c-text-soft);
   font-style: italic;
}

/* ═══════════════════════════════════════════════════
   FUNK TICKER
   ═══════════════════════════════════════════════════ */

.funk-ticker {
   display: block;
   background: #F9C339;
   overflow: hidden;
   padding: 4rem 0;
   text-decoration: none;
   cursor: pointer;
}

.funk-ticker__track {
   display: flex;
   width: max-content;
   white-space: nowrap;
   animation: funk-ticker-ltr 22s linear infinite reverse;
}

@keyframes funk-ticker-ltr {
   from { transform: translateX(0); }
   to   { transform: translateX(-16.6667%); }
}

.funk-ticker__group {
   display: flex;
   align-items: center;
   gap: clamp(1rem, 3vw, 2.5rem);
   flex-shrink: 0;
   padding-right: clamp(1rem, 3vw, 2.5rem);
}

.funk-ticker__text {
   font-family: var(--f-display);
   font-weight: 900;
   font-size: clamp(2.4rem, 5.5vw, 5.5rem);
   text-transform: uppercase;
   letter-spacing: -0.02em;
   line-height: 1;
}

.funk-ticker__text--red   { color: #E94F37; }
.funk-ticker__text--white { color: #FFFFFF; }
.funk-ticker__part--purple { color: #A774FF; }

.funk-ticker__sep {
   color: #FFFFFF;
   font-size: clamp(1.4rem, 2.8vw, 2.8rem);
   line-height: 1;
}

.funk-ticker__cta {
   font-family: var(--f-display);
   font-weight: 900;
   font-size: clamp(1.6rem, 3.2vw, 3.2rem);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   background: #E94F37;
   color: #FFFFFF;
   padding: 0.25em 0.8em;
   line-height: 1.4;
   white-space: nowrap;
}

/* Social icons row */
.social-icons {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
   margin-top: var(--space-md);
}

.social-icons__link {
   display: inline-flex;
   text-decoration: none;
}

.social-icons__icon {
   display: block;
   width: 52px;
   height: 52px;
   background-color: var(--c-black);
   mask-size: contain;
   -webkit-mask-size: contain;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-position: center;
   -webkit-mask-position: center;
   transition: background-color 0.2s ease;
}

.social-icons__icon--fb    { mask-image: url('../img/svg/fb-round.svg');          -webkit-mask-image: url('../img/svg/fb-round.svg'); }
.social-icons__icon--ig    { mask-image: url('../img/svg/ig-round.svg');          -webkit-mask-image: url('../img/svg/ig-round.svg'); }
.social-icons__icon--yt    { mask-image: url('../img/svg/yt-round.svg');          -webkit-mask-image: url('../img/svg/yt-round.svg'); }
.social-icons__icon--spoti { mask-image: url('../img/svg/spoti-round.svg');       -webkit-mask-image: url('../img/svg/spoti-round.svg'); }
.social-icons__icon--apple { mask-image: url('../img/svg/apple-music-round.svg'); -webkit-mask-image: url('../img/svg/apple-music-round.svg'); }

.social-icons__link:hover .social-icons__icon {
   background-color: var(--c-primary);
}


/* ═══════════════════════════════════════════════════
   KONCERTY
   ═══════════════════════════════════════════════════ */

/* Bandsintown widget — přebití fontu */
.bit-widget,
.bit-widget * {
   font-family: var(--f-body) !important;
   font-size: 1.25rem !important;
}

/* Bandsintown widget — tlačítka bez borderu, hover = fialový text */
.bit-widget .bit-button {
   border: none !important;
   border-radius: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   font-family: var(--f-display) !important;
   font-weight: 700 !important;
   font-size: 0.85rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.12em !important;
   padding: 0.85rem 2rem !important;
   color: var(--c-text) !important;
   cursor: pointer;
   text-decoration: none;
   transition: color 0.25s ease !important;
   display: inline-block !important;
   white-space: nowrap;
   min-width: auto !important;
   width: auto !important;
}
.bit-widget .bit-button::before,
.bit-widget .bit-button::after { display: none !important; }
.bit-widget .bit-button:hover,
.bit-widget .bit-button:active {
   color: var(--c-primary) !important;
   background: transparent !important;
}

.koncerty__widget {
   margin-bottom: var(--space-lg);
}

.koncerty__archive {
   display: flex;
   justify-content: center;
   gap: var(--space-sm);
   flex-wrap: wrap;
   margin-bottom: var(--space-md);
}

.koncerty__year-btn--active {
   color: var(--c-white) !important;
}
.koncerty__year-btn--active::after  { opacity: 1 !important; }

.koncerty__archive-content {
   display: none;
   margin-bottom: var(--space-md);
}

.koncerty__archive-content img {
   width: 100%;
   height: auto;
   display: block;
}

.koncerty__easter-egg {
   font-size: 2.2rem;
   font-weight: 500;
   line-height: 1.4;
   color: var(--c-black);
   max-width: 700px;
   margin-inline: auto;
   padding: var(--space-lg) 0;
}

.koncerty__easter-egg a {
   color: var(--c-primary);
   text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   HUDBA — Albums
   ═══════════════════════════════════════════════════ */

/* ── Dark gallery section ── */
.section--hudba {
   background: var(--c-black);
   color: var(--c-white);
}
.section--hudba .section__title {
   color: var(--c-yellow);
}

.lyrics__title {
   color: var(--c-yellow);
}

/* ── Cinema strips ── */
.albums-cinema {
   display: flex;
   height: 80vh;
   min-height: 440px;
   max-height: 820px;
   gap: 4px;
   margin-bottom: var(--space-xl);
   overflow: hidden;
}

.cinema__strip {
   position: relative;
   flex: 1;
   overflow: hidden;
   transform: skewX(-8deg);
   cursor: pointer;
   transition: flex 0.7s var(--ease-dramatic);
}

/* Outer edges intentionally skewed — black triangles visible */

/* On hover: this strip expands, siblings shrink */
.albums-cinema:has(.cinema__strip:hover) .cinema__strip { flex: 0.55; }
.cinema__strip:hover { flex: 2.2; }

/* Background image — counter-skewed to stay straight */
.cinema__bg {
   position: absolute;
   inset: -2% -18%;
   background-size: cover;
   background-position: center;
   transform: skewX(8deg);
   transition: transform 0.7s var(--ease-dramatic);
}
.cinema__strip:hover .cinema__bg {
   transform: skewX(8deg) scale(1.04);
}

/* Color grade overlay — dark gradient + tint */
.cinema__grade {
   position: absolute;
   inset: 0;
   transition: opacity 0.5s ease;
}
.cinema__strip:nth-child(1) .cinema__grade {
   background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(233,79,55,0.15) 60%, transparent 100%);
}
.cinema__strip:nth-child(2) .cinema__grade {
   background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(249,195,57,0.12) 60%, transparent 100%);
}
.cinema__strip:nth-child(3) .cinema__grade {
   background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(167,116,255,0.15) 60%, transparent 100%);
}
.cinema__strip:hover .cinema__grade { opacity: 0.7; }

/* Label at the bottom — counter-skewed */
.cinema__label {
   position: absolute;
   bottom: 2.5rem;
   left: 0;
   right: 0;
   padding: 0 2rem 0 3.5rem;
   transform: skewX(8deg);
   transition: transform 0.7s var(--ease-dramatic);
}

.cinema__year {
   display: block;
   font-family: var(--f-display);
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   margin-bottom: 0.3rem;
}
.cinema__year { color: var(--c-white); }

.cinema__title {
   font-family: var(--f-display);
   font-weight: 900;
   font-size: clamp(1.6rem, 3vw, 3rem);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   line-height: 1.05;
   color: var(--c-white);
}

/* ── Cinema strips — MOBILE: stacked rows ── */
@media (max-width: 650px) {
   .albums-cinema {
      flex-direction: column;
      height: auto;
      min-height: unset;
      max-height: unset;
      gap: 5px;
      margin-bottom: var(--space-lg);
   }

   .cinema__strip {
      flex: none !important;
      height: clamp(150px, 28vw, 220px);
   }

   .albums-cinema:has(.cinema__strip:hover) .cinema__strip,
   .cinema__strip:hover {
      flex: none !important;
   }

   .cinema__bg {
      inset: -20% -3%;
   }

   .cinema__label {
      bottom: 1rem;
      padding: 0 1.5rem 0 2rem;
   }

   .cinema__title {
      font-size: clamp(1.5rem, 5vw, 2rem);
   }
}

/* Album detail modal layout */
.album-detail {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: var(--space-lg);
   align-items: start;
}

.album-detail__cover img {
   width: 100%;
   box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.album-detail__cover .btn {
   margin-top: var(--space-sm);
}

.album-detail__info h3 {
   margin-bottom: var(--space-sm);
   text-transform: uppercase;
}

.album-detail__credits {
   margin-top: var(--space-md);
   font-size: 0.85rem;
   color: var(--c-text-soft);
}

/* Tracklist */
.tracklist {
   margin-top: var(--space-md);
}

.tracklist__item {
   display: flex;
   align-items: baseline;
   gap: var(--space-sm);
   padding: 0.5rem 0;
   border-bottom: 1px solid rgba(0,0,0,0.06);
   font-size: 0.95rem;
}

.tracklist__num {
   font-family: var(--f-display);
   font-weight: 700;
   color: var(--c-text-soft);
   min-width: 2rem;
}

.tracklist__name {
   flex: 1;
   font-weight: 500;
}

.tracklist__links {
   display: flex;
   gap: 0.5rem;
}

.tracklist__links a {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.25rem 0.6rem;
   border: 1px solid var(--c-primary);
   color: var(--c-primary);
   transition: all 0.3s var(--ease-out);
}

.tracklist__links a:hover {
   background: var(--c-primary);
   color: var(--c-white);
}

/* ─── LYRICS ─── */
.lyrics {
   margin-top: var(--space-lg);
   text-align: center;
}

.lyrics__title {
   margin-bottom: var(--space-md);
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.lyrics__grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   justify-content: center;
}


/* ═══════════════════════════════════════════════════
   KAPELA — MTG Cards
   ═══════════════════════════════════════════════════ */

/* Container full-width override */
.section--kapela .container {
   max-width: none;
   width: 100%;
   padding-left: clamp(16px, 3vw, 40px);
   padding-right: clamp(16px, 3vw, 40px);
}

.mtg-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: clamp(8px, 1.2vw, 20px);
}

/* ── BASE CARD ── */
.mtg-card {
   width: 100%;
   aspect-ratio: 63/88;
   border-radius: 14px;
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 0.65em;
   box-shadow:
      0 6px 20px rgba(0,0,0,.35),
      0 2px 4px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.15);
   cursor: default;
   opacity: 0;
   transform: translateY(30px);
   transition:
      opacity  0.5s var(--ease-dramatic),
      transform 0.5s var(--ease-dramatic),
      box-shadow 0.35s ease;
   font-size: clamp(11px, 1.15vw, 17px);
}

.reveal--visible .mtg-card {
   opacity: 1;
   transform: translateY(0);
}

/* Hover — !important potřebné aby přepsalo tilt z stagger pravidel níže */
.reveal--visible .mtg-card:hover {
   transform: translateY(-16px) rotate(-2.5deg) scale(1.07) !important;
   box-shadow:
      0 28px 55px rgba(0,0,0,.55),
      0 8px 16px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.2) !important;
   z-index: 10;
   transition:
      transform 0.3s cubic-bezier(.22,.68,0,1.4),
      box-shadow 0.3s ease,
      opacity 0s !important;
   transition-delay: 0s !important;
}

/* Stagger delays + tilt — flat nth-child (bez .mtg-row wrapperů) */
.reveal--visible .mtg-grid > .mtg-card:nth-child(1)  { transition-delay: 0s;    transform: translateY(0) rotate(-1.5deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(2)  { transition-delay: 0.08s; transform: translateY(0) rotate(2deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(3)  { transition-delay: 0.16s; transform: translateY(0) rotate(-2deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(4)  { transition-delay: 0.24s; transform: translateY(0) rotate(1.5deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(5)  { transition-delay: 0.32s; transform: translateY(0) rotate(-1deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(6)  { transition-delay: 0.40s; transform: translateY(0) rotate(2.5deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(7)  { transition-delay: 0.48s; transform: translateY(0) rotate(-2.5deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(8)  { transition-delay: 0.56s; transform: translateY(0) rotate(1deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(9)  { transition-delay: 0.64s; transform: translateY(0) rotate(-1.5deg); }
.reveal--visible .mtg-grid > .mtg-card:nth-child(10) { transition-delay: 0.72s; transform: translateY(0) rotate(2deg); }

/* ── INNER WRAPPER ── */
.mtg-card__inner {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   border-radius: 7px;
   border: 1.5px solid rgba(0,0,0,.45);
   overflow: hidden;
   position: relative;
}

/* ── NAME BAR ── */
.mtg-card__namebar {
   height: 1.85em;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 0.5em;
   border-bottom: 1px solid rgba(0,0,0,.3);
   flex-shrink: 0;
}

.mtg-card__name {
   font-size: 0.82em;
   font-weight: bold;
   letter-spacing: .02em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: Georgia, serif;
}

.mtg-card__pip {
   font-size: 0.9em;
   flex-shrink: 0;
   margin-left: 5px;
   line-height: 1;
}

/* ── ART BOX ── */
.mtg-card__art {
   flex: 2;
   min-height: 0;
   margin: 3px;
   border: 1.5px solid rgba(0,0,0,.5);
   overflow: hidden;
   background: #111;
}

.mtg-card__art img,
.mtg-card__art video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease;
}

.reveal--visible .mtg-card:hover .mtg-card__art img,
.reveal--visible .mtg-card:hover .mtg-card__art video {
   transform: scale(1.08);
}

/* ── TYPE LINE ── */
.mtg-card__typeline {
   height: 2em;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 0.5em;
   font-size: 0.65em;
   font-style: italic;
   border-top: 1px solid rgba(0,0,0,.25);
   border-bottom: 1px solid rgba(0,0,0,.2);
   flex-shrink: 0;
   margin: 0 3px;
   font-family: Georgia, serif;
}

.mtg-card__set-icon {
   font-size: 0.8em;
   opacity: .7;
}

/* ── TEXT BOX ── */
.mtg-card__textbox {
   flex: 1;
   min-height: 0;
   background: linear-gradient(180deg, #ece0b8 0%, #f4eacc 100%);
   margin: 2px 3px 3px;
   border: 1px solid rgba(0,0,0,.3);
   border-radius: 0 0 4px 4px;
   padding: 0.5em 0.5em 0.35em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
}

.mtg-card__realname {
   font-size: 0.7em;
   color: #1a1a1a;
   font-family: Georgia, serif;
   line-height: 1.45;
}

.mtg-card__realname strong {
   display: block;
   font-size: 1.1em;
}

/* ── BOTTOM BAR ── */
.mtg-card__bottom {
   height: 2.2em;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 0.5em;
   font-size: 0.47em;
   font-family: Arial, sans-serif;
   border-top: 1px solid rgba(0,0,0,.2);
   flex-shrink: 0;
   letter-spacing: .04em;
}

/* ── COLOR VARIANTS ── */

/* GOLD */
.mtg-card--gold {
   background: linear-gradient(145deg, #f8e870 0%, #b88020 20%, #f0d850 35%, #a07018 50%, #e8c840 65%, #906010 80%, #d8b830 100%);
}
.mtg-card--gold .mtg-card__inner    { background: #c8a028; }
.mtg-card--gold .mtg-card__namebar  { background: linear-gradient(90deg, #b89020, #d8b038); }
.mtg-card--gold .mtg-card__name     { color: #1a0e00; text-shadow: 0 1px 0 rgba(255,220,100,.4); }
.mtg-card--gold .mtg-card__typeline { background: linear-gradient(90deg, #b88820, #cca030); color: #1a0e00; }
.mtg-card--gold .mtg-card__bottom   { background: #b08018; color: rgba(255,245,180,.7); }

/* BLUE */
.mtg-card--blue {
   background: linear-gradient(145deg, #a8c8f0 0%, #1848a8 20%, #7098d8 35%, #1038a0 50%, #5080c8 65%, #0c30a0 80%, #3868c0 100%);
}
.mtg-card--blue .mtg-card__inner    { background: #1848b0; }
.mtg-card--blue .mtg-card__namebar  { background: linear-gradient(90deg, #1038a0, #2858b8); }
.mtg-card--blue .mtg-card__name     { color: #d8eeff; text-shadow: 0 1px 2px rgba(0,0,60,.5); }
.mtg-card--blue .mtg-card__typeline { background: linear-gradient(90deg, #0c3098, #2050b0); color: #c0daf8; }
.mtg-card--blue .mtg-card__bottom   { background: #0c2888; color: rgba(180,210,255,.7); }

/* BLACK */
.mtg-card--black {
   background: linear-gradient(145deg, #808080 0%, #1a1a1a 20%, #585858 35%, #101010 50%, #3a3a3a 65%, #0a0a0a 80%, #282828 100%);
}
.mtg-card--black .mtg-card__inner    { background: #252525; }
.mtg-card--black .mtg-card__namebar  { background: linear-gradient(90deg, #181818, #303030); }
.mtg-card--black .mtg-card__name     { color: #d8d0b0; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mtg-card--black .mtg-card__typeline { background: linear-gradient(90deg, #141414, #282828); color: #c0b898; }
.mtg-card--black .mtg-card__bottom   { background: #101010; color: rgba(180,170,140,.6); }

/* RED */
.mtg-card--red {
   background: linear-gradient(145deg, #e8a070 0%, #a02010 20%, #d07848 35%, #881808 50%, #c05830 65%, #780808 80%, #b04020 100%);
}
.mtg-card--red .mtg-card__inner    { background: #a02018; }
.mtg-card--red .mtg-card__namebar  { background: linear-gradient(90deg, #901810, #b83020); }
.mtg-card--red .mtg-card__name     { color: #ffe8d0; text-shadow: 0 1px 2px rgba(60,0,0,.6); }
.mtg-card--red .mtg-card__typeline { background: linear-gradient(90deg, #881010, #a82820); color: #ffd8b8; }
.mtg-card--red .mtg-card__bottom   { background: #780808; color: rgba(255,200,160,.7); }

/* GREEN */
.mtg-card--green {
   background: linear-gradient(145deg, #88c878 0%, #204820 20%, #60b050 35%, #184018 50%, #489840 65%, #103010 80%, #388030 100%);
}
.mtg-card--green .mtg-card__inner    { background: #1e4818; }
.mtg-card--green .mtg-card__namebar  { background: linear-gradient(90deg, #184018, #285820); }
.mtg-card--green .mtg-card__name     { color: #d8f0c0; text-shadow: 0 1px 2px rgba(0,30,0,.5); }
.mtg-card--green .mtg-card__typeline { background: linear-gradient(90deg, #143810, #205020); color: #c0e8a0; }
.mtg-card--green .mtg-card__bottom   { background: #103010; color: rgba(160,220,120,.7); }

/* PURPLE */
.mtg-card--purple {
   background: linear-gradient(145deg, #c898e0 0%, #501880 20%, #a068c8 35%, #401070 50%, #8850b8 65%, #300860 80%, #7040a8 100%);
}
.mtg-card--purple .mtg-card__inner    { background: #4a1878; }
.mtg-card--purple .mtg-card__namebar  { background: linear-gradient(90deg, #401070, #601898); }
.mtg-card--purple .mtg-card__name     { color: #ead8ff; text-shadow: 0 1px 2px rgba(20,0,40,.6); }
.mtg-card--purple .mtg-card__typeline { background: linear-gradient(90deg, #380868, #500880); color: #d8b8ff; }
.mtg-card--purple .mtg-card__bottom   { background: #300060; color: rgba(200,160,255,.7); }


/* ═══════════════════════════════════════════════════
   MAKE IT FUNKY — Arcade Button Section
   ═══════════════════════════════════════════════════ */

.section--funky-btn {
   background: #1e0040 url('../img/layout/sequin_stripe.webp') center/cover no-repeat;
   padding: 4rem 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
}

/* Row: label + arrow + button */
.btn-funky-layout {
   display: flex;
   align-items: center;
   gap: 2rem;
}

.btn-funky-wrap {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   perspective: 460px;
   perspective-origin: 50% 100%;
}

/* Text label */
.btn-funky-label {
   font-family: var(--font-display);
   font-size: clamp(1.6rem, 3vw, 2.8rem);
   font-weight: 700;
   letter-spacing: .12em;
   color: #ffd700;
   text-shadow: 0 2px 14px rgba(255,180,0,.45);
   text-transform: uppercase;
   margin: 0;
   line-height: 1.1;
}

/* Bouncing arrow */
.btn-funky-arrow {
   font-size: clamp(1.8rem, 3vw, 2.8rem);
   line-height: 1;
   display: block;
   animation: arrowBounce .85s ease-in-out infinite;
}

@keyframes arrowBounce {
   0%, 100% { transform: translateX(0); }
   50%       { transform: translateX(10px); }
}

/* ── Outer ring / collar — 3D perspective ── */
.btn-funky-base {
   width: 164px;
   height: 164px;
   border-radius: 50%;
   /* Gradient: spodní část (k nám) světlejší, vrchní (od nás) tmavší */
   background:
      radial-gradient(ellipse at 50% 80%, rgba(210,140,30,.55) 0%, transparent 55%),
      radial-gradient(circle at center, #c07200 0%, #a05800 35%, #7a3c00 65%, #4a2000 100%);
   box-shadow:
      inset 0 10px 22px rgba(0,0,0,.7),
      inset 0 -4px 10px rgba(255,170,40,.15),
      0 14px 40px rgba(0,0,0,.85);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   /* 3D tilt — díváme se ze strany */
   transform: rotateX(28deg);
   transform-style: preserve-3d;
   position: relative;
}

/* Spodní stěna manžety — viditelná ze strany */
.btn-funky-base::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 60%, #5a2c00 0%, #2e1200 50%, #140800 100%);
   transform: translateZ(-24px);
}

/* ── Inner dome (convex gold) ── */
.btn-funky {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   background: radial-gradient(circle at 36% 28%,
      #fffde0 0%,
      #ffe566 10%,
      #ffd000 24%,
      #f5b000 42%,
      #d48800 60%,
      #aa6200 78%,
      #7c3e00 100%);
   box-shadow:
      inset 0 5px 14px rgba(255,255,220,.6),
      inset 0 -6px 14px rgba(0,0,0,.5),
      0 4px 10px rgba(0,0,0,.45);
   /* Kupole vyčnívá dopředu */
   transform: translateZ(10px);
   transition: transform .1s ease, box-shadow .1s ease;
}

.btn-funky:hover {
   /* Kupole se zvedne směrem k divákovi */
   transform: translateZ(22px) scale(1.04);
   box-shadow:
      inset 0 5px 14px rgba(255,255,220,.65),
      inset 0 -6px 14px rgba(0,0,0,.45),
      0 0 30px 10px rgba(255,200,0,.45),
      0 8px 20px rgba(0,0,0,.55);
}

.btn-funky:active {
   /* Kupole se zmáčkne dovnitř */
   transform: translateZ(2px) scale(.97);
   box-shadow:
      inset 0 8px 18px rgba(0,0,0,.55),
      inset 0 -3px 8px rgba(255,255,200,.25),
      0 1px 5px rgba(0,0,0,.4);
}

/* ── HOVER VIBRATION ── */

@keyframes funkyHoverVibe {
   0%   { transform: translate(0,      0); }
   12%  { transform: translate(-1.5px,  .6px); }
   25%  { transform: translate( 1.5px, -.6px); }
   37%  { transform: translate(-1px,    1px); }
   50%  { transform: translate( 1.5px,  .4px); }
   62%  { transform: translate(-.8px,  -1px); }
   75%  { transform: translate( 1px,    .6px); }
   87%  { transform: translate(-1.2px, -.4px); }
   100% { transform: translate(0,      0); }
}

.funky-hover-vibe {
   animation: funkyHoverVibe .13s linear infinite;
}

/* ── EXPLOSION ANIMATIONS ── */

@keyframes funkyShake {
   0%   { transform: translate(0,0) rotate(0deg); }
   8%   { transform: translate(-14px,-8px) rotate(-2deg); }
   16%  { transform: translate(14px,8px) rotate(2deg); }
   24%  { transform: translate(-10px,12px) rotate(-1.5deg); }
   32%  { transform: translate(10px,-10px) rotate(1.5deg); }
   42%  { transform: translate(-7px,7px) rotate(-1deg); }
   52%  { transform: translate(7px,-7px) rotate(1deg); }
   62%  { transform: translate(-4px,4px) rotate(-.5deg); }
   72%  { transform: translate(4px,-4px) rotate(.5deg); }
   82%  { transform: translate(-2px,2px) rotate(0deg); }
   92%  { transform: translate(2px,-2px) rotate(0deg); }
   100% { transform: translate(0,0) rotate(0deg); }
}

.funky-shake {
   animation: funkyShake .65s ease-out forwards;
}

@keyframes funkyFlash {
   0%   { opacity: 0; }
   12%  { opacity: .75; }
   35%  { opacity: .25; }
   65%  { opacity: .1; }
   100% { opacity: 0; }
}

.funky-flash {
   position: absolute;
   left: 0;
   right: 0;
   z-index: 9998;
   background: radial-gradient(circle at center, #fff5a0, #ffd700 40%, #ff8c00);
   pointer-events: none;
   animation: funkyFlash .55s ease-out forwards;
}

@keyframes funkyEmoji {
   0%   { transform: translate(0,0) scale(.2) rotate(0deg); opacity: 1; }
   30%  { opacity: 1; }
   100% { transform: translate(var(--ex),var(--ey)) scale(var(--es)) rotate(var(--er)); opacity: 0; }
}

.funky-emoji {
   position: absolute;
   z-index: 9999;
   pointer-events: none;
   line-height: 1;
   animation: funkyEmoji var(--dur) ease-out var(--delay) both;
   will-change: transform, opacity;
}


/* ═══════════════════════════════════════════════════
   BOOKING
   ═══════════════════════════════════════════════════ */

.booking {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-lg);
   align-items: start;
}

/* ── Levý sloupec: CTA tlačítka ── */
.booking__cta {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.booking__btn {
   display: flex;
   align-items: center;
   gap: 1.6rem;
   padding: 1.6rem 2rem;
   border: 1px solid rgba(201,166,87,.3);
   text-decoration: none;
   background: rgba(0,0,0,.5);
   transition: border-color .22s ease, background .22s ease;
}

.booking__btn:hover {
   border-color: var(--c-yellow);
   background: rgba(0,0,0,.65);
}

.booking__btn-icon {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
   color: rgba(201,166,87,.5);
   transition: color .22s ease;
}

.booking__btn:hover .booking__btn-icon {
   color: var(--c-yellow);
}

.booking__btn-title {
   display: block;
   font-family: var(--f-display);
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--c-white);
   margin-bottom: .3rem;
}

.booking__btn-sub {
   display: block;
   font-size: 1.2rem;
   color: rgba(255,255,255,.5);
   letter-spacing: .02em;
}

/* ── Pravý sloupec: kontakt ── */
.booking__contact-label {
   font-family: var(--f-display);
   font-size: .8rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--c-yellow);
   margin-bottom: var(--space-sm);
}

.booking__name {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: clamp(2.2rem, 4vw, 3.4rem);
   margin-bottom: var(--space-sm);
   line-height: 1.05;
}

.booking__phone,
.booking__email {
   margin-bottom: .5rem;
}

.booking__phone a,
.booking__email a {
   color: var(--c-yellow);
   font-size: clamp(1.1rem, 1.8vw, 1.45rem);
   text-decoration: none;
   transition: color .2s;
}

.booking__phone a:hover,
.booking__email a:hover {
   color: var(--c-white);
}


/* ═══════════════════════════════════════════════════
   BUTTONS  — organic SVG border
   3 hand-drawn path variants, cycled via :nth-child
   ::before = outline (visible), ::after = fill (on hover)
   z-index: -1 keeps SVG behind text
   ═══════════════════════════════════════════════════ */

.btn {
   display: inline-block;
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   padding: 0.85rem 2rem;
   border: none;
   background: transparent;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   position: relative;
   isolation: isolate;
   transition: color 0.25s ease, transform 0.25s ease;
}

.btn::before,
.btn::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: no-repeat center / 100% 100%;
   transition: opacity 0.25s ease;
   pointer-events: none;
}

.btn::before { opacity: 1; z-index: -1; }  /* outline — always visible */
.btn::after  { opacity: 0; z-index: -2; }  /* fill — behind outline */

/* On hover: fill fades in, outline stays on top */
.btn:hover::after  { opacity: 1; }

/* ── Primary ── */
.btn--primary { color: var(--c-text); }
.btn--primary:hover { color: var(--c-white); transform: translateY(-2px); }

.btn--primary::before,
.btn--outline::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E");
}
.btn--primary::after,
.btn--outline::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23A774FF' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E");
}

/* ── Outline ── */
.btn--outline { color: var(--c-text); }
.btn--outline:hover { color: var(--c-white); }

/* ── Pill — identical to outline ── */
.btn--pill { color: var(--c-text); }
.btn--pill:hover { color: var(--c-white); }
.btn--pill::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E"); }
.btn--pill::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23A774FF' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E"); }

/* ── btn--pill overrides for dark (hudba) section ── */
.section--hudba .btn--pill {
   color: rgba(255, 255, 255, 0.75);
}
.section--hudba .btn--pill:hover {
   color: var(--c-black);
}
/* Golden border — all 3 path variants */
.section--hudba .btn--pill::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23F9C339' stroke-width='2' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E");
}
.section--hudba .btn--pill:nth-child(3n+2)::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23F9C339' stroke-width='2' d='M5,10 C95,5 195,3 294,9 C300,10 303,28 296,53 C215,63 82,60 5,56 C-1,54 -2,30 5,10Z'/%3E%3C/svg%3E");
}
.section--hudba .btn--pill:nth-child(3n)::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23F9C339' stroke-width='2' d='M12,6 C88,1 202,8 289,11 C296,12 299,22 297,54 C213,64 75,61 11,58 C4,56 1,26 12,6Z'/%3E%3C/svg%3E");
}
/* Yellow fill on hover */
.section--hudba .btn--pill::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F9C339' d='M8,8 C90,2 200,5 292,7 C298,8 301,25 298,52 C210,61 80,62 7,56 C1,54 -1,35 8,8Z'/%3E%3C/svg%3E");
}
.section--hudba .btn--pill:nth-child(3n+2)::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F9C339' d='M5,10 C95,5 195,3 294,9 C300,10 303,28 296,53 C215,63 82,60 5,56 C-1,54 -2,30 5,10Z'/%3E%3C/svg%3E");
}
.section--hudba .btn--pill:nth-child(3n)::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F9C339' d='M12,6 C88,1 202,8 289,11 C296,12 299,22 297,54 C213,64 75,61 11,58 C4,56 1,26 12,6Z'/%3E%3C/svg%3E");
}

/* ── Path variant 2 (nth-child 3n+2) ── */
.btn--primary:nth-child(3n+2)::before,
.btn--outline:nth-child(3n+2)::before,
.btn--pill:nth-child(3n+2)::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2' d='M5,10 C95,5 195,3 294,9 C300,10 303,28 296,53 C215,63 82,60 5,56 C-1,54 -2,30 5,10Z'/%3E%3C/svg%3E");
}
.btn:nth-child(3n+2)::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23A774FF' d='M5,10 C95,5 195,3 294,9 C300,10 303,28 296,53 C215,63 82,60 5,56 C-1,54 -2,30 5,10Z'/%3E%3C/svg%3E");
}

/* ── Path variant 3 (nth-child 3n) ── */
.btn--primary:nth-child(3n)::before,
.btn--outline:nth-child(3n)::before,
.btn--pill:nth-child(3n)::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2' d='M12,6 C88,1 202,8 289,11 C296,12 299,22 297,54 C213,64 75,61 11,58 C4,56 1,26 12,6Z'/%3E%3C/svg%3E");
}
.btn:nth-child(3n)::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23A774FF' d='M12,6 C88,1 202,8 289,11 C296,12 299,22 297,54 C213,64 75,61 11,58 C4,56 1,26 12,6Z'/%3E%3C/svg%3E");
}

.btn--block {
   display: block;
   width: 100%;
}

.btn--lg {
   padding: 1.2rem 3rem;
   font-size: 1rem;
}

.btn--lg small {
   display: block;
   font-size: 0.7rem;
   font-weight: 400;
   opacity: 0.7;
   margin-top: 4px;
}


/* ═══════════════════════════════════════════════════
   MODAL SYSTEM
   ═══════════════════════════════════════════════════ */

.modal {
   position: fixed;
   inset: 0;
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.modal--active {
   opacity: 1;
   visibility: visible;
}

.modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(6, 6, 6, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

.modal__container {
   position: relative;
   background: var(--c-white);
   max-width: 640px;
   max-height: 85vh;
   width: 90vw;
   overflow-y: auto;
   padding: var(--space-lg);
   animation: modalSlideUp 0.5s var(--ease-dramatic);
}

.modal__container--lg {
   max-width: 900px;
}

.modal__container--xl {
   max-width: 1100px;
}

.modal__container img {
   width: 100%;
}

@keyframes modalSlideUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.modal__close {
   position: absolute;
   top: var(--space-sm);
   right: var(--space-sm);
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   background: none;
   border: none;
   cursor: pointer;
   color: var(--c-text-soft);
   transition: color 0.3s;
   z-index: 1;
}

.modal__close:hover {
   color: var(--c-black);
}

.modal__title {
   font-family: var(--f-display);
   font-size: 2rem;
   margin-bottom: var(--space-md);
   padding-right: var(--space-lg);
}

.modal__lyrics {
   font-size: 1.25rem;
}

.modal__lyrics p {
   margin-bottom: 1em;
   line-height: 1.45;
}

.tracklist__feat {
   font-style: italic;
   font-size: 0.85em;
   opacity: 0.7;
}


/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */

.footer {
   background: linear-gradient(to bottom, transparent 0%, rgba(6,6,6,0.6) 60%, rgb(6,6,6) 100%);
   color: var(--c-primary);
   padding: var(--space-md) 0;
   font-size: 0.85rem;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 2;
}

.footer__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.footer__inner > span {
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.05em;
   color: var(--c-primary);
}

.footer__socials {
   display: flex;
   gap: var(--space-sm);
}

.footer__socials a {
   color: var(--c-primary);
   font-family: var(--f-display);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.05em;
   text-decoration: none;
   transition: color 0.3s;
}

.footer__socials a:hover {
   color: var(--c-white);
}


/* ═══════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════ */

.reveal {
   opacity: 0;
   transform: translateY(60px);
   transition: opacity var(--duration-slow) var(--ease-dramatic),
               transform var(--duration-slow) var(--ease-dramatic);
}

.reveal--visible {
   opacity: 1;
   transform: translateY(0);
}

/* Staggered children */
.reveal--visible .album:nth-child(1) { transition-delay: 0s; }
.reveal--visible .album:nth-child(2) { transition-delay: 0.15s; }
.reveal--visible .album:nth-child(3) { transition-delay: 0.3s; }

.albums .album {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 0.7s var(--ease-dramatic), transform 0.7s var(--ease-dramatic);
}

.reveal--visible .album {
   opacity: 1;
   transform: translateY(0);
}

/* MTG card stagger — delays defined inline in the KAPELA block above */

/* Hero entrance animation */
.hero__title {
   opacity: 0;
   transform: scale(0.85) translateY(20px);
   animation: heroTitleIn 1.2s var(--ease-dramatic) 0.3s forwards;
}

.hero__scroll {
   opacity: 0;
   animation: heroSubIn 0.8s var(--ease-dramatic) 1.3s forwards;
}

@keyframes heroTitleIn {
   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

@keyframes heroSubIn {
   to { opacity: 1; }
}


/* ═══════════════════════════════════════════════════
   ACCENT DECORATIONS
   ═══════════════════════════════════════════════════ */

/* Color bar accents on section titles — disabled */



/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* MTG Cards — medium view: 3+3+4 via 12-column grid */
@media (max-width: 1100px) and (min-width: 769px) {
   .mtg-grid {
      grid-template-columns: repeat(12, 1fr);
      gap: clamp(6px, 0.9vw, 14px);
   }
   .mtg-grid > .mtg-card:nth-child(-n+6) {
      grid-column: span 4;
   }
   .mtg-grid > .mtg-card:nth-child(n+7) {
      grid-column: span 3;
   }
}

@media (max-width: 768px) {
   :root {
      --space-lg: 3rem;
      --space-xl: 5rem;
   }

   /* Hero — na mobilu text vlevo, kotven dole */
   .hero__content {
      left: 0;
      bottom: clamp(1rem, 4vh, 3rem);
      width: 100%;
      padding: 0 1.25rem;
      text-align: left;
      max-width: 100%;
   }

   /* Nav mobile */
   .nav__toggle {
      display: flex;
   }

   .nav__menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      background: var(--c-black);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      transform: translateX(100%);
      transition: transform 0.5s var(--ease-dramatic);
   }

   .nav__menu--open {
      transform: translateX(0);
   }

   .nav__menu .nav__link {
      color: var(--c-white);
      font-size: 1.5rem;
   }

   /* Toggle X state */
   .nav__toggle--active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
      background: var(--c-white) !important;
   }
   .nav__toggle--active span:nth-child(2) {
      opacity: 0;
   }
   .nav__toggle--active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
      background: var(--c-white) !important;
   }

   /* Bio grid */
   .grid--bio {
      grid-template-columns: 1fr;
   }

   /* Bio photo — výška omezena na mobilu */
   .bio__photo {
      max-height: 70vw;
   }

   /* Albums */
   .albums {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-sm);
   }

   .album-detail {
      grid-template-columns: 1fr;
   }

   .album-detail__cover {
      max-width: 300px;
      margin-inline: auto;
   }

   /* MTG Cards — mobile: 2 per row */
   .mtg-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }
   .mtg-grid > .mtg-card {
      grid-column: span 1;
      font-size: clamp(10px, 3vw, 13px);
   }

   /* Booking */
   .booking {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }

   .booking__btn {
      padding: 1.3rem 1.5rem;
      gap: 1.2rem;
   }

   .booking__btn-icon {
      width: 40px;
      height: 40px;
   }

   /* Funky button section — mobile */
   .btn-funky-layout {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.5rem;
   }

   .btn-funky-arrow {
      display: none;
   }

   .btn-funky-label {
      text-align: center;
   }

   /* Modal */
   .modal__container {
      padding: var(--space-md);
   }
}

@media (max-width: 480px) {
   .hero__title {
      font-size: clamp(2rem, 26vw, 5rem);
   }

   .albums {
      grid-template-columns: 1fr 1fr;
   }

   .nav__logo {
      font-size: 1.1rem;
   }

   .footer__inner {
      flex-direction: column;
      gap: var(--space-sm);
   }
}