:root {
  --fired: #c4714a;
  --ochre: #c8956a;
  --umber: #6b4226;
  --linen: #f5ede3;
  --clay: #d4956b;
  --charcoal: #3d3028;
  --sienna: #a0522d;
  --paper: #faf6f0;
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--linen);
  color: var(--umber);
  font-family: "Karla", sans-serif;
}

body { cursor: ew-resize; }

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

.scroll-stage {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  background: var(--linen);
}

.scroll-stage::-webkit-scrollbar { display: none; }

.panel {
  position: relative;
  height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--linen);
}

.threshold { width: 100vw; }
.manifesto { width: 120vw; display: grid; grid-template-columns: 2fr 5fr 3fr; gap: 5vw; padding: 0 8vw; }
.work { width: 180vw; padding: 8vh 8vw; }
.process { width: 140vw; }
.studio { width: 100vw; display: grid; grid-template-columns: 60% 40%; }

.watercolor-circle {
  border-radius: 50%;
  background:
    radial-gradient(ellipse 90% 80% at 40% 35%, rgba(196, 113, 74, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 70% 90% at 65% 60%, rgba(200, 149, 106, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 95% 95% at 50% 50%, rgba(212, 149, 107, 0.15) 0%, transparent 80%);
  filter: blur(2px) contrast(1.05);
  mix-blend-mode: multiply;
}

.threshold-circle {
  position: absolute;
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);
  left: calc(30vw - min(30vw, 30vh));
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  animation: circleEnter 1.2s var(--elastic) forwards;
}

.threshold-copy {
  position: absolute;
  top: 61.8%;
  left: 35vw;
  transform: translate(-20px, -50%);
  animation: copyEnter .8s var(--elastic) .15s forwards;
  opacity: 0;
}

h1, h2 {
  font-family: "DM Sans", sans-serif;
  margin: 0;
  color: var(--umber);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .9; font-weight: 700; }
.threshold-copy p { margin: 1rem 0 0; font-size: 1.125rem; color: var(--charcoal); }

.scroll-cue {
  position: absolute;
  right: 4vw;
  bottom: 5vh;
  display: flex;
  gap: .75rem;
  align-items: center;
  font-family: "Space Mono", monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sienna);
  opacity: 0;
  animation: cueEnter .9s var(--elastic) 2s forwards;
}

.panel-wash {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 48% 50%, rgba(200, 149, 106, 0.13), transparent 62%);
  opacity: .55;
}

.manifesto-label, .section-label {
  font-family: "Space Mono", monospace;
  color: var(--charcoal);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.manifesto-label {
  align-self: center;
  transform: rotate(-90deg);
  z-index: 1;
}

.manifesto-text {
  z-index: 1;
  align-self: center;
  margin-top: 10vh;
  max-width: 760px;
  color: var(--umber);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: .01em;
}

.manifesto-text p {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s var(--elastic);
}

.manifesto.in-view .manifesto-text p { clip-path: inset(0 0 0 0); }
.manifesto.in-view .manifesto-text p:nth-child(2) { transition-delay: .12s; }
.manifesto.in-view .manifesto-text p:nth-child(3) { transition-delay: .24s; }

.manifesto-mark { position: relative; z-index: 1; align-self: stretch; }
.tall-wash {
  position: absolute;
  width: 36%;
  height: 100vh;
  right: 15%;
  top: 0;
  background:
    linear-gradient(90deg, rgba(200,149,106,.05), rgba(200,149,106,.12), rgba(200,149,106,.04)),
    radial-gradient(ellipse at 50% 40%, rgba(212,149,107,.16), transparent 70%);
  filter: blur(1px);
}
.bauhaus-triangle, .comp-triangle {
  width: 0;
  height: 0;
  border-left: 82px solid transparent;
  border-right: 82px solid transparent;
  border-bottom: 142px solid rgba(200, 149, 106, .42);
  filter: blur(1px);
  mix-blend-mode: multiply;
}
.bauhaus-triangle { position: absolute; top: 43%; right: calc(15% + 18% - 82px); }

.section-label { position: absolute; left: 8vw; top: 5vh; }
.work-grid {
  position: relative;
  height: 84vh;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 24px;
}

.work-card {
  position: relative;
  border-radius: 4px;
  padding: 1.4rem;
  color: var(--charcoal);
  overflow: hidden;
  opacity: 0;
  transform: translateX(40px) scale(.9);
  transition: opacity .7s var(--elastic), transform .9s var(--elastic);
}
.work.in-view .work-card { opacity: 1; transform: translateX(0) scale(1); }
.work-card::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: var(--wash);
  filter: blur(7px) contrast(1.08);
  mix-blend-mode: multiply;
}
.work-card h2, .work-card p, .work-card i { position: relative; z-index: 1; }
.work-card h2 { font-size: 1.5rem; line-height: 1; margin-top: 3.8rem; }
.work-card p { font-size: .9rem; line-height: 1.45; max-width: 18rem; }
.work-card i { display: block; width: 28px; height: 28px; background: rgba(107,66,38,.38); mix-blend-mode: multiply; }
.work-card[data-shape="circle"] i { border-radius: 50%; background: rgba(196,113,74,.42); }
.work-card[data-shape="triangle"] i { width: 0; height: 0; background: none; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 29px solid rgba(200,149,106,.55); }
.card-one { grid-column: 1 / 3; grid-row: 2 / 5; --wash: radial-gradient(ellipse at 40% 35%, rgba(196,113,74,.25), transparent 70%), rgba(250,246,240,.45); transition-delay: .04s; }
.card-two { grid-column: 3 / 5; grid-row: 1 / 3; --wash: radial-gradient(ellipse at 60% 50%, rgba(200,149,106,.25), transparent 70%), rgba(245,237,227,.65); transition-delay: .12s; }
.card-three { grid-column: 5 / 6; grid-row: 3 / 6; --wash: radial-gradient(ellipse at 45% 55%, rgba(107,66,38,.18), transparent 72%), rgba(250,246,240,.5); transition-delay: .2s; }
.card-four { grid-column: 6 / 8; grid-row: 1 / 4; --wash: radial-gradient(ellipse at 35% 42%, rgba(212,149,107,.27), transparent 72%), rgba(245,237,227,.62); transition-delay: .28s; }
.card-five { grid-column: 2 / 4; grid-row: 5 / 7; --wash: radial-gradient(ellipse at 50% 50%, rgba(160,82,45,.19), transparent 68%), rgba(250,246,240,.55); transition-delay: .36s; }
.card-six { grid-column: 4 / 6; grid-row: 6 / 7; --wash: radial-gradient(ellipse at 35% 35%, rgba(196,113,74,.22), transparent 75%), rgba(245,237,227,.65); transition-delay: .44s; }
.card-seven { grid-column: 7 / 9; grid-row: 4 / 7; --wash: radial-gradient(ellipse at 50% 50%, rgba(200,149,106,.25), transparent 70%), rgba(250,246,240,.5); transition-delay: .52s; }

