/* ---------- Fonty ---------- */
@font-face { font-family: 'GothamBold';      src: url('../fonts/Gotham-Bold.otf') format('opentype');      font-display: swap; }
@font-face { font-family: 'GothamBook';      src: url('../fonts/Gotham-Book.otf') format('opentype');      font-display: swap; }
@font-face { font-family: 'GothamMedium';    src: url('../fonts/Gotham-Medium.otf') format('opentype');    font-display: swap; }
@font-face { font-family: 'RecoletaBold';    src: url('../fonts/Recoleta-Bold.ttf') format('truetype');    font-display: swap; }
@font-face { font-family: 'RecoletaRegular'; src: url('../fonts/Recoleta-Regular.ttf') format('truetype'); font-display: swap; }

/* ---------- Tokeny ---------- */
:root {
  --flex-bg: rgb(32, 25, 17);
  --flex-green: rgb(37, 189, 117);
  --flex-beige: rgb(204, 170, 133);

  --bf-cream: rgb(255, 248, 239);
  --bf-plum: #531a31;
  --bf-plum-light: #9b4c6b;
  --bf-pink: #e65c93;
  --bf-pink-light: #f8c5db;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 600ms;
  --overlap: 12vw;          /* šírka diagonálneho prekrytia na desktope */

  --px: 0;                  /* parallax premenné, nastavuje main.js, rozsah -1..1 */
  --py: 0;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000;
  color: #fff;
  font-family: 'GothamBook', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
img { display: block; max-width: 100%; }

.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;
}

/* ---------- Layout ---------- */
.split {
  position: relative;
  display: flex;
  flex-direction: column;         /* mobil: hore / dole */
  height: 100vh;                  /* fallback */
  height: 100svh;
}

.half {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: flex-basis var(--dur) var(--ease);
}

.half__bg {
  position: absolute;
  inset: -6%;                    /* rezerva pre parallax posun */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* stmavenie nehoverovanej polovice */
.half::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 2;
  pointer-events: none;
}

.half__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 560px;
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .split { flex-direction: row; }

  .half { flex-basis: 50%; }

  /* pravá polovica prekrýva ľavú o --overlap a je orezaná do diagonály */
  .half--beauty {
    margin-left: calc(-1 * var(--overlap));
    clip-path: polygon(var(--overlap) 0, 100% 0, 100% 100%, 0 100%);
  }

  .split[data-active="flex"]   .half--flex   { flex-basis: 62%; }
  .split[data-active="flex"]   .half--beauty { flex-basis: 38%; }
  .split[data-active="beauty"] .half--beauty { flex-basis: 62%; }
  .split[data-active="beauty"] .half--flex   { flex-basis: 38%; }

  .split[data-active="flex"]   .half--beauty::after,
  .split[data-active="beauty"] .half--flex::after { opacity: 1; }

}

/* ---------- Pozadia ---------- */
.half--flex .half__bg {
  background-color: var(--flex-bg);
  background-image:
    linear-gradient(180deg, rgba(32, 25, 17, 0.55) 0%, rgba(32, 25, 17, 0.9) 100%),
    url('../img/flex-bg.png');
  background-position: 65% center, 65% center;
}

.half--beauty .half__bg {
  background-color: var(--bf-plum);
  background-image:
    radial-gradient(60% 55% at 50% 42%, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0) 70%),
    linear-gradient(160deg, var(--bf-plum-light) 0%, var(--bf-plum) 55%, #2f0d1c 100%);
}

/* ---------- Produkty ---------- */
.half__product {
  width: clamp(130px, 30vw, 180px);
  height: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45));
  transition: transform 900ms var(--ease);
}
.half--beauty .half__product { width: clamp(200px, 48vw, 300px); }

