:root {
    --light-gray: #f6f6f6;
    --dark: #161616;
    --beige: #eeeae3;
    --beige-soft: #e9e4dc;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
    background: var(--light-gray);
    overflow-x: hidden;
}

#stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
}

.scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.scene-1 {
    background: var(--light-gray);
    z-index: 3;
    position: relative;
}
.scroll span {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: scroll_animate 1.5s infinite;
  animation: scroll_animate 1.5s infinite;
  box-sizing: border-box;
  z-index: 4;
}
@-webkit-keyframes scroll_animate {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes scroll_animate {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.scene-2 {
    background: var(--dark);
    z-index: 4;
    transform: translateY(100%);
}

.scene-3 {
    background: var(--light-gray);
    z-index: 2;
    transform: translateY(100%);
}

.scene-4 {
    background: var(--beige);
    z-index: 5;
    transform: translateY(100%);
}

.hero-gif {
    width: min(64vmin, 640px);
    max-width: 86vw;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    transform-origin: top center;
    filter: saturate(0.95);
    will-change: transform;
}

.main-logo {
    width: min(52vmin, 540px);
    max-width: 82vw;
    height: auto;
    transform-origin: top center;
    will-change: transform;
}

.pattern-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), 1fr);
    grid-auto-rows: minmax(90px, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
    padding: clamp(24px, 3.2vw, 44px);
    align-content: stretch;
    justify-items: center;
    pointer-events: none;
}

.pattern-cell {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.pattern-mark {
    width: min(100%, 150px);
    max-height: 62px;
    object-fit: contain;
    opacity: 0.9;
    transform: translateZ(0);
}

.pattern-mark.is-muted {
    opacity: 0.43;
}

.pattern-mark.is-focus {
    opacity: 1;
}

.complete-logo {
    width: min(26vmin, 260px);
    max-width: 52vw;
    height: auto;
}

#scroll-spacer {
    height: 400vh;
}

@media (max-width: 920px) {
    .hero-gif {
        width: min(74vmin, 520px);
    }

    .main-logo {
        width: min(62vmin, 480px);
    }

    .pattern-grid {
        grid-template-columns: repeat(var(--cols-mobile, 6), 1fr);
        grid-auto-rows: minmax(72px, 1fr);
        gap: 18px;
        padding: 24px;
    }

    .pattern-mark {
        max-height: 46px;
    }

    .complete-logo {
        width: min(42vmin, 220px);
    }
}

@media (max-width: 560px) {
    .hero-gif {
        width: 82vw;
    }

    .scroll span {
        bottom: 84px;
        width: 28px;
        height: 28px;
        margin-left: -14px;
        border-left-width: 2px;
        border-bottom-width: 2px;
    }

    .main-logo {
        width: 86vw;
    }

    .pattern-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(58px, 1fr);
        gap: 14px;
        padding: 18px;
    }

    .pattern-mark {
        max-height: 38px;
    }

    .complete-logo {
        width: 52vw;
    }
}