:root {
  --color-just-black: #0a0a0a;
  --color-surface50: #333333;
  --gradient-macha: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  --gradient-summer-fair: linear-gradient(135deg, #ffa751 0%, #ffe259 100%);
  --gradient-orange-crush: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui;
  background: var(--color-just-black);
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

/* Background color slider */
.splide-bg {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 500px;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.splide-bg .splide__track,
.splide-bg .splide__list,
.splide-bg .splide__slide {
  height: 100%;
}

.bg-color {
  width: 100%;
  height: 100%;
}
.bg-slide-img.bg-color {
    background-size: cover;
    background-position: center;
    background-color: #000;
}
.bg-slide-img.bg-color:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #7e262dd4;
}

/* Main slider */
.slider-container,
.splide {
  max-width: 500px;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: visible;
}

.splide__track {
  height: 100%;
}

.splide__list {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.splide__slide {
  height: 100%;
  opacity: 0.6;
  transition: opacity 0.6s ease-in-out;
}

.splide__slide.is-active {
  opacity: 1;
  z-index: 10;
}

.slide {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
}

.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: 1;
  overflow: hidden;
  margin-top: 50vh;
  border: 10px solid #fff;
  border-radius: 20px 20px 0 0;
  border-bottom: 0px;
  transition: all .3s;
  background-color: #000;
}


.slide-background img[alt="Background"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  opacity: .4;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide__slide.is-active .slide-background img[alt="Background"] {
  transform: scale(1.05);
}

.slide-img-container {
    width: 80%;
    margin: 0 auto;
    height: 30vh;
    border: #fff solid 5px;
    border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
}

.splide__slide.is-active .slide-img-container {
  opacity: 1;
    transform: translateY(0);

  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.slide-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 5px;
}


.slide-content {
position: absolute;
    top: 30px;
    z-index: 2;
    padding: 0;
    max-width: 600px;
    width: 100%;
  }

.slide-heading {
  font-family: "Anton", sans-serif;
  font-size: 1.5rem;  
  margin: 0.5rem 0 0.5rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

h1.slide-heading-top {
    position: absolute;
    top: 10vh;
    width: 80vw;
    opacity: 0;
    transform: translateY(-80px);
}
.splide__slide.is-active h1.slide-heading-top,
.splide.is-transitioning .splide__slide h1.slide-heading-top {
  opacity: 1;
  transform: translateY(0);
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
    transform 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;

}
.splide.is-transitioning .splide__slide h1.slide-heading-top {
  opacity: 0 !important;
  display: none;
}

h1.slide-heading-top img {
  width: 80%;
  height: auto;
}

.splide__slide.is-active .slide-heading {
  opacity: 1;
  transform: translateY(0);
}

.splide__slide.is-active .slide-background {
  height: 70vh;
  margin-top: 30vh;
}

.slide-subheading {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.splide__slide.is-active .slide-subheading {
  opacity: 0.9;
  transform: translateY(0);
}

.slide-description {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

.splide__slide.is-active .slide-description {
  opacity: 0.8;
  transform: translateY(0);
}

/* Position slides relative to active slide */
/* Only immediate neighbors get the tuck effect */
.splide__slide.is-immediately-before .slide {
  transform: translateX(50px) rotate(-6deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide__slide.is-immediately-after .slide {
  transform: translateX(-50px) rotate(6deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* All other slides and active slide - no transform on inner .slide */
.splide__slide.is-before-active:not(.is-immediately-before) .slide,
.splide__slide.is-after-active:not(.is-immediately-after) .slide,
.splide__slide.is-active .slide {
  transform: translateX(0) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* During transitions */
.splide.is-transitioning .splide__slide.is-next-active {
  z-index: 11 !important;
  opacity: 1;
}

.splide.is-transitioning .splide__slide.is-next-active .slide-background {
  height: 70vh;
  margin-top: 30vh;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide.is-transitioning .splide__slide.is-next-active .slide {
  transform: translateX(0) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When going forward: prev-active slide becomes tucked left */
.splide.is-transitioning .splide__slide.is-prev-active.is-before-active .slide {
  transform: translateX(50px) rotate(-6deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When going backward: prev-active slide becomes tucked right */
.splide.is-transitioning .splide__slide.is-prev-active.is-after-active .slide {
  transform: translateX(-50px) rotate(6deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide.is-transitioning .splide__slide.is-prev-active .slide-background {
  height: 50vh;
  margin-top: 50vh;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* background Slide */
.splide-bg {
  position: absolute;
}

button.view_more {
    background: #d9d1c2;
    border: 0;
    padding: 10px 20px;
    border-radius: 3px;
    font-family: 'Anton';
    font-size: 1.6rem;
    cursor: pointer;
}
.splide__arrow {top: 90%;}

/* Expanded state animations */
.splide__slide.is-expanded .slide-img-container {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide__slide.is-expanded .slide-content {
    transform: translateY(-150px);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide__slide.is-expanded .slide {
    width: calc(100%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splide__slide.is-expanded .slide-background {
    width: calc(100% + 100px);
    left: -50px;
    margin-top: 10vh;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.6s cubic-bezier(0.4, 0, 0.2, 1) ;
}
.splide__slide.is-expanded .slide-heading-top {
  height: 8vh;
  top: 1vh;
  transition: all  0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.splide__slide.is-expanded .slide-heading-top img {
  width: 50vw;
  transition: all  1s cubic-bezier(0.4, 0, 0.2, 1);
}