/* =========================================================
   CAFÉZIA — UNIVERSAL TRANSITION BANNER WIDGET
========================================================= */

.caf-transition-banner {
  --caf-black: #171512;
  --caf-muted: #6f675c;
  --caf-bg: #e2dbce;
  --caf-roast: #b7a997;
  --caf-green: #bbce8e;
  --caf-white: #ffffff;

  --strip-h: 92px;
  --strip-radius: 26px;
  --strip-title-size: 48px;
  --strip-label-size: 11px;
  --strip-image-width: 34%;
  --strip-image-max: 520px;
  --strip-image-opacity: 0.78;
  --strip-bg-position: center center;
  --strip-accent: #bbce8e;
  --strip-progress: 0;
  --strip-dir: 1;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  height: var(--strip-h);
  min-height: var(--strip-h);
  max-height: var(--strip-h);

  display: flex;
  align-items: center;

  background:
    radial-gradient(circle at 12% 50%, rgba(187, 206, 142, 0.20), transparent 30%),
    linear-gradient(90deg, #ffffff 0%, #f8f6f2 46%, #e2dbce 100%);

  border: none;
  border-radius: var(--strip-radius);

  box-shadow:
    0 16px 45px rgba(23, 21, 18, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(183, 169, 151, 0.12);
}

.caf-transition-banner--wellness {
  background:
    radial-gradient(circle at 12% 50%, rgba(187, 206, 142, 0.24), transparent 30%),
    radial-gradient(circle at 78% 45%, rgba(226, 219, 206, 0.58), transparent 34%),
    linear-gradient(90deg, #ffffff 0%, #f8f6f2 48%, #e2dbce 100%);
}

.caf-transition-banner--clean {
  background:
    radial-gradient(circle at 12% 50%, rgba(187, 206, 142, 0.14), transparent 30%),
    linear-gradient(90deg, #ffffff 0%, #fbfaf7 62%, #f2eee6 100%);
}

/* Jemná pohyblivá textúra */
.caf-transition-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;

  background-image:
    linear-gradient(rgba(23, 21, 18, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 21, 18, 0.022) 1px, transparent 1px);

  background-size: 34px 34px;
  opacity: 0.48;

  transform: translateX(calc(var(--strip-progress) * -34px));
  transition: transform 0.08s linear;
}

/* Úzky image pás vpravo */
.caf-transition-banner__image {
  position: absolute;
  top: 10px;
  right: clamp(12px, 3vw, 42px);
  bottom: 10px;

  width: min(var(--strip-image-width), var(--strip-image-max));

  border-radius: 999px;
  overflow: hidden;

  background-image:
    linear-gradient(90deg, rgba(226, 219, 206, 0.92), rgba(226, 219, 206, 0.18)),
    var(--strip-img);

  background-size: cover;
  background-position: var(--strip-bg-position);

  opacity: var(--strip-image-opacity);
  filter: saturate(0.88) contrast(1.02);

  transform:
    translateX(calc(var(--strip-progress) * 36px))
    scale(1.08);

  transition:
    transform 0.08s linear,
    opacity 0.25s ease,
    filter 0.25s ease;

  z-index: -2;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 8px 24px rgba(23, 21, 18, 0.045);
}

/* Biely gradient pre čitateľnosť textu */
.caf-transition-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.90) 50%,
      rgba(255,255,255,0.24) 100%
    );
  pointer-events: none;
}

.caf-transition-banner__inner {
  position: relative;
  z-index: 2;

  width: min(100% - 40px, 1480px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
}

.caf-transition-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--caf-muted);

  font-size: var(--strip-label-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  white-space: nowrap;

  transform: translateX(calc(var(--strip-progress) * -18px));
  opacity: 0.78;
}

.caf-transition-banner__label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--caf-roast);
}

/* Maska textu + fix odseknutých spodkov písmen */
.caf-transition-banner__title-wrap {
  overflow: hidden;
  min-width: 0;

  padding-top: 0.12em;
  padding-bottom: 0.22em;
  margin-top: -0.12em;
  margin-bottom: -0.22em;
}

.caf-transition-banner__title {
  margin: 0;

  color: var(--caf-black);

  font-size: var(--strip-title-size);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.052em;

  white-space: nowrap;

  opacity: 0;
  transform: translateX(calc(var(--strip-dir) * 42px));

  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(.22, .75, .2, 1);
}

.caf-transition-banner.is-visible .caf-transition-banner__title {
  opacity: 1;
  transform: translateX(calc(var(--strip-progress) * -52px));
}

.caf-transition-banner.is-scroll-up.is-visible .caf-transition-banner__title {
  transform: translateX(calc(var(--strip-progress) * 52px));
}

/* Jemná živá linka dole */
.caf-transition-banner__line {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--strip-accent) 75%, transparent),
    rgba(183, 169, 151, 0.55),
    transparent
  );

  transform: translateX(calc(var(--strip-progress) * 12%));
  opacity: 0.42;
}

@supports not (color: color-mix(in srgb, #fff, #000)) {
  .caf-transition-banner__line {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(187, 206, 142, 0.72),
      rgba(183, 169, 151, 0.55),
      transparent
    );
  }
}

.caf-transition-banner:hover .caf-transition-banner__image {
  opacity: calc(var(--strip-image-opacity) + 0.12);
  filter: saturate(0.96) contrast(1.04);
}

/* Tablet */
@media (max-width: 1024px) {
  .caf-transition-banner__inner {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .caf-transition-banner__label {
    letter-spacing: 0.12em;
  }

  .caf-transition-banner__label::before {
    width: 30px;
  }

  .caf-transition-banner__title-wrap {
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .caf-transition-banner__title {
    max-width: 76%;
    line-height: 1.14;
    white-space: normal;
  }

  .caf-transition-banner.is-visible .caf-transition-banner__title {
    transform: translateX(calc(var(--strip-progress) * -28px));
  }

  .caf-transition-banner.is-scroll-up.is-visible .caf-transition-banner__title {
    transform: translateX(calc(var(--strip-progress) * 28px));
  }
}

/* Mobile */
@media (max-width: 767px) {
  .caf-transition-banner__inner {
    width: calc(100% - 24px);
    gap: 6px;
  }

  .caf-transition-banner__label {
    letter-spacing: 0.09em;
    font-weight: 700;
  }

  .caf-transition-banner__label::before {
    width: 24px;
  }

  .caf-transition-banner__title-wrap {
    width: 100%;
    overflow: visible;
  }

  .caf-transition-banner__title {
    max-width: 82%;
    line-height: 1.16;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  .caf-transition-banner--mobile-wrap .caf-transition-banner__title {
    white-space: normal;
  }

  .caf-transition-banner.is-visible .caf-transition-banner__title {
    transform: translateX(calc(var(--strip-progress) * -16px));
  }

  .caf-transition-banner.is-scroll-up.is-visible .caf-transition-banner__title {
    transform: translateX(calc(var(--strip-progress) * 16px));
  }

  .caf-transition-banner__image {
    inset: 9px 9px 9px auto;
  }

  .caf-transition-banner::after {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0.99) 0%,
        rgba(255,255,255,0.95) 66%,
        rgba(255,255,255,0.48) 100%
      );
  }
}

@media (max-width: 390px) {
  .caf-transition-banner__title {
    max-width: 88%;
    line-height: 1.16;
  }

  .caf-transition-banner__image {
    opacity: calc(var(--strip-image-opacity) * 0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .caf-transition-banner,
  .caf-transition-banner *,
  .caf-transition-banner::before {
    transition: none !important;
    transform: none !important;
  }

  .caf-transition-banner__title {
    opacity: 1 !important;
  }
}