/* SportSB motion layer. Shared by the PHP site and the local preview. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.reveal{opacity:1;transform:none}
.motion-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:200;pointer-events:none}
.motion-toggle{position:fixed;bottom:18px;right:18px;z-index:80;display:flex;align-items:center;gap:9px;border:1px solid #ffffff38;border-radius:30px;background:#10161de8;color:#fff;backdrop-filter:blur(14px);padding:11px 16px;font-size:11px;letter-spacing:.04em;box-shadow:0 6px 25px #0003;cursor:pointer}
.motion-toggle::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
.motion-toggle[aria-pressed=true]::before{background:#8b969e}
.hero h1{perspective:900px}
.motion-word{display:inline-block;transform-origin:50% 100%}
.hero h1 > .motion-word{color:inherit}
.hero-wash::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 85% 20%,#ff6b261b,transparent 50%);pointer-events:none}
.hero-video,.hero-poster{scale:1.06;translate:0 var(--hero-shift,0px)}
.hero-kicker::after{content:'';height:1px;width:60px;background:linear-gradient(90deg,var(--accent),transparent)}
.motion-on .hero h1 span:not(.motion-word){text-shadow:0 0 60px #ff6b2620}
.motion-on .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--motion-ease),box-shadow .35s,background .25s}
.motion-on .btn::after{content:'';position:absolute;inset:-100% auto -100% -60%;width:30%;background:linear-gradient(90deg,transparent,#fff5,transparent);transform:rotate(25deg);pointer-events:none}
.motion-on .btn:hover::after{animation:button-sheen .7s ease}
.motion-on .btn:hover{box-shadow:0 10px 30px #ff6b2624;transform:translateY(-3px)}
@keyframes button-sheen{to{left:140%}}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--motion-ease)}
.nav a:hover::after,.nav a.motion-current::after{transform:scaleX(1)}
.nav a.motion-current{color:#fff}
.business-card,.video-card,.step,.scale-benefit,.photo-collage figure{transition:border-color .35s,box-shadow .35s,background .35s;position:relative}
.motion-on .business-card::after,.motion-on .step::after,.motion-on .scale-benefit::after{content:'';position:absolute;inset:0;background:radial-gradient(250px circle at var(--spot-x,50%) var(--spot-y,50%),#ff6b2615,transparent 75%);opacity:0;transition:opacity .35s;pointer-events:none}
.motion-on .business-card:hover::after,.motion-on .step:hover::after,.motion-on .scale-benefit:hover::after{opacity:1}
.motion-on .business-card:hover,.motion-on .step:hover,.motion-on .scale-benefit:hover,.motion-on .video-card:hover{border-color:#ff6b2680;box-shadow:0 18px 45px #0002}
.bi-icon{transition:transform .5s var(--motion-ease),color .3s}
.motion-on .business-card:hover .bi-icon{transform:translate(5px,-5px) rotate(-10deg);color:var(--accent)}
.video-card img{transition:transform .9s var(--motion-ease),opacity .4s}
.motion-on .video-card:hover img{transform:scale(1.07)}
.motion-on .video-card:hover .vid-play{box-shadow:0 0 0 10px #ff6b261b}
.photo-collage figure{overflow:hidden}.photo-collage img{transition:transform .8s var(--motion-ease)}
.motion-on .photo-collage figure:hover img{transform:scale(1.035)}
.timeline-btn,.theme-switch,.filter{transition:background .3s,color .3s,border-color .3s}
.timeline-btn .smallnum{transition:transform .4s var(--motion-ease)}
.motion-on .timeline-btn.active .smallnum{transform:translateX(4px)}
.telegram{transition:box-shadow .5s,border-color .5s}.motion-on .telegram:hover{border-color:#ffffff70;box-shadow:0 38px 80px #0009}
.plainlink{background:transparent;border-top:0;border-right:0;border-left:0}
.motion-off *, .motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .hero-video,.motion-off .hero-poster{scale:1;translate:none}
.motion-off .motion-progress{display:none}
@media(max-width:780px){.motion-toggle{bottom:12px;right:12px;padding:9px 12px;font-size:10px}.hero-video,.hero-poster{translate:none;scale:1.02}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-video,.hero-poster{scale:1;translate:none}}
