@import url("https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps&display=swap");
:root {
  --color-brown: #53350e;
  --color-yellow: #f8c20d;
  --font-fancy: "Elsie Swash Caps", cursive;
  --font-fancy-weight: 400;
  --font-regular: "Helvetica", sans-serif;
  --spacing: 2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

/* ---------------------------------- */
:root {
  background: var(--color-brown);
  color: white;
  font-family: var(--font-regular);
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
}

.mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  padding: var(--spacing);
}

.mainTitle {
  font-family: var(--font-fancy);
  font-weight: var(--font-fancy-weight);
  color: var(--color-yellow);
  margin: 0;
  padding: 0;
}

/* ---------------------------------- */
.sliderNav {
  position: fixed;
  bottom: var(--spacing);
  left: var(--spacing);
  z-index: 10;
  font-size: 2rem;
}

.sliderNavButton {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  border: none;
  text-transform: uppercase;
}

.slideImages {
  width: 100vw;
  display: grid;
  justify-content: center;
  align-items: center;
}
.slideImages .slideImage {
  grid-area: 1/1;
  display: block;
  max-width: 100%;
}

.slider {
  display: grid;
  height: 100vh;
  overflow: hidden;
}

.slide,
.sliderSlides {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.slide > *,
.sliderSlides > * {
  grid-area: 1/1;
}

/* ---------------------------------- */
.slideImage {
  will-change: transform;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  --clip-path-duration: var(--full-state, 1.4s) var(--slides-state, 2.5s);
  transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-clip-path var(--clip-path-duration) cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), clip-path var(--clip-path-duration) cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), clip-path var(--clip-path-duration) cubic-bezier(0.6, 0, 0.4, 1), -webkit-clip-path var(--clip-path-duration) cubic-bezier(0.6, 0, 0.4, 1);
  transition-delay: calc((var(--delay) + var(--delay-offset)) * 0.1s);
  --delay: 0;
  --delay-offset: 0;
  --rotation: rotate(-25deg);
  --imageOffset: translateX(-50%) scale(0.8);
  --slideOffset: translateX(calc(var(--offset) * 110vw));
  --transform: var(--slideOffset) var(--imageOffset) var(--rotation);
  transform: var(--transform);
}
.slideImage.-main {
  --delay: 1;
  --rotation: /**/ ;
  --imageOffset: /**/ ;
  z-index: 2;
}
.slideImage.-main + .slideImage {
  --imageOffset: translateX(50%) scale(0.8);
  --rotation: rotate(25deg);
  --delay: 2;
}
[data-state=full] .slideImage.slideImage {
  --rotation: /**/ ;
  --imageOffset: /**/ ;
  --delay: 0;
}

.slide[data-current] .slideImage {
  --delay-offset: 3;
}
.slide[data-current] .slideImage.-main {
  transform: var(--transform) scale(var(--full-state, 4) var(--slides-state, 1));
  -webkit-clip-path: var(--full-state, polygon(0% 25%, 100% 25%, 100% 75%, 0% 75%)) var(--slides-state, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%));
          clip-path: var(--full-state, polygon(0% 25%, 100% 25%, 100% 75%, 0% 75%)) var(--slides-state, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%));
}

.slider[data-state=full] {
  --slides-state: /**/ ;
}
.slider[data-state=slides] {
  --full-state: /**/ ;
}

/* ---------------------------------- */
.slideTitle {
  font-family: var(--font-fancy);
  font-weight: var(--font-fancy-weight);
  color: var(--color-yellow);
  font-size: 10vw;
  text-align: center;
  z-index: 20;
  opacity: 0;
}
[data-current] .slideTitle {
  opacity: 1;
}