@font-face {
  font-family: "MADE Mountain";
  src: url("assets/MADEMountain-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #bebdb8;
  --red: #a03f2d;
  --folder-tab: #82befa;
  --folder-front: #8ec8ee;
  --brown: #402718;
  --cream: #efe6d8;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
}

body {
  overflow-x: hidden;
  font-family: "MADE Mountain", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- SECTION 1: HERO ---------- */

.section--hero {
  position: relative;
  height: 250vh; /* extra scroll distance drives the disc rotation */
  background: var(--bg);
}

.hero__pin {
  --viewmaster-width: min(30vw, 340px);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* avoids jump/gap when mobile browser toolbars show/hide */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 6vw;
}

.hero__stage {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(calc(-50% + 14px), -50%);
  width: calc(var(--viewmaster-width) * 0.8);
  aspect-ratio: 1792 / 1851;
}

.hero__disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

.hero__viewmaster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: var(--viewmaster-width);
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25));
}

.hero__text {
  position: relative;
  z-index: 3;
  color: var(--red);
  font-family: "MADE Mountain", sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__text--left,
.hero__text--right {
  text-align: center;
}

/* ---------- SECTION 2: ALLIGATOR SCROLL-SCRUB VIDEO ---------- */

.section--video {
  position: relative;
  height: 300vh; /* extra scroll distance drives the video scrub */
  background: #000;
}

.video-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* avoids jump/gap when mobile browser toolbars show/hide */
  width: 100%;
  overflow: hidden;
}

.video-pin__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alligator clip keeps its full frame in view (no left/right/bottom crop) —
   letterboxed on a background that matches the hero's fill, and centered
   via object-fit: contain's default object-position: center. */
#alligator {
  background: var(--bg);
}

/* alligator bg.png is a narrow strip — stretched edge-to-edge across the
   full section width (and full height) rather than tiled/cropped. */
.alligator-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

#alligator .video-pin__video {
  position: relative;
  z-index: 1;
  object-fit: contain;
}

/* ---------- SECTION 3: LANDSCAPE + FOLDER STACK ---------- */
/* Keep scrolling through this section and the Dolomites folder pops open,
   then its front face scales up to swallow the whole screen in blue.
   Folder-pop mechanic adapted from Jason Hibbs' "Animated Folder"
   (codepen.io/jasonhibbs/pen/AwbMyz): a tab that lifts back and a front
   face that tilts open — driven by scroll progress instead of :hover. */

.section--folders {
  position: relative;
  height: 280vh; /* extra scroll distance drives the folder-open + expand */
  background: var(--bg);
}

.folders-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* avoids jump/gap when mobile browser toolbars show/hide */
  width: 100%;
  overflow: hidden;
}

.folders__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.folders__stack {
  position: absolute;
  top: 50%;
  right: 8vw;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vh, 3rem);
}

.folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.folder-item--dolomites {
  z-index: 5; /* paints above sibling folders + bg once its front face grows */
}

.folder-item__icon {
  width: clamp(52px, 6vw, 76px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  user-select: none;
  pointer-events: none;
}

.folder-item__label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.35);
  will-change: opacity;
}

.dolomites-folder {
  position: relative;
  width: clamp(52px, 6vw, 76px);
  aspect-ratio: 44 / 39; /* matches the other folder-regular.png icons */
}

.dolomites-folder__tab {
  position: absolute;
  top: -14%;
  left: 8%;
  width: 34%;
  height: 20%;
  background: var(--folder-tab);
  border-radius: 25% 40% 0 0;
  transform-origin: bottom center;
  z-index: 0;
  will-change: transform, opacity;
}

.dolomites-folder__front {
  position: absolute;
  inset: 0;
  background: var(--folder-front);
  border-radius: 14%;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45);
  transform-origin: center center;
  z-index: 1;
  will-change: transform, border-radius;
}

/* ---------- SECTION 5: TYPOGRAPHIC STATEMENT ---------- */

.section--typography {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--brown);
}

.typo__pin {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 22vh, 11rem);
  padding: clamp(2rem, 7vh, 4.5rem) clamp(1.5rem, 6vw, 4rem);
}

/* Headline reads as one justified line — flex spreads the three words
   edge-to-edge across the full width, like a stretched paragraph rule. */
.typo__headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  color: var(--red);
  font-family: "MADE Mountain", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 8vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
}

/* Body copy sits in the final third of the section, starting at the 2/3
   column mark. */
.typo__body {
  align-self: flex-start;
  margin-left: 66.666%;
  width: 26.666%;
  transform: translate(-100px, -100px);
}

.typo__body p {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--red);
  text-align: justify;
  margin: 0 0 1em;
}

.typo__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .hero__pin {
    --viewmaster-width: min(45vw, 260px);
    padding: 0 5vw;
  }
  .hero__text {
    white-space: normal;
    font-size: clamp(1.1rem, 5vw, 1.8rem);
    max-width: 22vw;
  }
  .folders__stack {
    right: 6vw;
  }
  .typo__headline {
    flex-wrap: wrap;
    gap: 0.25em;
    font-size: clamp(1.6rem, 11vw, 2.6rem);
    /* the -50% shift was tuned for a single-line headline; once it wraps to
       two lines on narrow phones it pushes the top line past the section
       edge, so drop the shift here and let flex spacing handle it. */
    transform: none;
  }
  .typo__body {
    margin-left: 0;
    width: 100%;
    /* the -100px/-100px desktop offset is a fixed pixel nudge tuned for a
       wide 2/3-column layout; on a full-width mobile column it just shoves
       the copy off-center, so reset it. */
    transform: none;
  }
}