/* AR Preview Thumbnail */ .kufel-ar-preview { max-width: 600px; margin: 20px auto; text-align: center; } .kufel-ar-thumbnail { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .kufel-ar-thumbnail:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .kufel-ar-marker-image { width: 100%; height: auto; display: block; } .kufel-ar-overlay-info { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; } .kufel-ar-launch-btn { background: rgba(255, 255, 255, 0.95); border: none; border-radius: 50px; padding: 20px 40px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: #667eea; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .kufel-ar-launch-btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .kufel-ar-launch-btn:active { transform: scale(0.98); } .kufel-ar-launch-btn svg { color: #667eea; } .kufel-ar-instruction { margin-top: 12px; color: #666; font-size: 14px; } /* AR Lightbox - must be above MindAR overlay (1000000) */ .kufel-ar-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000001; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .kufel-ar-lightbox-content { width: 100%; height: 100%; position: relative; } .kufel-ar-lightbox-content a-scene { width: 100% !important; height: 100vh !important; } /* Close button - must be above everything */ .kufel-ar-close-btn { position: absolute; top: 20px; right: 20px; z-index: 9999999; pointer-events: auto; background: rgba(0, 0, 0, 0.6); border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; width: 56px; height: 56px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; backdrop-filter: blur(10px); padding: 0; } .kufel-ar-close-btn:hover { background: rgba(255, 0, 0, 0.8); border-color: #fff; transform: scale(1.1) rotate(90deg); } .kufel-ar-close-btn:active { transform: scale(0.95) rotate(90deg); } .kufel-ar-close-btn svg { display: block; } /* Hide A-Frame runtime UI buttons */ .a-enter-vr-button, .a-enter-ar-button, .a-fullscreen-button { display: none !important; } .a-enter-vr, .a-enter-ar { display: none !important; } /* MindAR UI - ensure visibility (MindAR injects these directly under ) */ /* Overlay base layer */ .mindar-ui-overlay { z-index: 1000000 !important; position: fixed !important; } /* Scanning UI - must be above lightbox (1000001) to be visible during AR */ .mindar-ui-scanning { z-index: 1001000 !important; position: fixed !important; pointer-events: none !important; } .mindar-ui-overlay.hidden, .mindar-ui-scanning.hidden { display: none !important; } /* Hide MindAR loader and compatibility message (false positives on iOS) */ .mindar-ui-loading, .mindar-ui-compatibility { display: none !important; } /* Loading animation */ @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } } .mindar-ui-loading .loader .dots { display: flex; gap: 8px; align-items: center; justify-content: center; } .mindar-ui-loading .loader .dots span { width: 12px; height: 12px; background: #fff; border-radius: 50%; animation: dotPulse 1.4s infinite ease-in-out; } .mindar-ui-loading .loader .dots span:nth-child(1) { animation-delay: 0s; } .mindar-ui-loading .loader .dots span:nth-child(2) { animation-delay: 0.2s; } .mindar-ui-loading .loader .dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Animated scanline (fallback selectors to match library markup) */ .mindar-ui-scanning .scanline, .mindar-ui-scanning > .inner > .scanline, .mindar-ui-scanning > div > .scanline { position: absolute; left: 0; width: 100%; height: var(--mindar-scanline-thickness, 1px) !important; background: var(--mindar-scanline); opacity: 1; animation: move var(--mindar-scanline-duration, 3s) linear infinite !important; visibility: hidden; } .mindar-ui-scanning .scanning { width: 70%; height: 70%; display: block; } .mindar-ui-scanning .scanning .inner { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to right, #ffffff 2px, transparent 2px) 0 0, linear-gradient(to right, #ffffff 2px, transparent 2px) 0 100%, linear-gradient(to left, #ffffff 2px, transparent 2px) 100% 0, linear-gradient(to left, #ffffff 2px, transparent 2px) 100% 100%, linear-gradient(to bottom, #ffffff 2px, transparent 2px) 0 0, linear-gradient(to bottom, #ffffff 2px, transparent 2px) 100% 0, linear-gradient(to top, #ffffff 2px, transparent 2px) 0 100%, linear-gradient(to top, #ffffff 2px, transparent 2px) 100% 100%; background-repeat: no-repeat; background-size: 30px 30px; border: none; border-radius: 1px; box-shadow: none; } .mindar-ui-scanning .scanning .inner > *:not(.scanline) { display: none; } @keyframes move { 0%, 100% { top: 0%; } 50% { top: calc(100% - 2px); } } /* Mobile responsive */ @media screen and (max-width: 768px) { .kufel-ar-preview { margin: 10px; } .kufel-ar-launch-btn { padding: 16px 32px; font-size: 16px; } .kufel-ar-launch-btn svg { width: 40px; height: 40px; } .kufel-ar-close-btn { top: 10px; right: 10px; width: 48px; height: 48px; } .kufel-ar-close-btn svg { width: 24px; height: 24px; } }