/* ---------- Typografia ---------- */
.half__title {
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.half--flex .half__title   { font-family: 'GothamBold', system-ui, sans-serif; color: #fff; }
.half--beauty .half__title { font-family: 'RecoletaBold', Georgia, serif; color: var(--bf-cream); letter-spacing: 0; }

.half__subtitle {
  font-family: 'GothamBook', system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  line-height: 1.4;
  max-width: 30ch;
}
.half--flex .half__subtitle   { color: var(--flex-beige); }
.half--beauty .half__subtitle { color: var(--bf-pink-light); font-family: 'RecoletaRegular', Georgia, serif; font-size: clamp(1.05rem, 2.6vw, 1.3rem); }

/* ---------- Tlačidlá ---------- */
.half__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.5rem;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-family: 'GothamBold', system-ui, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  transition: filter 300ms ease, transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.half--flex .half__button   { background: var(--flex-green); box-shadow: 0 10px 30px rgba(37, 189, 117, 0.35); }
.half--beauty .half__button { background: var(--bf-pink);    box-shadow: 0 10px 30px rgba(230, 92, 147, 0.4); }

.half__arrow { display: inline-block; transition: transform 300ms var(--ease); }

@media (min-width: 900px) {
  .half__product { width: clamp(220px, 20vw, 320px); }
  .half--beauty .half__product { width: clamp(320px, 30vw, 480px); }
  .half__title { font-size: clamp(3.5rem, 6.5vw, 6.5rem); }
  .half__subtitle { font-size: 1.2rem; }
  .half--beauty .half__subtitle { font-size: 1.4rem; }
  .half__button { font-size: 1rem; margin-top: 1rem; }
  .half__content { gap: 1rem; padding: 3rem; }
}

/* nízke mobily – menší produkt, aby sa všetko zmestilo do 50svh */
@media (max-width: 899px) and (max-height: 700px) {
  .half__product { width: 110px; }
  .half--beauty .half__product { width: 170px; }
  .half__content { gap: 0.4rem; }
}


/* ---------- Animácie ---------- */
@keyframes in-from-top    { from { opacity: 0; transform: translateY(-8%); } to { opacity: 1; transform: none; } }
@keyframes in-from-bottom { from { opacity: 0; transform: translateY(8%);  } to { opacity: 1; transform: none; } }
@keyframes in-from-left   { from { opacity: 0; transform: translateX(-8%); } to { opacity: 1; transform: none; } }
@keyframes in-from-right  { from { opacity: 0; transform: translateX(8%);  } to { opacity: 1; transform: none; } }
@keyframes arrow-nudge    { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@media (prefers-reduced-motion: no-preference) {
  .half--flex   { animation: in-from-top 700ms var(--ease) both; }
  .half--beauty { animation: in-from-bottom 700ms var(--ease) both; }

  /* mobil: šípka pulzuje, dotyk jemne zmenší obsah */
  .half__arrow { animation: arrow-nudge 1.6s ease-in-out infinite; }
  .half__content { transition: transform 150ms var(--ease); }
  .half:active .half__content { transform: scale(0.98); }

  @media (min-width: 900px) {
    .half--flex   { animation-name: in-from-left; }
    .half--beauty { animation-name: in-from-right; }

    .half__arrow { animation: none; }
    .half:active .half__content { transform: none; }

    /* parallax pozadia a produktu podľa --px/--py z main.js */
    .half__bg {
      transform: translate(calc(var(--px) * 12px), calc(var(--py) * 12px));
      transition: transform 900ms var(--ease);
    }
    .split[data-active="flex"]   .half--flex   .half__bg,
    .split[data-active="beauty"] .half--beauty .half__bg {
      transform: translate(calc(var(--px) * 12px), calc(var(--py) * 12px)) scale(1.05);
    }

    .split[data-active="flex"] .half--flex .half__product {
      transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px)) scale(1.06) rotate(-2deg);
    }
    .split[data-active="beauty"] .half--beauty .half__product {
      transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px)) scale(1.06) rotate(2deg);
    }

    .split[data-active="flex"]   .half--flex   .half__button,
    .split[data-active="beauty"] .half--beauty .half__button { filter: brightness(1.15); transform: translateY(-2px); }
    .split[data-active="flex"]   .half--flex   .half__arrow,
    .split[data-active="beauty"] .half--beauty .half__arrow { transform: translateX(4px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Zarovnanie tlačidiel na jednu úroveň ---------- */
/* Obrázok, nadpis aj podtitul majú pevnú výšku, takže tlačidlá oboch polovíc
   sú vždy v rovnakej výške bez ohľadu na dĺžku textu. */
.half__media {
  height: 20svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.half__media .half__product { max-height: 100%; width: auto; max-width: 90%; object-fit: contain; }
.half--beauty .half__media .half__product { max-height: 100%; }
.half__title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.half__subtitle { min-height: 1.4em; }

@media (min-width: 900px) {
  .half__media { height: 38vh; }
  .half__title { min-height: calc(2 * 0.95em); }   /* rezerva na dvojriadkový nadpis */
  .half__content { padding-top: 0; padding-bottom: 0; }
}

/* ---------- Hover fallback bez JS (CSS :has) ---------- */
@media (min-width: 900px) and (hover: hover) {
  .split:has(.half--flex:hover)   .half--flex   { flex-basis: 62%; }
  .split:has(.half--flex:hover)   .half--beauty { flex-basis: 38%; }
  .split:has(.half--beauty:hover) .half--beauty { flex-basis: 62%; }
  .split:has(.half--beauty:hover) .half--flex   { flex-basis: 38%; }
  .split:has(.half--flex:hover)   .half--beauty::after,
  .split:has(.half--beauty:hover) .half--flex::after { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .half:hover .half__bg { transform: translate(calc(var(--px) * 12px), calc(var(--py) * 12px)) scale(1.05); }
    .half--flex:hover   .half__product { transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px)) scale(1.06) rotate(-2deg); }
    .half--beauty:hover .half__product { transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px)) scale(1.06) rotate(2deg); }
    .half:hover .half__button { filter: brightness(1.15); transform: translateY(-2px); }
    .half:hover .half__arrow  { transform: translateX(4px); }
  }
}

