@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  --paper:#e8e0d1;
  --paper-dark:#cfc5b2;
  --ink:#171612;
  --rust:#9d3d2e;
  --blue:#486b83;
  --max:1500px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:"Barlow Condensed",Arial,sans-serif;overflow-x:hidden;
}

.scroll-sequence{height:400vh;position:relative}

.sticky-stage{
  position:sticky;top:0;height:100vh;min-height:100svh;overflow:hidden;
  background:var(--paper);isolation:isolate;
}


.paper-layer,.grain-layer,.edge-layer{
  position:absolute;inset:-8%;pointer-events:none;
}

.paper-layer{
  z-index:-4;
  background:
    radial-gradient(circle at 18% 12%, rgba(72,54,30,.10) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 68%, rgba(72,54,30,.07) 0 1px, transparent 1.5px),
    linear-gradient(115deg, rgba(255,255,255,.25), transparent 36%, rgba(100,72,40,.04)),
    var(--paper);
  background-size:19px 22px,29px 33px,100% 100%,auto;
  transform:scale(1.08);
}

.grain-layer{
  z-index:8;opacity:.16;mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.08) 5px, transparent 6px 10px),
    radial-gradient(circle, rgba(0,0,0,.3) 0 1px, transparent 1.4px);
  background-size:auto,11px 13px;
}

.edge-layer{
  z-index:7;
  box-shadow:inset 0 0 110px rgba(36,28,18,.22),inset 0 0 240px rgba(36,28,18,.12);
}

.scene{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(18px,4vw,60px);will-change:transform,opacity,filter;
}

.scene-one{z-index:1;opacity:1}
.scene-two{z-index:2;opacity:0}
.scene-three{z-index:3;opacity:0;transform:scale(.94) translateY(7vh)}

.scene-one h1,.scene-two h2,.brand-story h2,.merch-copy h2{
  margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.9;
}

.scene-one h1,.scene-two h2{
  width:min(95vw,1550px);text-align:center;text-wrap:balance;
  text-shadow:1px 1px 0 rgba(0,0,0,.08),0 0 1px rgba(0,0,0,.35);
}

.scene-one h1{font-size:clamp(72px,11.7vw,210px)}
.scene-two h2{font-size:clamp(66px,10vw,180px);max-width:1400px}

.poster-shell{
  width:min(80vw,900px);max-height:92vh;padding:clamp(6px,1vw,12px);
  background:#24221c;box-shadow:0 34px 100px rgba(0,0,0,.30),0 0 0 1px rgba(0,0,0,.35);
  transform:none;will-change:transform;
}

.poster-shell img{
  display:block;width:100%;max-height:calc(92vh - 24px);
  object-fit:contain;background:var(--paper);
}

.scroll-cue{
  position:absolute;left:50%;bottom:18px;z-index:12;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-weight:700;letter-spacing:.16em;font-size:11px;opacity:.74;
}

.scroll-cue i{
  display:block;width:1px;height:32px;background:var(--ink);transform-origin:top;
  animation:pulse 1.5s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{transform:scaleY(.3);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}

/* BRAND STORY */
.brand-story{
  width:min(calc(100% - 36px),var(--max));margin:auto;
  padding:clamp(90px,11vw,170px) 0;
  border-top:3px solid var(--ink);
}

.story-kicker{
  margin-bottom:clamp(40px,6vw,90px);
  font-weight:700;letter-spacing:.2em;font-size:12px;
}

.story-grid{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(45px,8vw,130px);align-items:start;
}

.eyebrow{
  margin:0 0 16px;font-weight:700;letter-spacing:.19em;font-size:13px;
}

.brand-story h2{
  font-size:clamp(54px,6.2vw,105px);
  max-width:900px;
}

blockquote{
  margin:28px 0 0;
  display:inline-block;
  width:max-content;
  max-width:100%;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(26px,5.8vw,92px);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--rust);
  transform:none;
  white-space:nowrap;
}

.story-copy{
  padding-top:clamp(10px,8vw,120px);
  font-size:clamp(21px,2vw,29px);line-height:1.05;
}

.story-copy .lead{font-weight:700;font-size:1.18em}

.brand-points{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:45px;
}

.brand-points div{
  border-top:3px solid var(--ink);
  padding-top:12px;display:flex;flex-direction:column;gap:4px;
}

.brand-points strong{
  color:var(--rust);font-family:"Anton",Impact,sans-serif;font-size:27px;font-weight:400;
}

.brand-points span{font-size:13px;font-weight:700;letter-spacing:.1em}

/* MERCH */
.merch-section{
  position:relative;
  width:min(calc(100% - 36px),var(--max));
  margin:0 auto 90px;
  padding:clamp(70px,9vw,130px);
  background:#1b1a17;color:var(--paper);
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(35px,6vw,90px);align-items:center;
  overflow:hidden;
}

.merch-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.08) 6px,transparent 7px 11px),
    radial-gradient(circle,rgba(255,255,255,.24) 0 1px,transparent 1.3px);
  background-size:auto,17px 19px;
}

.merch-copy,.merch-preview{position:relative;z-index:1}

.merch-copy h2{font-size:clamp(58px,6.7vw,110px)}
.merch-copy p:not(.eyebrow){
  max-width:510px;font-size:clamp(20px,2vw,27px);line-height:1.05;
}

.coming-stamp{
  display:inline-block;margin-top:20px;padding:12px 18px;
  border:3px solid var(--paper);font:32px/1 "Anton",Impact,sans-serif;
  letter-spacing:.04em;transform:rotate(-2deg);color:#e0bc52;
}

.merch-preview{
  margin:0;background:var(--paper);padding:10px;
  box-shadow:15px 18px 0 rgba(157,61,46,.75);
  transform:rotate(.7deg);
}

.merch-preview img{display:block;width:100%;height:auto}
.merch-preview figcaption{
  color:var(--ink);text-align:center;padding:10px 5px 3px;
  font-size:11px;font-weight:700;letter-spacing:.14em;
}

footer{
  width:min(calc(100% - 36px),var(--max));margin:auto;
  border-top:2px solid var(--ink);padding:26px 0 34px;
  display:flex;justify-content:space-between;gap:20px;
  font-size:12px;font-weight:700;letter-spacing:.12em;
}

.reveal{
  opacity:0;transform:translateY(45px);
  transition:opacity .8s ease,transform .8s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .scroll-sequence{height:365vh}
  .scene-one h1{font-size:clamp(58px,16vw,120px)}
  .scene-two h2{font-size:clamp(54px,14vw,105px)}
  .poster-shell{
    width:min(92vw,720px);
    transform:rotate(0deg);
  }
  .story-grid,.merch-section{grid-template-columns:1fr}
  .story-copy{padding-top:0}
  .brand-points{margin-top:35px}
  .merch-section{padding:55px 24px}
}

@media(max-width:560px){
  .scroll-sequence{height:335vh}
  .scene{padding:14px}
  .scene-one h1{font-size:clamp(52px,17vw,88px)}
  .scene-two h2{font-size:clamp(48px,15vw,80px)}
  .poster-shell{
    width:95vw;
    padding:5px;
    transform:rotate(0deg);
  }
  .brand-points{grid-template-columns:1fr}
  footer{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-cue i{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}