.work-gateway {
  --gateway-y: 3rem;
  --gateway-scale: .88;
  --gateway-opacity: .35;
  --gateway-word-x: 3rem;
  height: 142svh;
  position: relative;
  background: #faf6ef;
  color: #625d59;
}

.gateway-copy {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 42rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.gateway-word {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  color: #f6ddcf;
  font: 400 min(49vw, 48rem)/.68 var(--display);
  letter-spacing: -.03em;
  text-transform: none;
  white-space: nowrap;
  transform: translate(calc(-50% + var(--gateway-word-x)), -50%);
  transition: transform .18s ease-out;
}

.gateway-copy > p {
  position: absolute;
  z-index: 3;
  top: 18%;
  margin: 0;
  font-size: clamp(.92rem, 1.1vw, 1.12rem);
  font-weight: 600;
  letter-spacing: .01em;
}

.gateway-scroll {
  position: absolute;
  z-index: 3;
  bottom: 4.5%;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: clamp(.92rem, 1.1vw, 1.12rem);
  font-weight: 600;
}

.gateway-scroll i { font-style: normal; transition: transform .45s var(--ease); }
.work-gateway:hover .gateway-scroll i { transform: translateY(.45rem); }

.folder-link {
  --folder-rx: 0deg;
  --folder-ry: 0deg;
  position: relative;
  display: block;
  width: clamp(14rem, 24vw, 22rem);
  height: clamp(10rem, 17vw, 15.5rem);
  margin-inline: auto;
  perspective: 700px;
  transform: rotateX(var(--folder-rx)) rotateY(var(--folder-ry));
  transition: transform .18s ease-out;
}

.folder-back, .folder-front {
  position: absolute;
  inset: 1.7rem 0 0;
  border-radius: 1.2rem;
  background: var(--acid);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .18);
}

.folder-back::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.6rem;
  width: 42%;
  height: 2.2rem;
  border-radius: 1rem 1rem 0 0;
  background: var(--acid);
}

