/* The supplied project artwork becomes a continuous, full-width hero backdrop. */
.hero{isolation:isolate;overflow:hidden;background:#080808}
.hero-main,.hero-bottom{z-index:2}
.hero-project-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.hero-project-mural{position:absolute;inset:-14% -9%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.1vw,20px);opacity:.78;filter:blur(5px) saturate(.8);transform:rotate(-5deg);translate:var(--project-x,0px) var(--project-y,0px)}
.hero-project-scene{min-width:0;min-height:0;overflow:hidden;background:#161616}
.hero-project-scene img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero-project-scene:nth-child(5) img{object-position:75% 50%}
.hero-project-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#080808c9 0%,#08080880 28%,#08080888 58%,#080808e8 100%)}
.hero h1{text-shadow:0 3px 28px #0005}
.hero-description{color:#f4f3ef;text-shadow:0 2px 14px #0008}
.hero>.mouse-atmosphere{z-index:1}
.intro-done .hero-project-scene img{animation:projectBackdropSettle 4s cubic-bezier(.16,1,.3,1) both}
@keyframes projectBackdropSettle{from{transform:scale(1.16)}to{transform:scale(1.04)}}
@media(max-width:650px){
 .hero-project-mural{inset:-12% -16%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;filter:blur(4px) saturate(.8);transform:rotate(-6deg)}
 .hero-project-backdrop:after{background:linear-gradient(180deg,#080808c9 0%,#08080880 24%,#08080896 60%,#080808ed 100%)}
}
@media(prefers-reduced-motion:reduce){.hero-project-mural{translate:none}.intro-done .hero-project-scene img{animation:none}}