:root{
  --bg: #000;
  --panel: #0f0f0f;
  --border: #1f1f1f;
  --text2: #a7a7a7;
  --max: 1100px;
}

body{
  font-family: Geist, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
}
a{
  text-decoration: none;
}
#poslouchat{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
#poslouchat:hover{
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* úzký obsah */
.container-xl{
  max-width: var(--max);
  padding-left: 20px;
  padding-right: 20px;
}
/* navbar */
.site-nav{
  height: clamp(56px, 8vw, 72px);
  position: relative;
  overflow: visible; /* dovol logo aby přesahovalo bez zvětšení navbaru */
}
.mailtome{
text-decoration: none;
color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity)) !important;;
}

.brand{
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 0;
  display: flex;
  align-items: center;
}

.nav-spacer{
  width: 110px; /* vyvažuje ikonky vpravo, aby logo sedělo doprostřed */
}

.icon-link{
  color: #fff;
  opacity: .85;
  font-size: 1.15rem;
  text-decoration: none;
}
.icon-link:hover{ opacity: 1; }

/* spacing */
.section-pad{
  padding: 56px 0;
}

/* hero typografie */
.kicker{
  color: var(--text2);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}

.display-title{
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Hero layout: tlačítko pod coverem na mobilech */
.hero-grid{
  display: grid;
  gap: 22px;
  align-items: end;
  grid-template-columns: 1fr;
  grid-template-areas:
    "text"
    "cover"
    "cta";
}

.hero-text{ grid-area: text; }
.hero-cover{ grid-area: cover; }
.hero-cover-link{
  display: block;
  color: inherit;
}
.hero-cta{
  grid-area: cta;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  font-size: .85rem;
  line-height: 1.2;
}

@media (min-width: 992px){
  .hero-grid{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas:
      "text cover"
      "cta cover";
    column-gap: 32px;
  }
  .hero-cta{
    justify-self: start;
  }
}

/* cover */
.cover{
  border: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
}
.cover img{
  width: 100%;
  height: auto;
  display: block;
}

/* featured release panel */
.release{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0b0b0b, #070707);
}

/* platform buttons */
.platform{
  display: block;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: .85rem;
}
.platform:hover{
  background: #fff;
  color: #000;
}

/* contact card + inputs */
.card-dark{
  border: 1px solid var(--border);
  background: var(--panel);
}

.contact-form-wide{
  width: 100%;
}

.input-dark{
  background: #0b0b0b !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.input-dark:focus{
  box-shadow: none !important;
  border-color: #3a3a3a !important;
}

/* form modal */
.form-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.7);
  z-index: 2000;
}
.form-modal.is-open{ display: flex; }
.form-modal__panel{
  width: min(520px, 92vw);
  background: #0b0b0b;
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  padding: 20px 22px;
}
.form-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.form-modal__title{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.form-modal__close{
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
}
.form-modal__msg{
  margin: 0 0 10px;
  color: #eaeaea;
}
.form-modal__hint{
  color: var(--text2);
  font-size: .9rem;
}
.form-modal[data-kind="success"] .form-modal__panel{
  border-color: var(--border);
}
.form-modal[data-kind="error"] .form-modal__panel{
  border-color: #3a1f1f;
}

/* honeypot field (antispam) */
.hp-field{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* cookie bar */
.cookiebar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.92);
  border-top: 1px solid var(--border);
  z-index: 1200;
}
.cookiebar.is-hidden{ display:none; }
.cookiebar__actions{
  width: 100%;
  justify-content: flex-end;
}
@media (min-width: 768px){
  .cookiebar__actions{
    width: auto;
    margin-left: auto;
  }
}

/* =========================
   Highlight sekce (text + cover)
   ========================= */

.highlight{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0b0b0b, #070707);
}

.highlight-grid{
  display: grid;
  gap: 22px;
  align-items: center;
  grid-template-columns: 1fr;
  grid-template-areas:
    "text"
    "cover"
    "cta";
}

.highlight-text{
  grid-area: text;
}

.highlight-cover-link{
  grid-area: cover;
  display: block;
  color: inherit;
}

.highlight-cover{
  border: 1px solid var(--border);
  background: #0b0b0b;
  overflow: hidden;
}

