.page-inflables {
  --paper: #f4fae7;
  --violet: #88409b;
  --coral: #ee7182;
}

.page-inflables .hero::before {
  inset: 82px 0 auto !important;
  height: min(28vh, 250px) !important;
  background: url("../images/decor/inflables-top.svg") top center / 100% 100% no-repeat !important;
  opacity: .66 !important;
  animation: theme-top-float 6.2s ease-in-out infinite !important;
}

.page-inflables .hero {
  min-height: 100vh;
  padding-bottom: 38px;
  background:
    radial-gradient(circle at 8% 18%, rgba(246, 200, 95, .38) 0 120px, transparent 122px),
    radial-gradient(circle at 82% 20%, rgba(114, 209, 208, .28) 0 150px, transparent 152px),
    linear-gradient(180deg, #edfafa 0%, #fff1c9 56%, #f4fae7 100%);
}

.page-inflables .hero::before {
  inset: 0 0 auto;
  height: min(30vh, 260px);
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(136, 64, 155, .2) 49% 54%, transparent 55%) 8% 28% / 130px 110px no-repeat,
    linear-gradient(180deg, transparent 0 48%, rgba(238, 113, 130, .22) 49% 54%, transparent 55%) 44% 23% / 150px 120px no-repeat,
    linear-gradient(180deg, transparent 0 48%, rgba(114, 209, 208, .2) 49% 54%, transparent 55%) 78% 30% / 130px 110px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(136, 64, 155, .58) 0 50%, transparent 0) 7% 24% / 52px 52px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(168, 204, 69, .58) 0 50%, transparent 0) 19% 24% / 52px 52px no-repeat,
    linear-gradient(180deg, rgba(168, 204, 69, .5), rgba(168, 204, 69, .2)) 7% 52% / 52px 72px no-repeat,
    linear-gradient(180deg, rgba(136, 64, 155, .48), rgba(136, 64, 155, .18)) 19% 52% / 52px 72px no-repeat,
    radial-gradient(90px 46px at 50% 100%, rgba(238, 113, 130, .38) 0 98%, transparent 100%) 11% 54% / 130px 70px no-repeat,
    linear-gradient(180deg, rgba(246, 200, 95, .34), rgba(246, 200, 95, .16)) 13% 68% / 120px 46px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(238, 113, 130, .58) 0 50%, transparent 0) 43% 20% / 58px 58px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(114, 209, 208, .58) 0 50%, transparent 0) 57% 20% / 58px 58px no-repeat,
    linear-gradient(180deg, rgba(238, 113, 130, .48), rgba(238, 113, 130, .18)) 43% 52% / 58px 78px no-repeat,
    linear-gradient(180deg, rgba(114, 209, 208, .46), rgba(114, 209, 208, .18)) 57% 52% / 58px 78px no-repeat,
    radial-gradient(104px 52px at 50% 100%, rgba(168, 204, 69, .36) 0 98%, transparent 100%) 47% 56% / 145px 78px no-repeat,
    linear-gradient(180deg, rgba(136, 64, 155, .24), rgba(136, 64, 155, .1)) 49% 72% / 128px 42px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(246, 200, 95, .62) 0 50%, transparent 0) 77% 25% / 52px 52px no-repeat,
    conic-gradient(from 45deg at 50% 16%, transparent 0 25%, rgba(136, 64, 155, .5) 0 50%, transparent 0) 88% 25% / 52px 52px no-repeat,
    linear-gradient(180deg, rgba(246, 200, 95, .46), rgba(246, 200, 95, .18)) 77% 53% / 52px 72px no-repeat,
    linear-gradient(180deg, rgba(136, 64, 155, .42), rgba(136, 64, 155, .16)) 88% 53% / 52px 72px no-repeat,
    radial-gradient(88px 46px at 50% 100%, rgba(114, 209, 208, .32) 0 98%, transparent 100%) 80% 56% / 128px 70px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .62), transparent 72%);
  opacity: .9;
  animation: inflatable-top-bounce 5.4s ease-in-out infinite;
}

.page-inflables .hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7%;
  z-index: -1;
  width: min(980px, 96vw);
  height: 260px;
  border-radius: 120px 120px 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 74%, rgba(168, 204, 69, .74) 0 54px, transparent 56px),
    radial-gradient(ellipse at 34% 56%, rgba(136, 64, 155, .62) 0 62px, transparent 64px),
    radial-gradient(ellipse at 50% 74%, rgba(238, 113, 130, .72) 0 58px, transparent 60px),
    radial-gradient(ellipse at 66% 56%, rgba(114, 209, 208, .66) 0 62px, transparent 64px),
    radial-gradient(ellipse at 82% 74%, rgba(246, 200, 95, .78) 0 56px, transparent 58px),
    linear-gradient(180deg, transparent 42%, rgba(136, 64, 155, .12) 43% 62%, transparent 63%);
  opacity: .76;
  transform: translateX(-50%);
  animation: soft-pop 2.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

