/* One short opening, followed by the existing autonomous sculpture motion. */
.hero-opening{position:absolute;inset:0;z-index:6;background:#171717;color:#e8e6e1;pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);clip-path:inset(0 0 100%);animation:gallery-opening 1.65s cubic-bezier(.76,0,.24,1) both}
.hero-opening-word{font-family:'Outfit',var(--sans);font-size:clamp(48px,11.5vw,210px);font-weight:500;letter-spacing:-.065em;line-height:1.15;overflow:hidden}
.hero-opening-word>span{display:block;animation:gallery-signature 1.1s cubic-bezier(.16,1,.3,1) both}
.hero-opening-note{font-size:10px;letter-spacing:.35em;line-height:1.8;margin-top:18px;display:flex;align-items:center;gap:25px}.hero-opening-note:before{content:'';width:52px;height:1px;background:#777}
.hero-stage{position:absolute;inset:0;z-index:-1;pointer-events:none;isolation:isolate;animation:gallery-sculpture 2.8s .25s cubic-bezier(.16,1,.3,1) both;transform-origin:72% 60%}
.hero-stage .hero-art{z-index:0}
.hero h1>span{animation:gallery-title 1.65s .7s cubic-bezier(.16,1,.3,1) both}
.hero h1 em{animation:gallery-title 1.9s .85s cubic-bezier(.16,1,.3,1) both,ink-reflection 5.5s 2.6s ease-in-out infinite}
.hero .overline{animation:gallery-copy 1.3s 1.05s both}
.hero-description{animation:gallery-copy 1.3s 1.25s both}
.hero-label,.hero-footer{animation:gallery-copy 1.25s 1.1s both}
.hero-description .underlined-link{padding-bottom:13px;gap:64px}
.hero-description .underlined-link>span{font-size:24px}
.header{animation:gallery-navigation .9s .7s both}
@keyframes gallery-navigation{from{opacity:0}to{opacity:1}}
@keyframes gallery-opening{0%,24%{clip-path:inset(0 0 0)}100%{clip-path:inset(0 0 100%)}}
@keyframes gallery-signature{from{transform:translateY(100%);opacity:.2}to{transform:none;opacity:1}}
@keyframes gallery-sculpture{from{opacity:.45;transform:scale(1.14) translateY(28px)}to{opacity:1;transform:none}}
@keyframes gallery-title{from{opacity:0;transform:translateY(54px);clip-path:inset(0 -10% 100% -10%)}to{opacity:1;transform:none;clip-path:inset(-20% -10% -30% -10%)}}
@keyframes gallery-copy{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1060px){
 .hero{padding-top:142px;min-height:790px}
 .hero-copy{max-width:65%;padding-top:26px}
 .hero h1{font-size:clamp(100px,9vw,164px)}
 .hero h1>span{font-size:.94em;letter-spacing:-.055em}
 .hero h1 em{font-size:1.3em;letter-spacing:-.04em}
 .hero-description{margin-top:32px}
 .hero-description p{font-size:16px;line-height:1.85}
 .hero-stage .hero-art{inset:105px -3% -36px 3%}
 .hero-label>span:last-child{font-size:9px;letter-spacing:1.1px}
}
@media(min-width:1800px){.hero h1{font-size:clamp(164px,8.4vw,195px)}}
@media(max-width:680px){
 .hero-opening-word{font-size:12.3vw;letter-spacing:-.055em}
 .hero-opening-note{font-size:8px;letter-spacing:.24em;gap:16px}
 .hero-stage{transform-origin:50% 75%;animation-name:gallery-sculpture-mobile}
 .hero h1>span{animation-delay:.55s}.hero h1 em{animation-delay:.7s,2.3s}
 .hero-description .underlined-link{gap:42px;padding-bottom:10px}
 .hero-description .underlined-link>span{font-size:21px}
}
@keyframes gallery-sculpture-mobile{from{opacity:.35;transform:scale(.94) translateY(18px)}to{opacity:1;transform:none}}
/* Stopping motion always reveals the finished composition, including mid-opening. */
.motion-paused .hero-opening{display:none}
.motion-paused .hero-stage,.motion-paused .hero-label,.motion-paused .hero-footer{animation:none!important;opacity:1;transform:none}
.motion-paused .hero h1>span,.motion-paused .hero h1 em{clip-path:none!important}
.motion-paused .header{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){
 .hero-opening{display:none}.header,.hero-stage,.hero h1>span,.hero h1 em,.hero .overline,.hero-description,.hero-label,.hero-footer{animation:none!important;opacity:1;transform:none;clip-path:none}
}