.highlight-cover img{
  width: 100%;
  height: auto;
  display: block;
}

.highlight-cta{
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: .85rem;
}
.highlight-cta:hover{
  background: #fff;
  color: #000;
}

@media (min-width: 992px){
  .highlight-grid{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas:
      "text cover"
      "cta cover";
    column-gap: 28px;
  }
  .highlight-cta{
    justify-self: start;
  }
}

/* Credits pěkně, čitelně */
.credits{
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.credits__label{
  display: inline-block;
  min-width: 72px; /* aby se “Lyrics:” a “Music:” zarovnaly */
  color: rgba(255,255,255,.75);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
}


/* jemná dynamika bez “pumpování” – jen hover na desktopu */
@media (hover: hover) and (pointer: fine){
  .highlight-cover{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .highlight-cover:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 55px rgba(0,0,0,.55);
  }
}

/* Prolnuté pozadí hlavní stránky */
.home-page{
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.home-page header,
.home-page main,
.home-page footer{
  position: relative;
  z-index: 1;
}

.home-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-bg__layer{
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(1.6) contrast(1.1);
  transform: scale(1.2);
  transition: opacity .2s linear;
  opacity: 0;
}

.home-bg__layer--hero{
  background-image: var(--home-hero-bg);
  opacity: var(--home-hero-opacity, 1);
}

.home-bg__layer--highlight{
  background-image: var(--home-highlight-bg);
  opacity: var(--home-highlight-opacity, 0);
}

.home-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.9) 70%);
}

/* iOS glass styling pro hlavní stránku */
.home-page header{
  background: rgba(8,10,14,.35) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px) saturate(1.1);
}
.home-page .site-nav{
  background: transparent;
}
.home-page .cover,
.home-page .highlight,
.home-page .highlight-cover,
.home-page .platform,
.home-page .card-dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(12,14,20,.55);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

.home-page .cover,
.home-page .highlight,
.home-page .highlight-cover,
.home-page .card-dark{
  border-radius: 20px;
}

.home-page .highlight{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.45));
}

.home-page .platform{
  border-radius: 8px;
}
.home-page .platform:hover{
  background: rgba(255,255,255,.18);
  color: #fff;
}

.home-page .highlight-cta{
  border-radius: 8px;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}
.home-page .highlight-cta:hover{
  background: rgba(255,255,255,.2);
  color: #fff;
}

.home-page .input-dark{
  background: rgba(12,14,20,.5) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.home-page .cookiebar{
  background: rgba(8,10,14,.72);
  border-top-color: rgba(255,255,255,.12);
  backdrop-filter: blur(16px) saturate(1.1);
}


@media (max-width: 500px){
  .nav-spacer{ width: 0; } 
    .container-xl{
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 768px){
  .container-xl{
    padding-left: 0.75rem;  /* 12px */
    padding-right: 0.75rem; /* 12px */
  }
}

/* Start LOADER*/
.loader{
  position: fixed;
  inset: 0;
  background: #000;
  display: grid;
  place-items: center;
  z-index: 2000;
  transition: opacity .35s ease, visibility .35s ease;
}

.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

.loader__inner{
  display: grid;
  gap: 12px;
  justify-items: center;
}

.loader__spinner{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.9);
  animation: spin 0.9s linear infinite;
}

.loader__text{
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/*Postupné naskakování sekcí*/
.reveal{
  opacity: 0;
  transform: translateY(12px);
}

.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}

/* Respect pro lidi co nemají rádi animace */
@media (prefers-reduced-motion: reduce){
  .loader__spinner{ animation: none; }
  .reveal, .reveal.is-in{ transition: none; transform: none; opacity: 1; }
}

/* End LOADER*/

/* Start Cover animation */

.cover img{
  transform-origin: center;
  animation: cover-pulse 3.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes cover-pulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); } 
}

/* Kdo nechce animace, tomu ji vypneme */
@media (prefers-reduced-motion: reduce){
  .cover img{ animation: none; }
}

/* End Cover animation */

/* Release page */
.release-page{
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.release-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(2.1) contrast(1.15);
  transform: scale(1.45);
  opacity: .8;
  pointer-events: none;
}