@keyframes inflatable-top-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(8px) scaleY(1.04); }
}

.page-inflables .hero-grid {
  grid-template-columns: minmax(0, .78fr) minmax(440px, 1.22fr);
  gap: 52px;
}

.page-inflables .hero-grid::after {
  content: "";
  position: absolute;
  left: 45%;
  top: 10%;
  z-index: -1;
  width: 150px;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(238, 113, 130, .7) 0 42px, transparent 44px),
    radial-gradient(ellipse at 26% 58%, rgba(246, 200, 95, .65) 0 30px, transparent 32px),
    radial-gradient(ellipse at 75% 58%, rgba(114, 209, 208, .58) 0 30px, transparent 32px),
    linear-gradient(90deg, transparent 49%, rgba(136, 64, 155, .22) 50%, transparent 51%);
  animation: balloon-rise-pop 3.9s ease-in-out infinite;
}

.page-inflables .hero-stage {
  min-height: clamp(430px, 54vw, 650px);
}

.page-inflables .portal-ring {
  border-color: rgba(136, 64, 155, .25);
}

.page-inflables .stage-card {
  border-width: 7px;
  border-color: rgba(255, 255, 255, .92);
  border-radius: 24px;
}

.page-inflables .stage-card.primary {
  width: 78%;
  height: 60%;
  right: 0;
  top: 7%;
  border-radius: 32px 96px 32px 48px;
}

.page-inflables .stage-card.side {
  width: 45%;
  height: 32%;
  left: 0;
  bottom: 15%;
  border-radius: 72px 24px 24px 24px;
}

.page-inflables .stage-card.mini {
  width: 37%;
  height: 29%;
  right: 3%;
  bottom: 2%;
  border-radius: 24px 24px 72px 24px;
}

.inflatable-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}

.inflatable-hero-note span,
.inflatable-measures span {
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 20, 33, .12);
  box-shadow: 0 10px 22px rgba(23, 20, 33, .08);
  font-size: .82rem;
  font-weight: 900;
}

.inflatable-catalog {
  position: relative;
  overflow: hidden;
  padding: 98px 22px;
  background:
    radial-gradient(circle at 10% 12%, rgba(114, 209, 208, .24) 0 110px, transparent 112px),
    radial-gradient(circle at 84% 18%, rgba(168, 204, 69, .3) 0 130px, transparent 132px),
    linear-gradient(180deg, #edfafa, #fff1d6 58%, #f4fae7);
}

.inflatable-catalog::before {
  content: "";
  position: absolute;
  inset: 8% auto auto 7%;
  width: 160px;
  height: 210px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(238, 113, 130, .44) 0 36px, transparent 38px),
    radial-gradient(ellipse at 31% 54%, rgba(246, 200, 95, .5) 0 28px, transparent 30px),
    radial-gradient(ellipse at 70% 54%, rgba(114, 209, 208, .46) 0 28px, transparent 30px);
  animation: balloon-rise-pop 4.6s ease-in-out infinite;
}

.inflatable-track {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.inflatable-track-head,
.inflatable-product {
  display: grid;
  gap: 32px;
  align-items: center;
}

.inflatable-track-head {
  grid-template-columns: minmax(0, .75fr) minmax(260px, .45fr);
  align-items: end;
  margin-bottom: 34px;
}

.inflatable-track-head p,
.inflatable-spec p {
  margin: 0;
  color: #3d374a;
  line-height: 1.7;
}

.inflatable-products {
  display: grid;
  gap: 36px;
}

.inflatable-product {
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1fr);
  min-height: 430px;
  perspective: 1200px;
  isolation: isolate;
}

.inflatable-product:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
}

.inflatable-product:nth-child(even) .inflatable-photo {
  order: 2;
}

