:root {
  --step--2: clamp(3.13rem, 2.62rem + 2.51vw, 5.76rem);
  --step--1: clamp(3.75rem, 3.09rem + 3.29vw, 7.2rem);
  --step-0: clamp(4.5rem, 3.64rem + 4.29vw, 9rem);
}

.marquee {
  border-bottom: 1px solid #1a1a1a;
  color: #ffffff;
  font-size: var(--step-0);
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  height: calc(170px + 4rem);
  overflow: hidden;
  position: relative;
  width: 100vw;
  z-index: 0;

  & img {
    object-fit: cover;
    max-height: 150px;
  }
}

.track {
  height: 100%;
  overflow: hidden;
  padding: 2rem 0;
  position: absolute;
  white-space: nowrap;
  z-index: 0;

  & .text {
    animation: marquee 50000ms linear infinite;
    align-items: center;
    display: inline-flex;
    will-change: transform;
  }
}

.-focus {
  color: #1a1a1a;
  font-weight: 900;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper-3d {
  position: relative;
  perspective: 20vw;
  transform-style: preserve-3d;
}

.fold {
  overflow: hidden;
  width: 100vw;
  height: 80vh;
}

.fold-top {
  position: absolute;
  transform-origin: bottom center;
  left: 0;
  right: 0;
  bottom: 100%;
}

.fold-center {
  width: 100vw;
}

.fold-bottom {
  position: absolute;
  transform-origin: top center;
  right: 0;
  left: 0;
  top: 100%;
}
.fold-align {
  width: 100%;
  height: 100%;
}
.fold-bottom .fold-align {
  transform: translateY(-100%);
}
.fold-top .fold-align {
  transform: translateY(100%);
}

.fold-bottom {
  transform-origin: top center;
  transform: rotateX(120deg);
}

.fold-top {
  transform-origin: bottom center;
  transform: rotateX(-120deg);
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  --s: 100px; /* control the size */
  --c1: #ffffff;
  --c2: #00ff4496;

  --_s: calc(2 * var(--s)) calc(2 * var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
  background: calc(0.9 * var(--s)) calc(0.9 * var(--s)) / var(--_p),
    calc(-0.1 * var(--s)) calc(-0.1 * var(--s)) / var(--_p),
    calc(0.7 * var(--s)) calc(0.7 * var(--s)) / var(--_g),
    calc(-0.3 * var(--s)) calc(-0.3 * var(--s)) / var(--_g),
    conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0 /
      var(--s) var(--s);
  filter: blur(4px) brightness(0.8);
  animation: m 3s infinite;
}

@keyframes m {
  0% {
    background-position: calc(0.9 * var(--s)) calc(0.9 * var(--s)),
      calc(-0.1 * var(--s)) calc(-0.1 * var(--s)),
      calc(0.7 * var(--s)) calc(0.7 * var(--s)),
      calc(-0.3 * var(--s)) calc(-0.3 * var(--s)), 0 0;
  }
  25% {
    background-position: calc(1.9 * var(--s)) calc(0.9 * var(--s)),
      calc(-1.1 * var(--s)) calc(-0.1 * var(--s)),
      calc(1.7 * var(--s)) calc(0.7 * var(--s)),
      calc(-1.3 * var(--s)) calc(-0.3 * var(--s)), 0 0;
  }
  50% {
    background-position: calc(1.9 * var(--s)) calc(-0.1 * var(--s)),
      calc(-1.1 * var(--s)) calc(0.9 * var(--s)),
      calc(1.7 * var(--s)) calc(-0.3 * var(--s)),
      calc(-1.3 * var(--s)) calc(0.7 * var(--s)), 0 0;
  }
  75% {
    background-position: calc(2.9 * var(--s)) calc(-0.1 * var(--s)),
      calc(-2.1 * var(--s)) calc(0.9 * var(--s)),
      calc(2.7 * var(--s)) calc(-0.3 * var(--s)),
      calc(-2.3 * var(--s)) calc(0.7 * var(--s)), 0 0;
  }
  100% {
    background-position: calc(2.9 * var(--s)) calc(-1.1 * var(--s)),
      calc(-2.1 * var(--s)) calc(1.9 * var(--s)),
      calc(2.7 * var(--s)) calc(-1.3 * var(--s)),
      calc(-2.3 * var(--s)) calc(1.7 * var(--s)), 0 0;
  }
}

:root {
  --fontSize: 4;
}

.hide {
  display: none;
  opacity: 0;
}

/* black background pink text */
.old {
  color: #f39;
  background: #000;
}

/* pink background white text */
.new {
  color: white;
  background: #f39;
}

/* Gallery Section */
.gallery-section {
  padding: 5rem 0;
  background: #f9f9f9;
  position: relative;
  min-height: 100vh;
}

.gallery-heading {
  text-align: center;
  margin-bottom: 3rem;
}

.parallax-container {
  position: relative;
  /* Make the container tall enough to contain the staggered absolute images
     so they can move into view during scroll. Adjust if you change the
     image top offsets in this file. */
  height: 260vh; /* ~100vh + last image top offset (160vh) */
  overflow: hidden;
}

.parallax-image {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smooth transitions and default hidden state so we can fade images in/out */
/* .parallax-image {
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.5s ease;
  pointer-events: none;
} */

/* Stagger the starting positions */
.parallax-1 {
  top: 0vh;
}
.parallax-2 {
  top: 60vh;
}
.parallax-3 {
  top: 120vh;
}
.parallax-4 {
  top: 180vh;
}
.parallax-5 {
  top: 240vh;
}
.parallax-6 {
  top: 300vh;
}
.parallax-7 {
  top: 360vh;
}
.parallax-8 {
  top: 420vh;
}
.parallax-9 {
  top: 480vh;
}

.parallax-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Different widths for each image */
.parallax-1 img {
  width: 80%;
}
.parallax-2 img {
  width: 70%;
}
.parallax-3 img {
  width: 90%;
}
.parallax-4 img {
  width: 60%;
}
.parallax-5 img {
  width: 85%;
}
.parallax-6 img {
  width: 75%;
}
.parallax-7 img {
  width: 65%;
}
.parallax-8 img {
  width: 95%;
}
.parallax-9 img {
  width: 55%;
}

/* Responsive */
@media (max-width: 768px) {
  .parallax-1 img {
    width: 90%;
  }
  .parallax-2 img {
    width: 80%;
  }
  .parallax-3 img {
    width: 95%;
  }
  .parallax-4 img {
    width: 70%;
  }
  .parallax-5 img {
    width: 85%;
  }
  .parallax-6 img {
    width: 80%;
  }
  .parallax-7 img {
    width: 75%;
  }
  .parallax-8 img {
    width: 90%;
  }
  .parallax-9 img {
    width: 65%;
  }
}

/* Mobile overlay: hide whole site on small viewports and show message */
/* #mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

#mobile-overlay .mobile-overlay-inner {
  max-width: 760px;
  margin: 0 auto;
}

#mobile-overlay h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

#mobile-overlay p {
  margin: 0;
  color: #444;
  line-height: 1.4;
}

/* When viewport is narrow, hide everything except the overlay */
/* @media (max-width: 820px) {
  body > *:not(#mobile-overlay) {
    display: none !important;
  }

  #mobile-overlay {
    display: flex !important;
  }
} */

@media (max-width: 600px) {
  .screen::before {
    display: none;
    height: 0;
    width: 0;
  }
  .screen-hide,
  .wrapper-3d {
    display: none;
    height: 0;
    width: 0;
    opacity: 0;
  }
}