/* ===============================================
   GLOBAL RESET & BASE
   =============================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: system-ui, -apple-system, sans-serif;
   background: #f5f5f5;
   min-height: 100vh;
   overflow-x: hidden;
}

/* Demo page sitting behind the menu */
.page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.page__title {
   font-size: clamp(40px, 8vw, 120px);
   font-weight: 400;
   text-transform: uppercase;
   color: #111;
}

/* ===============================================
   BLOCK: burger
   Black "Menu" button pinned to the top-right.
   Background slab slides in from the top on hover.
   =============================================== */
.burger {
   width: 150px;
   height: 30px;
   background-color: black;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   position: fixed;
   right: 0;
   top: 0;
   padding: 10px;
   cursor: pointer;
   /* Below the stairs and menu when they are active */
   z-index: 1;
}

/* ELEMENT: the yellow slab that grows on hover */
.burger__bg {
   background-color: #D3FD50;
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   height: 0;
   transition: height 0.3s;
}

/* ELEMENT: two-line SVG icon */
.burger__icon {
   position: absolute;
   right: 20px;
   top: 20px;
}

.burger__icon line {
   transition: stroke 0.5s;
}

/* ELEMENT: "Menu" text — hidden on mobile, visible on desktop */
.burger__label {
   display: none;
   color: white;
   text-transform: uppercase;
   transition: color 0.5s;
}

/* Hover state: slab fills the button, text/icon invert to black */
.burger:hover .burger__bg    { height: 100%; }
.burger:hover .burger__label { color: black; }
.burger:hover .burger__icon line { stroke: black; }

/* ===============================================
   BLOCK: stairs
   Five vertical black bars that animate 0 → 100% height
   with a stagger, plus a black backdrop. Creates the
   stepped reveal effect before the menu appears.
   =============================================== */
.stairs {
   top: 0;
   left: 0;
   position: fixed;
   z-index: 2;
   height: 100vh;
   width: 100%;
   display: flex;
   /* Pointer events off so it doesn't block the menu underneath */
   pointer-events: none;
}

/* ELEMENT: one vertical bar (20% of viewport width × 5 = 100vw) */
.stairs__bar {
   width: 20vw;
   height: 0;               /* starts collapsed, GSAP grows to 100% */
   background-color: black;
}

/* ELEMENT: solid black backdrop behind the menu content.
   Appears after the bars have finished growing. */
.stairs__bg {
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: black;
   opacity: 0;              /* GSAP fades it to 0.5 */
   pointer-events: none;
}

/* ===============================================
   BLOCK: menu
   Full-screen overlay with the three big links,
   close button and social footer. Hidden until
   the stairs animation finishes.
   =============================================== */
.menu {
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   z-index: 3;
   height: 100%;
   width: 100%;
   flex-direction: column;
   justify-content: space-between;
   opacity: 0;              /* GSAP fades this in */
   pointer-events: none;    /* enabled when menu is fully open */
}

/* ELEMENT: the top bar with the close button */
.menu__header {
   display: flex;
   justify-content: flex-end;
   padding: 20px;
}

/* ELEMENT: close button (X icon) */
.menu__close {
   cursor: pointer;
   width: 100px;
   height: 100px;
   /* GSAP slides it in from x: 150 on open */
}

.menu__close path {
   transition: stroke 0.5s;
}

.menu__close:hover path {
   stroke: #D3FD50;
}

/* ELEMENT: the links wrapper — absolutely centered */
.menu__body {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

/* ELEMENT: a single link row.
   perspective enables the rotateX flip on open.
   transform-origin: top makes the flip feel natural. */
.menu__item {
   border-top: 1px solid white;
   display: flex;
   justify-content: center;
   cursor: pointer;
   perspective: 80vw;
   transform-origin: top;
   position: relative;
   overflow: hidden;        /* clips the slide-in overlay */
}

/* Last item also gets a bottom border to close the list visually */
.menu__item:last-of-type {
   border-bottom: 1px solid white;
}

.menu__link {
   color: white;
   text-transform: uppercase;
   font-size: 8vw;
   line-height: 8.2vw;
   font-weight: 400;
   text-decoration: none;
   /* No z-index needed — the overlay (positioned absolute)
      naturally paints on top because it comes later in the DOM. */
}

/* ELEMENT: menu__outer — the yellow overlay that slides in on hover.
   Starts off-screen (top: 100% or -100%, set by JS based on cursor
   direction). GSAP slides it to top: 0 on hover.
   pointer-events: none so the item itself keeps receiving the hover. */
.menu__outer {
   display: flex;
   position: absolute;
   height: 100%;
   width: 100%;
   overflow: hidden;
   pointer-events: none;
   top: 100%;
   will-change: top;
}

/* ELEMENT: menu__inner — yellow background layer inside the overlay.
   Same trick — slides in from the opposite direction from `outer`
   for the nice split-layer reveal. */
.menu__inner {
   background-color: #D3FD50;
   position: absolute;
   white-space: nowrap;
   height: 100%;
   top: 100%;
   width: 100%;
   display: flex;
   will-change: top;
}

/* ELEMENT: menu__container — one row of images + text.
   Duplicated in HTML and animated with a linear infinite marquee. */
.menu__container {
   display: flex;
   align-items: center;
   animation: marquee 12s linear infinite;
   position: relative;
}

/* ELEMENT: thumbnail container — rounded pill shape */
.menu__img-container {
   height: 6vw;
   width: 16vw;
   position: relative;
   overflow: hidden;
   border-radius: 3vw;
   margin: 0 1vw;
   display: flex;
   flex-shrink: 0;
}

.menu__img-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Description text inside the overlay (black on yellow) */
.menu__inner p {
   color: black;
   font-size: 8vw;
   line-height: 8.2vw;
   text-transform: uppercase;
   font-weight: 400;
   margin: 0;
   white-space: nowrap;
}

/* ELEMENT: menu__footer — social pills at the bottom */
.menu__footer {
   color: white;
   display: flex;
   justify-content: center;
   gap: 10px;
   padding: 20px;
}

.menu__footer a {
   font-size: 3vw;
   color: white;
   border: 2px solid white;
   padding: 0 10px;
   border-radius: 30px;
   cursor: pointer;
   text-decoration: none;
}

/* ===============================================
   Infinite marquee animation (the moving strip of
   images + text inside the hover overlay)
   =============================================== */
@keyframes marquee {
   from { transform: translate3d(0, 0, 0); }
   to   { transform: translate3d(-100%, 0, 0); }
}

/* ===============================================
   RESPONSIVE — show "Menu" label on larger screens
   =============================================== */
@media (min-width: 600px) {
   .burger {
      height: 120px;
   }
   .burger__label {
      display: block;
   }
}