.inflatable-photo {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 9px solid #fff;
  box-shadow: 0 26px 70px rgba(23, 20, 33, .24);
  transform-origin: center;
  transition: transform .34s ease, box-shadow .34s ease, filter .34s ease;
  animation: inflatable-card-float 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.inflatable-product::before {
  content: "";
  position: absolute;
  left: 4%;
  bottom: 8px;
  z-index: -1;
  width: min(430px, 42vw);
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(136, 64, 155, .18), transparent 68%),
    linear-gradient(90deg, transparent, rgba(114, 209, 208, .22), transparent);
  filter: blur(2px);
  animation: inflatable-shadow-pulse 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.inflatable-product:nth-child(even)::before {
  left: auto;
  right: 4%;
}

.inflatable-product:nth-child(1) { --tilt-y: 8deg; --tilt-z: -2deg; --float-delay: 0s; }
.inflatable-product:nth-child(2) { --tilt-y: -8deg; --tilt-z: 2deg; --float-delay: -1.2s; }
.inflatable-product:nth-child(3) { --tilt-y: 8deg; --tilt-z: 2deg; --float-delay: -2.4s; }
.inflatable-product:nth-child(4) { --tilt-y: -8deg; --tilt-z: -2deg; --float-delay: -3.6s; }

.inflatable-product:nth-child(1) .inflatable-photo { border-radius: 26px 120px 26px 26px; }
.inflatable-product:nth-child(2) .inflatable-photo { border-radius: 120px 26px 26px 26px; }
.inflatable-product:nth-child(3) .inflatable-photo { border-radius: 26px 26px 120px 26px; }
.inflatable-product:nth-child(4) .inflatable-photo { border-radius: 26px 26px 26px 120px; }

.inflatable-product.is-visible .inflatable-photo {
  filter: saturate(1.06) contrast(1.02);
}

.inflatable-product:hover .inflatable-photo {
  animation: none;
  transform: rotateY(var(--tilt-y)) rotateZ(var(--tilt-z)) translateY(-14px) scale(1.02);
  box-shadow: 0 34px 86px rgba(23, 20, 33, .3);
}

.inflatable-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.inflatable-product:hover .inflatable-photo img {
  transform: scale(1.08);
}

.inflatable-number {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sun);
  font-weight: 950;
  animation: inflatable-number-pop 4.2s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.inflatable-spec h3 {
  margin: 0 0 14px;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: .9;
}

.inflatable-measures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

@keyframes inflatable-card-float {
  0%,
  100% {
    transform: rotateY(var(--tilt-y)) rotateZ(var(--tilt-z)) translateY(0);
  }

  50% {
    transform: rotateY(var(--tilt-y)) rotateZ(var(--tilt-z)) translateY(-10px);
  }
}

@keyframes inflatable-shadow-pulse {
  0%,
  100% {
    opacity: .68;
    transform: scaleX(1);
  }

  50% {
    opacity: .42;
    transform: scaleX(.86);
  }
}

@keyframes inflatable-number-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.05);
  }
}

@media (max-width: 1080px) {
  .page-inflables .hero-grid,
  .inflatable-track-head,
  .inflatable-product,
  .inflatable-product:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .inflatable-product:nth-child(even) .inflatable-photo {
    order: initial;
  }
}

@media (max-width: 760px) {
  .page-inflables .hero {
    background:
      radial-gradient(circle at 16% 8%, rgba(246, 200, 95, .42) 0 80px, transparent 82px),
      radial-gradient(circle at 88% 30%, rgba(114, 209, 208, .26) 0 118px, transparent 120px),
      linear-gradient(180deg, #edfafa, #fff1c9 58%, #f4fae7);
  }

  .page-inflables .hero-stage {
    min-height: 255px;
    animation: soft-pop 3s ease-in-out infinite;
  }

  .page-inflables .hero::after {
    left: auto;
    right: -12%;
    bottom: 30%;
    width: 64vw;
    height: 170px;
    opacity: .42;
    transform: none;
  }

  .page-inflables .hero-grid::after {
    left: auto;
    right: 5%;
    top: 40%;
    width: 96px;
    height: 130px;
  }

  .page-inflables .stage-card.primary {
    width: 78%;
    height: 68%;
    right: 0;
    top: 0;
    border-radius: 26px 70px 26px 34px;
  }

  .page-inflables .stage-card.side {
    width: 48%;
    height: 34%;
    bottom: 8%;
    border-radius: 48px 22px 22px 22px;
  }

  .page-inflables .stage-card.mini {
    width: 40%;
    height: 31%;
    border-radius: 22px 22px 48px 22px;
  }

  .inflatable-hero-note {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  .inflatable-hero-note::-webkit-scrollbar {
    display: none;
  }

  .inflatable-hero-note span {
    flex: 0 0 auto;
  }

  .inflatable-catalog {
    padding: 72px 16px;
  }

  .inflatable-products {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    margin-inline: -16px;
    padding: 4px 16px 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .inflatable-products::-webkit-scrollbar {
    display: none;
  }

  .inflatable-product {
    flex: 0 0 min(88vw, 360px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: auto;
    isolation: isolate;
    scroll-snap-align: center;
  }

  .inflatable-product::before {
    left: 8%;
    right: 8%;
    bottom: -8px;
    width: auto;
  }

  .inflatable-photo,
  .inflatable-photo img {
    min-height: 290px;
    border-radius: 28px 74px 28px 28px !important;
  }

  .inflatable-photo {
    transform: rotateZ(-1deg);
    animation: inflatable-mobile-bob 5s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }

  .inflatable-spec h3 {
    font-size: 2.1rem;
  }
}

@keyframes inflatable-mobile-bob {
  0%,
  100% {
    transform: rotateZ(-1deg) translateY(0);
  }

  50% {
    transform: rotateZ(1deg) translateY(-7px);
  }
}

.page-inflables .hero::before {
  inset: 64px -8vw auto !important;
  height: min(32vh, 290px) !important;
  background-size: 108% 100% !important;
  background-position: center top !important;
  opacity: .76 !important;
  filter: drop-shadow(0 18px 24px rgba(36, 22, 45, .11)) saturate(1.08);
  transform-origin: top center;
  animation: upper-showpiece 8s ease-in-out infinite !important;
}