/* CSS: PADE Premium Liquid Glass – ohne Scrollhöhe, fixed/parallax Look */

.pade-glass-section {
  min-height: auto;
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
}

.pade-glass-sticky {
  position: relative;
  top: auto;
  min-height: auto;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 clamp(20px, 5vw, 80px);
}

/* GLASS BODY */

.pade-glass-card {
  position: relative;
  width: min(92vw, 1120px);
  aspect-ratio: 736.84 / 186.06;
  overflow: hidden;
  isolation: isolate;

  -webkit-mask-image: var(--pade-mask);
  mask-image: var(--pade-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  backdrop-filter:
    blur(7px)
    saturate(1.45)
    contrast(1.02)
    brightness(1.04);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(1.45)
    contrast(1.02)
    brightness(1.04);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.015) 42%,
      rgba(255,255,255,0.08) 68%,
      rgba(255,255,255,0.015)
    ),
    radial-gradient(
      circle at 20% 0%,
      rgba(255,255,255,0.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 80% 120%,
      rgba(210,235,255,0.10),
      transparent 45%
    );

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.32),
    inset 0 -1px 2px rgba(0,0,0,0.08),
    0 0 10px rgba(255,255,255,0.04);
}

/* GROSSER GLAS FLOW */

.pade-glass-card::before {
  content: "";
  position: absolute;
  inset: -70%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.52) 0 8%,
      transparent 21%
    ),
    radial-gradient(
      circle,
      rgba(200,230,255,0.36) 0 11%,
      transparent 25%
    ),
    radial-gradient(
      circle,
      rgba(255,255,255,0.28) 0 8%,
      transparent 22%
    );

  background-size:
    34% 40%,
    44% 54%,
    30% 38%;

  background-position:
    8% 18%,
    72% 42%,
    38% 82%;

  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.95;

  animation: padeLiquid 9s ease-in-out infinite alternate;
}

.pade-glass-card::after {
  display: none;
}

/* LIQUID BLOBS */

.pade-liquid {
  position: absolute;
  border-radius: 999px;
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0.68;
}

.pade-liquid-1 {
  width: 40%;
  height: 155%;
  left: -2%;
  top: -45%;
  background: rgba(255,255,255,0.26);
  animation: padeMove1 7.5s ease-in-out infinite alternate;
}

.pade-liquid-2 {
  width: 42%;
  height: 165%;
  left: 36%;
  top: 2%;
  background: rgba(210,235,255,0.24);
  animation: padeMove2 8.8s ease-in-out infinite alternate;
}

.pade-liquid-3 {
  width: 34%;
  height: 135%;
  left: 70%;
  top: -28%;
  background: rgba(255,255,255,0.20);
  animation: padeMove3 8.2s ease-in-out infinite alternate;
}

/* SVG */

.pade-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* STROKES */

.pade-logo path {
  fill: transparent;
  stroke: rgba(255,255,255,0.88);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,0.24))
    drop-shadow(0 -1px 1px rgba(0,0,0,0.12))
    drop-shadow(0 0 5px rgba(255,255,255,0.08));
}

/* ANIMATIONS */

@keyframes padeLiquid {
  from {
    transform:
      translate(-14%, -7%)
      rotate(0deg)
      scale(1);
  }

  to {
    transform:
      translate(18%, 10%)
      rotate(14deg)
      scale(1.22);
  }
}

@keyframes padeMove1 {
  from {
    transform:
      translate(-22%, -10%)
      scale(1);
  }

  to {
    transform:
      translate(34%, 16%)
      scale(1.34);
  }
}

@keyframes padeMove2 {
  from {
    transform:
      translate(16%, 20%)
      scale(1.16);
  }

  to {
    transform:
      translate(-30%, -18%)
      scale(0.9);
  }
}

@keyframes padeMove3 {
  from {
    transform:
      translate(18%, -20%)
      scale(0.96);
  }

  to {
    transform:
      translate(-36%, 26%)
      scale(1.38);
  }
}

/* TABLET */

@media (max-width: 768px) {
  .pade-glass-section {
    padding: 72px 0;
  }

  .pade-glass-sticky {
    min-height: auto;
    padding: 0 16px;
  }

  .pade-glass-card {
    width: 97vw;

    backdrop-filter:
      blur(6px)
      saturate(1.35)
      contrast(1.02);

    -webkit-backdrop-filter:
      blur(6px)
      saturate(1.35)
      contrast(1.02);
  }

  .pade-logo path {
    stroke-width: 1.95;
  }
}

/* MOBILE */

@media (max-width: 480px) {
  .pade-glass-section {
    padding: 56px 0;
  }
}