/* LESS -> CSS: előre kiszámolt színek (HSL alapú Less műveletek alapján)
   @color-pink: #f6b8cd;
   @color-pink2: #e0a9b5;
   @color-pink-dark:   saturate(@color-pink2, 40%)  => #eb9eaf
   @color-pink-darker: darken(@color-pink2, 20%)    => #cb6f83

   @color-blue: #8ac6e2;
   @color-blue-dark: #35afdc;

   @color-white: #e9ebea;
   darken(@color-white, 10%) => #d0d5d3

   @color-gray: desaturate(darken(@color-blue, 10%), 20%) => #78b4d0
   @color-gray-dark: saturate(darken(@color-gray, 25%), 60%) => #1d9ed9

   body background: saturate(spin(@color-pink, 5), 20%) => #fcb2c5
*/

/* { box-sizing: border-box; margin: 0; padding: 0; }*/

body {
  background: #398bf5;
  font-family: sans-serif;
  /*background-image: repeating-linear-gradient(
    10deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.25) 20px,
    rgba(255, 255, 255, 0.25) 22px
  );*/
    min-height: 100vh;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
  }
}

.pcontainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.swim-pool-container {
  width: 70vw;
  height: 30vh;
  top: 0px;
  border: 15px solid #e9ebea;
  transform: skew(0deg, -5deg) rotate(15deg);
  z-index: 2;
  background-color: #8ac6e2;

  background-image:
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 20px 15px, 20px 15px;
  background-position: -1px -1px, -1px -1px;

  box-shadow:
    3px 5px 0 #d0d5d3 inset,
    15px 30px 0 #35afdc inset,
    2px 3px 0 #1d9ed9;

  position: relative;
}

.swim-pool-container::before {
  content: "";
  position: absolute;
  background: #35afdc;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  mix-blend-mode: multiply;
  clip-path: polygon(0 0, 40% 0, 40% 30px, 10% 100%, 0 100%);
}

.tyre {
  border: 10px solid #e9ebea;
  border-top-color: #eb9eaf;
  border-bottom-color: #eb9eaf;

  width: 60px;
  height: 60px;
  border-radius: 50%;

  transform: scaleY(0.75);
  position: absolute;

  box-shadow: 2px 2px 0 #cb6f83 inset, 2px 2px 0 #35afdc;
  z-index: 99;

  animation: flow 10s ease-in-out infinite forwards;
}

.tyre::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 10%;
  top: 40%;
  opacity: 0.5;
  border: 10px solid #35afdc;
  mix-blend-mode: saturation;
  border-radius: 50%;
  z-index: -1;
}

.tyre1 { left: 50%; top: 50%; }
.tyre2 { left: 70%; top: 30%; animation-delay: 0.5s; }

/* Biztos kompatibilis keyframes (0%/100% formában) */
@keyframes flow {
  0%   { transform: scaleY(0.75) translateX(-20px); }
  50%  { transform: scaleY(0.75) translateX(20px); }
  100% { transform: scaleY(0.75) translateX(-20px); }
}

.stairs {
  z-index: 20;
  top: -5px;
  left: 40px;
  position: absolute;
  width: 30px;
  height: 3px;

  background: #78b4d0;
  box-shadow:
    0 15px 0 #78b4d0,
    0 30px 0 #1d9ed9,
    0 45px 0 #1d9ed9;

  transform: skewX(15deg);
}

.stairs::before,
.stairs::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  width: 3px;
  height: 30px;
  background: #78b4d0;
  box-shadow: 0 30px 0 #1d9ed9;
}

.stairs::after {
  left: auto;
  right: -3px;
}

.stairs > div {
  position: relative;
}

.stairs > div::before,
.stairs > div::after {
  content: "";
  width: 5px;
  height: 15px;
  border: 3px solid #78b4d0;
  position: absolute;
  left: -3px;
  top: -20px;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  transform: skewY(-20deg);
}

.stairs > div::after {
  left: 100%;
}