/* Scroll Sequence for Elementor — frontend.css v3 */ /* placeholder div — reserves space in page flow */ .sse-scroll-sequence-widget { display: block; width: 100%; position: relative; } /* fixed stage — appended to by JS, shown only when active */ .sse-sticky-stage { box-sizing: border-box; } .sse-canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ── Loader ── */ .sse-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; z-index: 10; transition: opacity 0.5s ease; } .sse-loader.sse-hidden { opacity: 0; pointer-events: none; } .sse-loader-bar-wrap { width: 140px; height: 2px; background: rgba(255,255,255,0.15); border-radius: 99px; overflow: hidden; } .sse-loader-bar-fill { height: 100%; background: rgba(255,255,255,0.7); width: 0%; border-radius: 99px; transition: width 0.2s ease; } .sse-loader-text { font-size: 13px; color: rgba(255,255,255,0.45); font-family: sans-serif; letter-spacing: 0.02em; } /* ── Progress bar ── */ .sse-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; border-radius: 0 2px 2px 0; transition: width 0.1s linear; z-index: 5; } /* ── Frame counter ── */ .sse-counter { position: absolute; top: 14px; right: 16px; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.7); font-family: monospace; z-index: 5; pointer-events: none; } /* ── Caption ── */ .sse-caption { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: 500; text-align: center; padding: 6px 20px; border-radius: 6px; background: rgba(0,0,0,0.45); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .sse-caption.sse-visible { opacity: 1; } /* ── Dots ── */ .sse-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 5; pointer-events: none; } .sse-dot { width: 7px; height: 7px; border-radius: 50%; opacity: 0.35; transition: opacity 0.3s, transform 0.3s; } .sse-dot.sse-active { opacity: 1; transform: scale(1.35); }