/* Shared cinematic layer. Content remains visible when animation is unavailable. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
body{overflow-x:clip}
.motion-toggle{position:fixed;bottom:22px;left:22px;z-index:15;min-height:38px;padding:9px 13px;border:1px solid #ffffff45;border-radius:2px;background:#202932ed;color:#fff;font:11px/1.4 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 12px #0002}
.motion-toggle[hidden]{display:none}
.hero-content{transform:translateY(var(--hero-offset,0px))}
.brand-banner{background-position:center calc(50% + var(--banner-shift,0px));isolation:isolate}
.brand-banner:before{background:linear-gradient(110deg,#0d1723c9 10%,#101b27a6 42%,#e69a5e3d 50%,#101b27a6 58%,#0d1723c9 90%);background-size:240% 100%}
.hero-shade:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff1c 49%,#fda57124 51%,transparent 66%);transform:translateX(120%);pointer-events:none}
.brand-banner:after,.industrial-hero:after{transform-origin:right bottom}
.section-heading h2:after{transform-origin:left center}
.coating-card,.gallery-card,.video-card,.service-grid article,.product-nav>a{transform-origin:center center;transition:transform .75s var(--motion-ease),box-shadow .75s ease,border-color .5s ease}
.coating-card:hover,.gallery-card:hover,.video-card:hover,.service-grid article:hover{transform:translateY(-11px);box-shadow:0 22px 45px #14202b24;border-color:#c48c6f}
.photo-open{isolation:isolate}
.photo-open:after{content:'';position:absolute;inset:-30% -60%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff44 50%,transparent 60%);transform:translateX(-125%);transition:transform 1.3s var(--motion-ease)}
.photo-open:hover:after,.photo-open:focus-visible:after{transform:translateX(125%)}
.button{position:relative;isolation:isolate;overflow:hidden}
.button:after{content:'';position:absolute;inset:-60% -70%;background:linear-gradient(115deg,transparent 42%,#fff5 50%,transparent 58%);transform:translateX(-120%);transition:transform 1s var(--motion-ease);pointer-events:none}
.button:hover:after,.button:focus-visible:after{transform:translateX(120%)}
.button>span,.coating-card span,.text-link>span{transition:transform .5s var(--motion-ease)}
.button:hover>span,.text-link:hover>span{transform:translateX(6px)}
.coating-card:hover span{transform:translateX(5px)}
.lightbox[open]::backdrop{animation:cinema-backdrop .7s ease both}
@media(prefers-reduced-motion:no-preference){
 .motion-ready .brand-banner:before{animation:cinema-banner 5.5s 1s ease both}
 .motion-ready .brand-banner:after,.motion-ready .industrial-hero:after{animation:cinema-angle 2.1s var(--motion-ease) both}
 .motion-ready .hero-shade:after{animation:cinema-sweep 4.5s .8s ease both}
 .motion-ready .hero-frame.active{animation:cinema-drift 10.5s ease-out both}
 .motion-ready .hero-frame{transition:opacity 2s ease}
 .motion-ready .industrial-hero.paused .hero-frame.active{animation-play-state:paused}
 .motion-ready .motion-arrived.section-heading h2:after{animation:cinema-line 1.6s .25s var(--motion-ease) backwards}
 .hero-controls .hero-dot.active{position:relative;overflow:hidden}
 .motion-ready .hero-controls .hero-dot.active:after{content:'';position:absolute;bottom:2px;left:4px;right:4px;height:2px;background:#a74721;transform-origin:left;animation:cinema-progress 9s linear infinite}
 .industrial-hero.paused .hero-controls .hero-dot.active:after{animation-play-state:paused}
}
@keyframes cinema-angle{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
@keyframes cinema-line{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
@keyframes cinema-banner{from{background-position:100% center}to{background-position:0% center}}
@keyframes cinema-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes cinema-drift{from{transform:scale(1.03) translateX(1.3%)}to{transform:scale(1.16) translateX(-1.3%)}}
@keyframes cinema-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cinema-backdrop{from{background-color:#0008}to{background-color:#000d}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}
@media(max-width:760px){
 .motion-toggle{bottom:14px;left:14px;font-size:10px;padding:8px 10px;min-height:34px}
 .hero-content{transform:none}
 .motion-ready .hero-frame.active{animation-name:cinema-drift-small}
 .coating-card:hover,.gallery-card:hover,.video-card:hover,.service-grid article:hover{transform:none;box-shadow:none}
}
@keyframes cinema-drift-small{from{transform:scale(1.02)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-content{transform:none}
 .coating-card:hover,.gallery-card:hover,.video-card:hover,.service-grid article:hover{transform:none}
 .motion-toggle{display:none}
}