/* Motion takes its cues from a film gate, focus marks and playback. */
.hero-copy{isolation:isolate;background:#090a0b;overflow:hidden}
.hero-signal{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.95}
.hero-copy>.hero-top,.hero-copy>.hero-title,.hero-copy>.hero-bottom{position:relative;z-index:1}
.hero-top,.hero-bottom{background:linear-gradient(90deg,#090a0b95,transparent)}
.hero-copy h1{transition:transform .65s cubic-bezier(.2,.8,.2,1),text-shadow .5s}
.hero-copy h1 .hero-name{text-shadow:0 3px 24px #0008}
.hero-title:hover .hero-name{text-shadow:2px 0 #e7543855,-2px 0 #f4f3ed22,0 3px 28px #0008}
.hero-bottom a b{transition:transform .45s ease-out,color .3s}
.hero-bottom a:hover b{transform:rotate(90deg);color:#ff816b}
.stage-orbits{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.7}
.stage-orbits i{position:absolute;left:-20%;top:15%;width:140%;aspect-ratio:1/1;border:1px solid #ffc6a553;border-radius:50%;transform:rotateX(62deg) rotateZ(-28deg)}
.stage-orbits i:nth-child(2){inset:5% auto auto -10%;width:120%;border-color:#300e1840;transform:rotateX(67deg) rotateZ(30deg)}
.stage-orbits i:nth-child(3){left:-30%;top:9%;width:160%;border-style:dashed;border-color:#ffc6a528;transform:rotateX(58deg) rotateZ(-55deg)}
.stage-orbits i:before{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:#ffe7d1;box-shadow:0 0 12px 4px #ffd1b966}
.hero-stage{isolation:isolate;perspective:1100px;background:radial-gradient(ellipse at var(--light-x,70%) var(--light-y,25%),#ed6245 0%,#c83c2d 48%,#9d2922 100%)}
.hero-stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#180a0a18 1px,transparent 1px),linear-gradient(90deg,#180a0a18 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.stage-sprockets{position:absolute;inset:72px 11px 68px;z-index:-1;pointer-events:none}
.stage-sprockets:before,.stage-sprockets:after{content:"";position:absolute;top:0;bottom:0;width:5px;background:repeating-linear-gradient(180deg,#3c161640 0 12px,transparent 12px 27px)}
.stage-sprockets:before{left:0}.stage-sprockets:after{right:0}
.film-deck{position:relative;transform:rotate(-2deg);box-shadow:12px 22px 40px #2b080850,6px 9px 0 #280a0a38;transition:transform .45s ease-out,box-shadow .45s}
.hero-stage:hover .film-deck{transform:rotate(-2deg)}
.film-guides{position:absolute;inset:16px;z-index:3;pointer-events:none;opacity:.65}
.film-guides i{position:absolute;width:17px;height:17px;border-color:#f4f3ed;border-style:solid}
.film-guides i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.film-guides i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.film-guides i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}
.film-guides i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}
.film-timecode{position:absolute;top:27px;left:27px;z-index:3;font:12px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#f4f3ed;background:#0005;padding:4px 6px;pointer-events:none}
.focus-reticle{position:absolute;left:var(--focus-x,50%);top:var(--focus-y,50%);z-index:3;width:58px;height:40px;transform:translate(-50%,-50%);border:1px solid #f4f3ed88;opacity:0;pointer-events:none;transition:opacity .25s}
.focus-reticle:before,.focus-reticle:after{content:"";position:absolute;left:50%;top:50%;background:#f4f3ed99;transform:translate(-50%,-50%)}
.focus-reticle:before{width:11px;height:1px}.focus-reticle:after{width:1px;height:11px}
.hero-screen:before{content:"";position:absolute;inset:-30% -50%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 42%,#ffffff18 49%,transparent 56%);transform:translateX(-80%);opacity:0}
.film-shutter{position:absolute;inset:0;background:#080a0b;z-index:4;pointer-events:none;transform:scaleY(0);transform-origin:center}
.screen-label{left:27px;bottom:25px;z-index:3}
.hero-title{position:relative}
.hero-title:after{content:"";height:2px;width:clamp(70px,12vw,180px);background:var(--red);display:block;margin-top:23px;transform-origin:left}
.hero h1 .hero-studio{background:linear-gradient(105deg,transparent 25%,#f4f3eddd 47%,transparent 68%);background-size:350% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text}
.hero-copy:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:linear-gradient(transparent,#ffffff30 50%,transparent);pointer-events:none}
.work-card{position:relative;isolation:isolate;transform-style:preserve-3d;transition:border-color .25s,background .25s,transform .38s ease-out,box-shadow .38s;box-shadow:0 0 0 #0000}
.work-card:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,50%),#ffffff0e,transparent 75%);transition:opacity .25s}
.work-image:after{content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(#e56850,#e56850) left top/15px 1px no-repeat,linear-gradient(#e56850,#e56850) left top/1px 15px no-repeat,linear-gradient(#e56850,#e56850) right bottom/15px 1px no-repeat,linear-gradient(#e56850,#e56850) right bottom/1px 15px no-repeat;transition:opacity .25s}
.work-card:is(:hover,:focus-visible):before,.work-card:is(:hover,:focus-visible) .work-image:after{opacity:1}
.work-card:is(:hover,:focus-visible){border-color:#c3a299;box-shadow:0 15px 25px #0006}
.work-card:hover .work-meta h3{text-decoration:none}
.work-meta{position:relative}
.work-meta:after{content:"";position:absolute;left:18px;right:18px;bottom:15px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s ease-out}
.work-card:is(:hover,:focus-visible) .work-meta:after{transform:scaleX(1)}
.disciplines article{position:relative;overflow:hidden}
.disciplines article:before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s ease-out}
.disciplines article:hover:before{transform:scaleX(1)}
.disciplines article h3{transition:color .3s,transform .4s}
.disciplines article:hover h3{color:#ff8a70;transform:translateX(5px)}
.studio-word{position:relative}
.studio-word:after{content:"";position:absolute;right:0;bottom:-12px;width:28%;height:2px;background:var(--red);transform-origin:right}
.playing-bars{display:none;align-items:center;gap:2px;width:22px;height:16px;flex-shrink:0}
.playing-bars i{width:2px;height:8px;background:#ed765c;transform-origin:center}
.track-row[data-playing=true] .playing-bars{display:flex}
.track-row[data-playing=true] .track-number{display:none}
.track-row[data-playing=true] .track-title{color:#f4f3ed}
.track-row[data-playing=true]{border-top-color:#df402e66}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-copy h1{transform:translate3d(var(--name-x,0px),var(--name-y,0px),0)}
  .hero-stage[data-pointer=true] .film-deck{transform:rotate(-2deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
  .hero-screen:hover .focus-reticle{opacity:.75}
  .work-card[data-pointer=true]{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-3px)}
}
@media(prefers-reduced-motion:no-preference){
  html[data-page=home] .stage-orbits i{animation:optical-orbit 24s linear infinite}
  html[data-page=home] .stage-orbits i:nth-child(2){animation-direction:reverse;animation-duration:31s}
  html[data-page=home] .stage-orbits i:nth-child(3){animation-duration:39s}
  html[data-film-motion=paused] .stage-orbits i{animation-play-state:paused}
  html[data-page=home] .hero-name{animation:title-expose .7s cubic-bezier(.2,.8,.2,1) both}
  html[data-page=home] .hero-studio{animation:title-expose .8s .09s cubic-bezier(.2,.8,.2,1) both,letter-light 9s 1s ease-in-out infinite}
  html[data-page=home] .hero-title:after{animation:line-expose .8s .2s ease-out both}
  html[data-page=studio] .studio-word{animation:title-expose .7s cubic-bezier(.2,.8,.2,1) both}
  html[data-page=studio] .studio-word:after{animation:line-expose .8s .15s ease-out both}
  html[data-page=home][data-film-motion=playing] .hero-screen:before{animation:film-light 9s ease-in-out infinite}
  html[data-page=home][data-film-motion=paused] .hero-studio{animation-play-state:running,paused}
  .hero-screen.is-cut .film-shutter{animation:film-cut .27s ease-out}
  .fx-reveal{transition:opacity .5s ease-out,transform .5s ease-out,border-color .25s,background .25s,box-shadow .38s;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
  .fx-reveal:not(.is-ready){opacity:0;transform:translateY(15px)}
  .fx-reveal.is-ready{opacity:1}
  .track-row[data-playing=true] .playing-bars i{animation:playback-beat .65s ease-in-out infinite alternate}
  .playing-bars i:nth-child(2){animation-delay:-.3s!important}.playing-bars i:nth-child(3){animation-delay:-.5s!important}.playing-bars i:nth-child(4){animation-delay:-.15s!important}.playing-bars i:nth-child(5){animation-delay:-.45s!important}
  @keyframes title-expose{from{clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{clip-path:inset(0);transform:translateY(0)}}
  @keyframes line-expose{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes letter-light{0%,18%{background-position:100% 0}50%,100%{background-position:0% 0}}
  @keyframes film-light{0%,20%,100%{transform:translateX(-80%);opacity:0}35%{opacity:1}60%{transform:translateX(80%);opacity:0}}
  @keyframes film-cut{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  @keyframes playback-beat{from{transform:scaleY(.35)}to{transform:scaleY(1.5)}}
  @keyframes optical-orbit{0%{transform:rotateX(62deg) rotateY(-20deg) rotateZ(-28deg)}50%{transform:rotateX(70deg) rotateY(18deg) rotateZ(152deg)}100%{transform:rotateX(62deg) rotateY(-20deg) rotateZ(332deg)}}
}
@media(max-width:600px){
  .hero-signal{opacity:.7}
  .stage-orbits{opacity:.45}
  .hero-title:after{margin-top:10px;width:72px}
  .stage-sprockets{inset:63px 5px 52px}.stage-sprockets:before,.stage-sprockets:after{width:3px}
  .film-guides{inset:12px}.film-guides i{width:12px;height:12px}
  .film-timecode{left:20px;top:20px;font-size:12px}
  .screen-label{left:20px;bottom:18px}
  .hero-copy:after{display:none}
  .studio-word:after{bottom:-8px;width:25%}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy h1{transform:none!important;text-shadow:none!important}
  .stage-orbits{opacity:.35}
  .hero h1 .hero-studio{background:none}
  .film-shutter,.focus-reticle,.hero-screen:before{display:none}
  .fx-reveal{opacity:1!important;transform:none!important}
  .film-deck,.work-card{transform:none!important}
  .playing-bars i{height:6px}
  .playing-bars i:nth-child(2),.playing-bars i:nth-child(4){height:12px}
}