.image-sequence-section{--primary-color: #ff6b6b;--secondary-color: #ffd93d;--dark-bg: #0a0a0a;--dark-surface: rgba(0, 0, 0, .8);--glass-bg: rgba(0, 0, 0, .6);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--border-color: rgba(255, 255, 255, .1);--shadow-primary: 0 20px 60px rgba(0, 0, 0, .8);--shadow-glow: 0 0 20px rgba(255, 107, 107, .5)}.section-impact-protection{--dynamic-bg: var(--section-bg-color, #0a0a0a);--dynamic-text: var(--section-text-color, #ffffff);--dynamic-glass-bg: var(--section-glass-bg, rgba(0, 0, 0, .6));--dynamic-border: var(--section-border-color, rgba(255, 255, 255, .1))}.section-impact-protection .impact-protection-heading h2{color:var(--dynamic-text, var(--section-text-color, #ffffff));text-align:center;margin-bottom:2rem;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700}.section-impact-protection .impact-protection-instructions p{color:var(--dynamic-text, var(--section-text-color, #ffffff));text-align:center;margin-bottom:2rem;opacity:.8;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.section-impact-protection .tablinks{text-align:center;margin-bottom:2rem}.section-impact-protection .tablink{color:var(--dynamic-text, var(--section-text-color, #ffffff));text-decoration:none;padding:10px 20px;margin:0 5px;border:1px solid var(--dynamic-border, rgba(255, 255, 255, .1));border-radius:25px;background:var(--dynamic-glass-bg, rgba(0, 0, 0, .6));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500;opacity:.7}.section-impact-protection .tablink:hover,.section-impact-protection .tablink.active{opacity:1;background:var(--dynamic-glass-bg, rgba(255, 255, 255, .1));border-color:var(--dynamic-text, var(--section-text-color, #ffffff))}.image-sequence-section{background:var(--dark-bg);padding:60px 0;min-height:100vh;display:flex;align-items:center;justify-content:center}.sequence-title{color:var(--dynamic-text, var(--text-primary));text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:3rem;text-shadow:0 4px 20px rgba(0,0,0,.8);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;width:100%;display:block}.sequence-viewer{position:relative;width:100%;max-width:1350px;height:650px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-primary);cursor:grab;background:var(--dark-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);display:block}.sequence-viewer:active{cursor:grabbing}.image-frames-container{width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.sequence-image{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:0;transition:opacity .15s ease-out;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.sequence-image.active{opacity:1}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-secondary);font-size:18px;text-align:center;z-index:10}.spinner{border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top:3px solid var(--primary-color);width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-weight:500}.sequence-controls{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:var(--dynamic-glass-bg, var(--glass-bg));-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:50px;padding:15px 30px;display:flex;align-items:center;gap:20px;border:1px solid var(--dynamic-border, var(--border-color));box-shadow:0 8px 32px #0006;z-index:20}@media (max-width: 768px){.sequence-controls{bottom:15px;padding:10px 20px;gap:15px;border-radius:30px;max-width:90%}.frame-counter{font-size:12px}}.progress-bar{width:300px;height:6px;background:#fff3;border-radius:3px;position:relative;cursor:pointer;overflow:visible}.progress-fill{height:100%;width:0%;background:var(--primary-color);border-radius:3px;transition:none;box-shadow:var(--shadow-glow);position:relative}.progress-fill:after{content:none}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-handle{position:absolute;top:-7px;left:0;width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;box-shadow:0 4px 15px #ff6b6b66;transition:transform .2s ease,box-shadow .2s ease;border:2px solid rgba(255,255,255,.2);z-index:10}.progress-handle:hover{transform:scale(1.2);box-shadow:0 6px 20px #ff6b6b99}.progress-handle:active{transform:scale(1.1)}.frame-counter{color:var(--dynamic-text, var(--text-primary));font-size:14px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.8);white-space:nowrap;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.instructions{position:absolute;top:30px;left:50%;transform:translate(-50%);color:var(--dynamic-text, var(--text-secondary));opacity:.7;font-size:16px;text-align:center;background:var(--dynamic-glass-bg, var(--glass-bg));padding:15px 30px;border-radius:25px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--dynamic-border, var(--border-color));z-index:20;max-width:90%;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400}@media (max-width: 768px){.instructions{top:15px;font-size:12px;padding:8px 16px;border-radius:15px;max-width:85%}}.impact-indicator{position:absolute;top:20px;right:30px;color:var(--primary-color);font-size:18px;font-weight:700;opacity:0;transform:scale(.8);transition:all .3s ease;z-index:20;background:var(--dynamic-glass-bg, var(--glass-bg));padding:10px 20px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,107,107,.3);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media (max-width: 768px){.impact-indicator{top:10px;right:15px;font-size:12px;padding:6px 12px;border-radius:15px;max-width:120px;word-wrap:break-word;line-height:1.3}}.impact-indicator.active{opacity:1;transform:scale(1);text-shadow:var(--shadow-glow);box-shadow:0 0 30px #ff6b6b66;animation:pulse .6s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (max-width: 1400px){.sequence-viewer{width:100%;height:calc(100vw * 650 / 1350);max-height:650px}}@media (max-width: 768px){.image-sequence-section{padding:30px 0}.sequence-title{font-size:2rem;margin-bottom:2rem}.sequence-viewer{height:calc(100vw * 650 / 1350);max-height:400px;margin:0 15px;border-radius:15px}.sequence-controls{bottom:20px;padding:12px 20px;gap:15px}.progress-bar{width:200px}.instructions{top:20px;font-size:14px;padding:12px 20px;border-radius:20px}.impact-indicator{top:15px;right:20px;font-size:16px;padding:8px 15px}.frame-counter{font-size:12px}}@media (max-width: 480px){.sequence-viewer{height:calc(100vw * 650 / 1350);max-height:300px;margin:0 10px}.sequence-controls{flex-direction:column;gap:10px;padding:15px;border-radius:20px}.progress-bar{width:180px}.instructions{font-size:12px;padding:10px 15px}}@media (hover: none) and (pointer: coarse){.sequence-viewer{cursor:default}.progress-handle{width:24px;height:24px;top:-9px}.progress-bar{height:8px}}@media (prefers-contrast: high){.image-sequence-section{--border-color: rgba(255, 255, 255, .3);--glass-bg: rgba(0, 0, 0, .9)}.sequence-controls,.instructions,.impact-indicator{border-width:2px}}@media (prefers-reduced-motion: reduce){.sequence-image,.progress-fill,.progress-handle,.impact-indicator{transition:none}.spinner{animation:none}.progress-fill:after{animation:none}}@media (prefers-color-scheme: light){.image-sequence-section{--dark-bg: #f5f5f5;--dark-surface: rgba(255, 255, 255, .9);--glass-bg: rgba(255, 255, 255, .8);--text-primary: #333333;--text-secondary: rgba(51, 51, 51, .7);--border-color: rgba(0, 0, 0, .1);--shadow-primary: 0 20px 60px rgba(0, 0, 0, .15)}}.progress-bar:focus,.progress-handle:focus{outline:2px solid var(--primary-color);outline-offset:2px}.sequence-viewer,.sequence-controls,.instructions,.impact-indicator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sequence-image{will-change:opacity}.progress-fill,.progress-handle{will-change:transform,width}.impact-indicator{will-change:opacity,transform}
/*# sourceMappingURL=/cdn/shop/t/121/assets/image-sequence-viewer.css.map */