.process-line { position: absolute; left: 8%; right: 8%; top: 50vh; height: 2px; background: rgba(200,149,106,.34); }
.process-line span { display: block; width: 100%; height: 100%; background: var(--ochre); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--elastic); }
.process.in-view .process-line span { transform: scaleX(1); }
.stage { position: absolute; top: calc(50vh - 24px); width: 240px; margin-left: -120px; text-align: center; }
.stage-one { left: 18%; } .stage-two { left: 39%; } .stage-three { left: 61%; } .stage-four { left: 82%; }
.stage h2 { font-size: 1.25rem; font-weight: 500; margin: -96px 0 72px; }
.stage:nth-child(odd) h2 { margin: 72px 0 1rem; }
.stage p { font-size: .9rem; line-height: 1.45; color: var(--charcoal); }
.stage-shape { width: 48px; height: 48px; margin: 0 auto; filter: blur(.4px); mix-blend-mode: multiply; }
.circle-shape { border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, rgba(107,66,38,.55), transparent 75%), rgba(107,66,38,.25); }
.triangle-shape { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 48px solid rgba(200,149,106,.55); background: none; }
.square-shape { background: radial-gradient(ellipse at 55% 45%, rgba(212,149,107,.36), transparent 70%), rgba(200,149,106,.33); }
.diamond-shape { transform: rotate(45deg); background: radial-gradient(ellipse at 45% 45%, rgba(196,113,74,.46), transparent 72%), rgba(196,113,74,.3); }
.process.in-view .stage-shape { animation: pulse 3s var(--elastic) infinite; }

.studio-composition { position: relative; display: grid; place-items: center; background: var(--paper); }
.comp-circle { position: absolute; width: 280px; height: 280px; left: 19%; top: 24%; }
.comp-triangle { position: absolute; left: 42%; top: 30%; transform: rotate(12deg); border-left-width: 140px; border-right-width: 140px; border-bottom-width: 242px; }
.comp-rect { position: absolute; width: 160px; height: 300px; left: 36%; top: 39%; background: radial-gradient(ellipse at 40% 30%, rgba(107,66,38,.27), transparent 72%), rgba(107,66,38,.16); filter: blur(1px); mix-blend-mode: multiply; transform: rotate(-8deg); }
.studio-copy { align-self: center; max-width: 32ch; padding-right: 8vw; }
.studio-copy h2 { font-size: 2rem; margin-bottom: 1.4rem; }
.studio-copy p { font-size: 1.125rem; line-height: 1.65; color: var(--umber); }
.studio-copy a { position: relative; display: inline-block; margin-top: 1.5rem; font-family: "Space Mono", monospace; font-size: .75rem; letter-spacing: .12em; color: var(--sienna); text-decoration: none; text-transform: uppercase; }
.studio-copy a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 5 C 15 0, 25 8, 39 3 S 67 5, 81 3 S 103 0, 119 4' fill='none' stroke='%23a0522d' stroke-width='2'/%3E%3C/svg%3E") repeat-x; background-size: 80px 5px; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--elastic); }
.studio-copy a:hover::after { transform: scaleX(1); }
.studio-copy small { display: block; margin-top: 3rem; color: var(--charcoal); font-family: "Space Mono", monospace; font-size: .75rem; }

.progress-wrap { position: fixed; left: 0; right: 0; bottom: 0; height: 24px; z-index: 30; pointer-events: none; }
.progress-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--fired); transition: width .12s linear; }
.panel-name { position: absolute; bottom: 7px; transform: rotate(-90deg); transform-origin: left bottom; font-family: "Space Mono", monospace; font-size: .6rem; letter-spacing: .12em; color: rgba(61,48,40,.7); text-transform: uppercase; }
.name-one { left: 2%; } .name-two { left: 20%; } .name-three { left: 42%; } .name-four { left: 72%; } .name-five { left: 94%; }

@keyframes circleEnter { to { transform: translateY(-50%) scale(1); } }
@keyframes copyEnter { to { opacity: 1; transform: translate(0, -50%); } }
@keyframes cueEnter { to { opacity: 1; transform: translateX(0); } from { opacity: 0; transform: translateX(-12px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 760px) {
  .manifesto { width: 160vw; grid-template-columns: 1fr 4fr 1.4fr; padding: 0 7vw; }
  .work { width: 240vw; }
  .process { width: 190vw; }
  .studio { width: 140vw; }
  .work-card { padding: 1rem; }
  .stage { width: 190px; margin-left: -95px; }
}