.folder-front {
  inset: 3.2rem 0 0;
  display: grid;
  place-items: center;
  color: #111;
  background: linear-gradient(145deg, #ffe66c, #ffd527 60%, #e2b400);
  transform-origin: center bottom;
  transform: rotateX(-8deg);
  transition: transform .6s var(--ease);
}

.folder-front strong { font: 400 clamp(3rem, 5vw, 5rem)/1 var(--display); letter-spacing: -.02em; }
.folder-front small { position: absolute; right: 1rem; bottom: .9rem; font-size: .63rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.folder-link:hover .folder-front { transform: rotateX(-18deg) translateY(.3rem); }
.folder-link:focus-visible { outline: 3px solid #111; outline-offset: 8px; border-radius: 1rem; }

.gateway-folder {
  z-index: 2;
  width: clamp(20rem, 26vw, 31rem);
  height: clamp(16rem, 22vw, 25rem);
  margin: 0;
  opacity: var(--gateway-opacity);
  transform: translate3d(0, var(--gateway-y), 0) scale(var(--gateway-scale)) rotateX(var(--folder-rx)) rotateY(var(--folder-ry));
  will-change: transform, opacity;
}

.gateway-folder .folder-back,
.gateway-folder .folder-front {
  border-radius: clamp(1.2rem, 2vw, 1.9rem);
  background: #3156f5;
  box-shadow: 0 2.8rem 5rem rgba(38, 71, 208, .2);
}

.gateway-folder .folder-back { z-index: 0; inset: 3.2rem 1% 0; }
.gateway-folder .folder-back::before {
  top: -2.7rem;
  width: 34%;
  height: 3.4rem;
  border-radius: 1.4rem 1.4rem 0 0;
  background: #3156f5;
}

.folder-paper {
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 4%;
  top: 5.15rem;
  height: 64%;
  border-radius: .55rem .55rem 1.2rem 1.2rem;
  background: repeating-linear-gradient(180deg, #f7efe7 0 7px, #efbcb3 7px 9px, #f7efe7 9px 17px);
  box-shadow: 0 .7rem 1.4rem rgba(37, 43, 91, .18);
  transform-origin: bottom center;
  transition: transform .65s var(--ease);
}

.folder-paper--one { transform: translateY(-.7rem) rotate(-1.2deg); }
.folder-paper--two { background: linear-gradient(145deg, #6fcaf4, #f39fba 43%, #f4d66d); transform: translateY(-.2rem) rotate(.8deg); }

.gateway-folder .folder-front {
  z-index: 2;
  inset: 6.1rem 0 0;
  display: block;
  color: rgba(24, 55, 190, .82);
  background: linear-gradient(145deg, #345afa, #3156f5 62%, #294be2);
  transform: rotateX(-5deg);
}

.gateway-folder .folder-front small {
  top: 1.35rem;
  left: 1.4rem;
  right: auto;
  bottom: auto;
  padding: .38rem .62rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .4rem;
  color: rgba(255, 255, 255, .58);
}

.gateway-folder .folder-front strong {
  position: absolute;
  inset: 50% auto auto 50%;
  color: rgba(20, 48, 173, .55);
  font: 600 clamp(2.8rem, 4vw, 4.4rem)/1 var(--sans);
  letter-spacing: -.1em;
  transform: translate(-50%, -50%) skew(-12deg);
}

.gateway-folder:hover .folder-front { transform: rotateX(-18deg) translateY(1rem); }
.gateway-folder:hover .folder-paper--one { transform: translateY(-2.2rem) rotate(-2.5deg); }
.gateway-folder:hover .folder-paper--two { transform: translateY(-1.15rem) rotate(1.6deg); }

.time-story {
  --story-one: -72vw;
  --story-two: 66vw;
  --story-copy-opacity: 0;
  --story-folder-opacity: 0;
  --story-scale: 1.08;
  --story-px: 0px;
  --story-py: 0px;
  position: relative;
  height: 390svh;
  background: #120b08;
}

.time-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 68% 38%, rgba(255, 213, 39, .24), transparent 28%),
    linear-gradient(120deg, #2b1710, #6e3d29 52%, #1a0d09);
}

.time-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 186, 135, .13), rgba(15, 6, 3, .42)), radial-gradient(circle at 24% 26%, rgba(255,255,255,.08), transparent 26%);
}

.time-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.story-image {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  filter: saturate(.78) contrast(1.08);
  transform: translate3d(var(--story-px), var(--story-py), 0) scale(var(--story-scale));
  transition: transform .18s ease-out;
  pointer-events: none;
}

.story-line {
  position: absolute;
  z-index: 3;
  left: 0;
  width: max-content;
  margin: 0;
  color: #ffbb8d;
  font: 500 clamp(6rem, 14.7vw, 17rem)/.78 var(--sans);
  letter-spacing: -.075em;
  text-transform: lowercase;
  white-space: nowrap;
  will-change: transform, opacity;
  opacity: var(--story-copy-opacity);
  text-shadow: 0 .25rem 2rem rgba(49, 15, 3, .14);
}

.story-line--one { top: 28%; transform: translate3d(var(--story-one), 0, 0); }
.story-line--two { z-index: 5; top: 53%; transform: translate3d(var(--story-two), 0, 0); }
.story-line--three {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 3.8rem;
  width: 92%;
  translate: -50% 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 191, 149, .4);
  color: #ffc29b;
  font: 600 clamp(1.5rem, 3vw, 3.4rem)/1.05 var(--sans);
  letter-spacing: -.045em;
  text-align: center;
  opacity: var(--story-copy-opacity);
  margin: 0;
}

.story-label {
  position: absolute;
  z-index: 7;
  top: 5rem;
  left: var(--gutter);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffc29b;
}

.story-folder {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: clamp(12rem, 20vw, 18rem);
  height: clamp(8rem, 13vw, 12rem);
  opacity: var(--story-folder-opacity);
  transform: translate(-50%, -50%) scale(var(--story-folder-scale, .78)) rotateX(var(--folder-rx)) rotateY(var(--folder-ry));
  pointer-events: none;
}

.story-folder.is-ready { pointer-events: auto; }
.story-folder .folder-back, .story-folder .folder-front { box-shadow: 0 2rem 6rem rgba(0,0,0,.42); }
.story-folder .folder-front strong { font-size: clamp(2.8rem, 4.5vw, 4.6rem); }

.cursor.is-labeled { width: 5.4rem; height: 5.4rem; background: #fff; color: #111; mix-blend-mode: normal; }
.cursor.is-labeled::after { content: attr(data-label); font: 600 .55rem/1 var(--sans); letter-spacing: .09em; }

.portfolio-page { background: #0b0c0c; }
.portfolio-intro { min-height: 82svh; display: grid; align-content: end; padding: 9rem var(--gutter) 3rem; }
.portfolio-intro h1 { max-width: 10ch; font-size: var(--step-3); }
.portfolio-intro .lede { margin-left: auto; margin-top: 2rem; }
.portfolio-grid { padding: 0 var(--gutter) var(--section); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.project-card { position: relative; min-height: 68svh; overflow: hidden; background: #171817; isolation: isolate; }
.project-card:nth-child(3n) { grid-column: 1 / -1; min-height: 78svh; }
.project-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.58) contrast(1.12); transition: transform 1.1s var(--ease), filter .5s; }
.project-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.92)); }
.project-card:hover img { transform: scale(1.045); filter: grayscale(.2) brightness(.72); }
.project-copy { position: absolute; inset: auto 0 0; padding: 2rem; }
.project-copy span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acid); }
.project-copy h2 { margin: .7rem 0 .8rem; font: 400 clamp(3rem, 5vw, 6rem)/.84 var(--display); }
.project-copy p { max-width: 42rem; margin: 0; color: rgba(255,255,255,.72); }

