.scene{position:relative;height:220vh}
.scene.scene-hero{height:100vh;height:100dvh}
.scene-sticky,.project-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.hero-paper{height:100%;background:var(--paper);color:var(--ink);position:relative;overflow:hidden}
.poster-grid:before,.poster-grid:after{content:"";position:absolute;inset:0;pointer-events:none}
.poster-grid:before{inset:-9vw;background-image:linear-gradient(rgba(17,17,15,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.09) 1px,transparent 1px);background-size:9vw 9vw;animation:grid-slide 11s linear infinite}
@keyframes grid-slide{0%{transform:translate(0,0) scale(1)}25%{transform:translate(2.25vw,2.25vw) scale(1.045)}50%{transform:translate(4.5vw,4.5vw) scale(1)}75%{transform:translate(6.75vw,6.75vw) scale(1.045)}100%{transform:translate(9vw,9vw) scale(1)}}
.poster-grid:after{background:radial-gradient(circle at 76% 40%,rgba(116,172,223,.11),transparent 26%);transform-origin:76% 40%;animation:glow-pulse 5.5s ease-in-out infinite alternate}
@keyframes glow-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.16);opacity:1}}
.hero-kicker{position:absolute;left:24px;top:92px;font-size:10px;z-index:3}
.hero-title-wrap{position:absolute;left:3vw;top:17vh;z-index:2}
.hero-title{margin:0;font-family:"SAIBA-45",var(--display);font-size:clamp(96px,16vw,260px);letter-spacing:-.02em;line-height:.82;display:flex;flex-direction:column}
.hero-title-holder{position:relative}
.hero-estudio{position:absolute;left:28vw;bottom:-.28em;display:flex;transform:rotate(-7deg);transform-origin:left bottom;font-family:"Sefa","SAIBA-45",var(--display);font-size:clamp(44px,6vw,104px);line-height:1;letter-spacing:.04em;color:#F6B40E;pointer-events:none;white-space:nowrap}
.hero-estudio span{display:inline-block;clip-path:inset(0 100% 0 0);opacity:0}
@media(prefers-reduced-motion:no-preference){
  .scene-hero.is-in .hero-estudio span{animation:estudio-letter .42s linear forwards}
  .scene-hero.is-in .hero-estudio span:nth-child(1){animation-delay:.55s}
  .scene-hero.is-in .hero-estudio span:nth-child(2){animation-delay:.68s}
  .scene-hero.is-in .hero-estudio span:nth-child(3){animation-delay:.81s}
  .scene-hero.is-in .hero-estudio span:nth-child(4){animation-delay:.94s}
  .scene-hero.is-in .hero-estudio span:nth-child(5){animation-delay:1.07s}
  .scene-hero.is-in .hero-estudio span:nth-child(6){animation-delay:1.2s}
  .scene-hero.is-in .hero-estudio span:nth-child(7){animation-delay:1.33s}
}
@keyframes estudio-letter{to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero-estudio span{clip-path:none;opacity:1}
}
.hero-title span:first-child{color:var(--blue)}
.hero-title span:last-child{margin-left:13vw}
.hero-serif{position:absolute;right:4vw;bottom:13vh;max-width:560px;text-align:right;font-size:clamp(28px,3vw,52px);margin:0;line-height:.92;z-index:2}
.hero-side{position:absolute;right:22px;top:23vh;display:flex;flex-direction:column;gap:12px;writing-mode:vertical-rl;font-size:9px;z-index:4}
.hero-bottom{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;font-size:9px;z-index:4}
.hero-cross{position:absolute;font:30px var(--mono);z-index:4;animation:cross-spin 9s linear infinite}
.hero-cross--1{left:18px;top:18vh;animation-duration:7s;animation-delay:-1s}
.hero-cross--2{right:18px;top:14vh;animation-duration:9.5s;animation-delay:-4.2s}
.hero-cross--3{left:18px;bottom:12vh;animation-duration:12s;animation-delay:-7.5s}
.hero-cross--4{right:18px;bottom:12vh;animation-duration:8s;animation-delay:-2.6s}
@keyframes cross-spin{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.2,1)}6%{transform:rotate(720deg)}100%{transform:rotate(720deg)}}
.scene-hero:not(.is-in) .poster-grid:before,.scene-hero:not(.is-in) .poster-grid:after,.scene-hero:not(.is-in) .hero-cross{animation-play-state:paused}

@media(max-width:900px){
  .hero-title{font-size:26vw}.hero-title span:last-child{margin-left:8vw}.hero-estudio{left:30vw;font-size:13vw;bottom:-.55em}.hero-serif{right:18px;top:auto;bottom:26vh;font-size:7.5vw;max-width:78vw;text-align:right}
  .hero-cross--1,.hero-cross--2{top:15vh}
  .hero-side{right:10px;top:16vh;font-size:8px}
  .hero-bottom{font-size:7px}.hero-bottom span:last-child{max-width:58vw;text-align:right}
}