/* Apple Liquid Glass v1.5 – transparent / black / orange / sharp */

:root {
  --alg-orange: #f86e4e;
  --alg-border: rgba(255, 255, 255, 0.55);
  --alg-shadow: rgba(0, 0, 0, 0.45);
  --alg-shadow-hover: rgba(0, 0, 0, 0.75);
}

/* ===================================================================== */
/*                       1. BASE: PURE LIQUID GLASS                      */
/* ===================================================================== */

.apple-liquid-glass-container {
  position: relative;
  isolation: isolate;

  border-radius: 1.5rem;
  padding: 0px;

  /* czyste szkło – minimalna biel, bez pomarańczu */
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);

  border: 1px solid var(--alg-border);
  box-shadow: 0 16px 36px -22px var(--alg-shadow);

  color: #ffffff;
  overflow: hidden;

  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out,
    border-color 0.25s ease-out,
    background 0.25s ease-out;
}

/* Ładne osadzenie w TT4 */
.apple-liquid-glass-container.alignwide,
.apple-liquid-glass-container.alignfull,
.apple-liquid-glass-container {
  max-width: 960px;
  margin-inline: auto;
}

/* Mobile – pełna szerokość, mniejsze pady */
@media (max-width: 600px) {
  .apple-liquid-glass-container {
    max-width: 100%;
    margin-inline: 0;
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
  }
}

/* Hover – lekkie uniesienie na desktopie */
@media (hover: hover) and (pointer: fine) {
  .apple-liquid-glass-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px -32px var(--alg-shadow-hover);
    border-color: rgba(255, 255, 255, 0.7);
  }
}

/* ===================================================================== */
/*                    2. SHINE – subtelny, dla wszystkich                 */
/* ===================================================================== */

/* BARDZO delikatny pasek white gloss, wspólny dla wszystkich wariantów */
.apple-liquid-glass-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 44%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.0) 56%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background-size: 260% 260%;
  background-position: -220% 0;

  transition: background-position 1.4s ease-out;
}

/* RUCH SHINE – jawnie dla wszystkich wariantów */
@media (hover: hover) and (pointer: fine) {
  .apple-liquid-glass-container:hover::before,
  .apple-liquid-glass-container.apple-liquid-glass--black:hover::before,
  .apple-liquid-glass-container.apple-liquid-glass--orange:hover::before,
  .apple-liquid-glass-container.apple-liquid-glass--sharp:hover::before {
    background-position: 220% 0;
  }
}

/* Górny highlight szkła – delikatniejszy */
.apple-liquid-glass-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 42%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Treść ponad efektami */
.apple-liquid-glass-container > * {
  position: relative;
  z-index: 2;
}

/* ===================================================================== */
/*                     3. LINKI – delikatny apple underline              */
/* ===================================================================== */

.apple-liquid-glass-container a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
}

.apple-liquid-glass-container a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.2));
  opacity: 0.55;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.apple-liquid-glass-container a:hover::after,
.apple-liquid-glass-container a:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ===================================================================== */
/*                  4. BLACK VARIANT — 50% OPACITY                       */
/* ===================================================================== */

.apple-liquid-glass-container.apple-liquid-glass--black {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

@media (hover:hover) and (pointer:fine) {
  .apple-liquid-glass-container.apple-liquid-glass--black:hover {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* Shine na czarnym – trochę mocniejszy, ale nadal subtelny */
.apple-liquid-glass-container.apple-liquid-glass--black::before {
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 44%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.0) 56%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* ===================================================================== */
/*              5. ORANGE VARIANT — AZGO, opacity ~20%                   */
/* ===================================================================== */

.apple-liquid-glass-container.apple-liquid-glass--orange {
  background: rgba(248, 110, 78, 0.2); /* 20% */
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  color: #111;
  border-color: rgba(255, 255, 255, 0.85); /* 🔥 ramka jaką lubisz */
}

@media (hover:hover) and (pointer:fine) {
  .apple-liquid-glass-container.apple-liquid-glass--orange:hover {
    background: rgba(248, 110, 78, 0.25);
  }
}

/* Shine na pomarańczowym – jaśniejszy pasek, ale wciąż subtelny */
.apple-liquid-glass-container.apple-liquid-glass--orange::before {
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 44%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.0) 56%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

.apple-liquid-glass-container.apple-liquid-glass--orange::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0) 44%
  );
}

.apple-liquid-glass-container.apple-liquid-glass--orange a {
  color: #111;
}

.apple-liquid-glass-container.apple-liquid-glass--orange a::after {
  background: linear-gradient(to right, #111111, rgba(17, 17, 17, 0.2));
}

/* ===================================================================== */
/*           6. SHARP GLASS VARIANT — dużo mniejszy blur                  */
/* ===================================================================== */
/* Użycie: apple-liquid-glass-container apple-liquid-glass--sharp
   Możesz łączyć z black/orange, np.:
   apple-liquid-glass-container apple-liquid-glass--orange apple-liquid-glass--sharp
*/

.apple-liquid-glass-container.apple-liquid-glass--sharp {
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
}

/* ===================================================================== */
/*                      7. Motion / accessibility                         */
/* ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .apple-liquid-glass-container,
  .apple-liquid-glass-container::before,
  .apple-liquid-glass-container::after {
    transition: none !important;
  }
}