.release-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.32), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,.4), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.88) 70%);
}

/* obsah nad bg */
.release-page header,
.release-page main,
.release-page footer{
  position: relative;
  z-index: 1;
}

.release-page header{
  background: rgba(10,10,12,.45) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) saturate(1.1);
}

.release-page .site-nav{
  background: transparent;
}

.release-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16,16,20,.55);
  backdrop-filter: blur(14px) saturate(1.05);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

.release-card--player{
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Credits jako 2 sloupce: LABEL | TEXT */
.credits > div{
  display: grid;
  grid-template-columns: 90px 1fr; /* šířka labelu */
  column-gap: 16px;
  align-items: start;
}

/* label už nemusí min-width */
.credits__label{
  min-width: 0;
  display: block;
}

.btn-stream{
  background: rgba(0,0,0,.20);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}

.btn-stream:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* Release pages: stream links */
.release-page .stream-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(18,18,24,.45);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.release-page .stream-link:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Release detail text stays left-aligned (buttons keep centered) */
.release-details{
  text-align: left;
}

.release-details .lead{
  max-width: 620px;
  margin-left: 0;
  margin-right: 0;
}

.release-details .credits{
  text-align: left;
}


.release-page footer{
  background: rgba(8,8,10,.45);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(1.1);
}

/* Stream button text: keep it clean and neutral */
.release-page .stream-link__title{
  font-weight: 400;
  letter-spacing: 0;
}


/* Brand akcenty */

/* BUTTONS */
.btn-spotify{ --accent: #1DB954; }
.btn-apple{ --accent: #ffffff; }    
.btn-youtube{ --accent: #FF0000; }
.btn-soundcloud{ --accent: #FF5500; }
.btn-deezer{--accent: #8000ff;}

.btn-spotify, .btn-apple, .btn-youtube, .btn-soundcloud, .btn-deezer{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18));
}

.btn-spotify:hover,
.btn-apple:hover,
.btn-youtube:hover,
.btn-soundcloud:hover{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}


/* iOS-like release player */
.player{
  --progress: 0%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
  backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,.3);
}

.player__art{
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

.player__art img{
  width: 100%;
  height: auto;
  display: block;
}

.player__glass{
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(25,28,35,.5), rgba(12,14,20,.45));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
}

.player__meta{
  min-width: 0;
  color: rgba(255,255,255,.95);
}

.player__track{
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.player__artist{
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
}

/* Timeline row: current | seek | remaining */
.player__timeline{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 88%;
  margin: 16px auto 0;
}

.player__current,
.player__remaining{
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
  min-width: 44px;
}

.player__remaining{
  text-align: right;
}

.player__btn{
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
  color: transparent;
  font-size: 0;
  margin: 2px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  --play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 5.8c0-.9.9-1.4 1.6-1l10.3 6c.7.4.7 1.5 0 1.9l-10.3 6c-.7.4-1.6-.1-1.6-1V5.8z'/%3E%3C/svg%3E");
  --stop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3C/svg%3E");
}

.player__btn::before{
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask-image: var(--play-icon);
  mask-image: var(--play-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 52% 50%;
  mask-position: 52% 50%;
  transform: translateX(1px);
}

.player__btn[data-state="stop"]::before{
  -webkit-mask-image: var(--stop-icon);
  mask-image: var(--stop-icon);
  -webkit-mask-position: center;
  mask-position: center;
  transform: none;
}

.player__btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

.player__seek{
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0 var(--progress), rgba(255,255,255,.25) var(--progress) 100%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  cursor: pointer;
  margin: 0;
}

.player__seek::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

.player__seek::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

/* Mobile */
@media (max-width: 575px){
  .player{
    padding: 12px;
    border-radius: 24px;
  }
  .player__glass{
    padding: 14px;
  }
  .player__timeline{
    width: 92%;
    margin-top: 14px;
  }
  .player__btn{
    width: 52px;
    height: 52px;
  }
}

#logo{
  height: clamp(80px, 12vw, 160px);
  width: auto;
  max-width: none;
  display: block;
  transform: translateY(6px);
}

@media (max-width: 575px){
  #logo{
    height: clamp(120px, 22vw, 220px);
    transform: translateY(8px);
  }
}