@media (min-width: 761px) and (max-width: 1200px) {
  .story-image {
    inset: auto 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% bottom;
    transform-origin: 62% bottom;
  }
}

@media (max-width: 760px) {
  .work-gateway { height: 108svh; }
  .gateway-copy { min-height: 36rem; }
  .gateway-word { font-size: 57vw; }
  .gateway-copy > p { top: 17%; font-size: .88rem; }
  .gateway-scroll { bottom: 7%; font-size: .88rem; }
  .gateway-folder { width: min(84vw, 20rem); height: min(66vw, 15.5rem); }
  .gateway-folder .folder-back { inset: 2.8rem 1% 0; }
  .gateway-folder .folder-front { inset: 5.2rem 0 0; }
  .folder-paper { top: 4.35rem; }
  .time-story { height: 315svh; }
  .time-sticky { min-height: 34rem; }
  .story-image { object-fit: cover; object-position: 58% center; width: 100%; left: 0; }
  .story-folder { left: 100%; }
  .story-line { font-size: clamp(4.8rem, 22vw, 7.5rem); }
  .story-line { margin-left: 26vw; }
  .story-line--three { margin-left: 20vw; }
  .story-line--one { top: 30%; }
  .story-line--two { top: 52%; }
  .story-line--three { bottom: 5.5rem; width: calc(100% - 2rem); font-size: clamp(1.35rem, 6vw, 2.1rem); }
  .story-label { top: 4.5rem; left: 1rem; }
  .portfolio-grid { grid-template-columns: 1fr; padding-inline: 0; }
  .project-card, .project-card:nth-child(3n) { grid-column: auto; min-height: 72svh; }
  .project-copy { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work-gateway { --gateway-y: 0px; --gateway-scale: 1; --gateway-opacity: 1; --gateway-word-x: 0px; }
  .gateway-folder, .gateway-word, .folder-paper, .gateway-folder .folder-front { transition: none; }
  .story-line--one, .story-line--two { transform: none; }
  .story-line, .story-line--three { opacity: 1; }
  .story-folder { display: none; }
}