/* ---------- Flex dočasne vypredaný ---------- */
.half--soldout { cursor: default; }
.half--soldout .half__product { filter: grayscale(0.7) brightness(0.8) drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45)); }
.half--soldout .half__title { color: rgba(255, 255, 255, 0.72); }

.half__badge {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--flex-beige);
  color: var(--flex-beige);
  font-family: 'GothamBold', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.half__subtitle--soldout {
  color: #fff;
  max-width: 34ch;
  min-height: 0;
  font-size: clamp(0.9rem, 2.3vw, 1.05rem);
}
.half__inline-link { color: var(--bf-pink-light); text-decoration: underline; text-underline-offset: 3px; }
.half__inline-link:hover { color: #fff; }

.half--soldout .half__button--ghost {
  background: transparent;
  border: 2px solid var(--bf-pink);
  color: #fff;
  box-shadow: none;
  text-decoration: none;
}
.half--soldout .half__button--ghost:hover { background: var(--bf-pink); filter: none; transform: translateY(-2px); }

/* vypredaná polovica sa pri hoveri nerozťahuje ani neanimuje */
@media (min-width: 900px) {
  .split[data-active="flex"] .half--flex,
  .split:has(.half--soldout:hover) .half--flex { flex-basis: 50%; }
  .split[data-active="flex"] .half--beauty,
  .split:has(.half--soldout:hover) .half--beauty { flex-basis: 50%; }
  .split[data-active="flex"] .half--beauty::after,
  .split:has(.half--soldout:hover) .half--beauty::after { opacity: 0; }
  .half--soldout .half__bg,
  .half--soldout:hover .half__bg,
  .split[data-active="flex"] .half--soldout .half__bg { transform: none !important; }
  .half--soldout .half__product,
  .half--soldout:hover .half__product,
  .split[data-active="flex"] .half--soldout .half__product { transform: none !important; }
  .half--soldout .half__subtitle--soldout { font-size: 1.05rem; }
  .half--soldout .half__media { height: 30vh; }
}

/* mobil: vypredaná polovica potrebuje viac miesta na text */
@media (max-width: 899px) {
  .half--soldout { flex-basis: 56%; }
  .split:has(.half--soldout) .half--beauty { flex-basis: 44%; }
  .half--soldout .half__media { height: 14svh; }
  .split:has(.half--soldout) .half--beauty .half__media { height: 16svh; }
  .half__content { padding: 1rem 1.5rem; gap: 0.6rem; }
  .half__badge { font-size: 0.65rem; }
  .half__subtitle--soldout { font-size: 0.85rem; line-height: 1.35; }
}