/* Scena Studio — home-m: rules only this page uses */
.sec { padding: 0 18px; }
@keyframes bar-grow { from { width: var(--from); } to { width: var(--to); } }
@keyframes bar-sheen { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.bar-run { position: relative; animation: bar-grow 9s ease-in-out infinite alternate; }
.bar-run::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
  animation: bar-sheen 1.7s linear infinite; }
.dot-live { animation: breathe 1.6s ease-in-out infinite; }
.gframe svg, .gframe img, .gframe video { transition: transform 0.35s ease; }
.gframe:hover svg, .gframe:hover img, .gframe:hover video { transform: scale(1.035); }
.lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23,24,28,0.09); }
@media (prefers-reduced-motion: reduce) {
.bar-run, .bar-run::after, .dot-live { animation: none; }
.gframe svg, .gframe img, .gframe video, .lift { transition: none; }
.gframe:hover svg, .gframe:hover img, .gframe:hover video, .lift:hover { transform: none; box-shadow: none; }
}
.reel .slide { position: absolute; inset: 0; opacity: 0; animation: reelfade 28s linear infinite; will-change: opacity; }
.reel .slide > svg, .reel .slide > video, .reel .slide > img { animation: reelzoom 28s linear infinite; animation-delay: inherit; will-change: transform; }
.reel .slide:nth-child(2) { animation-delay: 3.5s; }
.reel .slide:nth-child(3) { animation-delay: 7s; }
.reel .slide:nth-child(4) { animation-delay: 10.5s; }
.reel .slide:nth-child(5) { animation-delay: 14s; }
.reel .slide:nth-child(6) { animation-delay: 17.5s; }
.reel .slide:nth-child(7) { animation-delay: 21s; }
.reel .slide:nth-child(8) { animation-delay: 24.5s; }
@keyframes reelfade { 0% { opacity: 0; } 2.5% { opacity: 1; } 12.5% { opacity: 1; } 15% { opacity: 0; } 100% { opacity: 0; } }
@keyframes reelzoom { 0% { transform: scale(1.07); } 15% { transform: scale(1); } 100% { transform: scale(1); } }
.cmp input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: ew-resize; opacity: 0; }
.cmp input[type="range"]:focus-visible + .cmp-handle { outline: 2px solid #D8411C; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.reel .slide, .reel .slide > svg { animation: none; }
.reel .slide:first-child { opacity: 1; }
}