/* star3.css */
/* ==================================================
   STAR 3: MEMORY ORBIT
   ================================================== */
#content-scene-s3 { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }
#content-scene-s3.active { opacity: 1; pointer-events: auto; }

.s3-container { position: relative; z-index: 10; width: 100vw; max-width: 500px; height: 70vh; min-height: 550px; max-height: 750px; perspective: 1500px; }
.s3-hologram-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.s3-hologram-card.is-flipped { transform: rotateY(180deg); }

.s3-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--color-hologram-bg, rgba(255,255,255,0.08)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--color-glass-border, rgba(255,255,255,0.2)); border-radius: 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(163, 194, 255, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.s3-face::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%); pointer-events: none; z-index: 1; }

.s3-face-front { transform: rotateY(0deg); padding: 40px 20px; text-align: center; }
.s3-question { font-size: 2rem; font-style: italic; font-weight: 300; margin-bottom: 40px; text-shadow: 0 0 20px rgba(255,255,255,0.4); z-index: 2; }
.s3-btn-reveal { background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.3); color: white; font-family: 'Spectral', serif; font-size: 1.1rem; letter-spacing: 1px; padding: 14px 32px; border-radius: 40px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 2; }
.s3-btn-reveal:hover, .s3-btn-reveal:focus { background: rgba(255,255,255,0.9); color: #060a14; box-shadow: 0 0 25px rgba(255,255,255,0.6); transform: translateY(-2px); outline: none; }

.s3-face-back { transform: rotateY(180deg); padding: 30px 10px; display: flex; flex-direction: column; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; }
.s3-face-back::before { display: none !important; }

.s3-memory-orbit-viewport { flex: 1; width: 100%; position: relative; perspective: 1000px; display: flex; align-items: center; justify-content: center; touch-action: none; z-index: 5; margin-top: 10px; }
.s3-memory-orbit-track { position: relative; width: 180px; height: 260px; transform-style: preserve-3d; }
@media (min-width: 400px) { .s3-memory-orbit-track { width: 200px; height: 280px; } }

.s3-memory-card { position: absolute; inset: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px; padding-bottom: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 0 15px rgba(255, 255, 255, 0.05); cursor: grab; will-change: transform, opacity, z-index; }
.s3-memory-card:active { cursor: grabbing; }
.s3-photo-art { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: relative; }
.s3-photo-art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 20px rgba(0,0,0,0.4); pointer-events: none; }

.s3-expand-hint { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.s3-memory-card[data-active="true"] .s3-expand-hint { opacity: 1; animation: soft-bounce 2s infinite ease-in-out; }
.s3-expand-hint svg { width: 14px; height: 14px; fill: white; }
@keyframes soft-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

.s3-orbit-ui { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 10; text-align: center; padding-bottom: 15px; }
.s3-orbit-caption { font-size: 1.3rem; font-style: italic; font-weight: 300; height: 40px; display: flex; align-items: center; justify-content: center; text-shadow: 0 2px 8px rgba(0,0,0,0.8); transition: opacity 0.3s ease, transform 0.3s ease; }
.s3-swipe-instruction { font-size: 0.8rem; color: var(--color-starlight, #ccc); letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; opacity: 0.7; transition: opacity 0.5s ease; }
.s3-swipe-instruction.hidden { opacity: 0; }
.s3-orbit-progress { display: flex; gap: 6px; margin-top: 15px; }
.s3-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.s3-dot.active { background: white; transform: scale(1.5); box-shadow: 0 0 10px rgba(255,255,255,0.8); }

.s3-btn-continue { display: none; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--color-accent, #c8a0ff); color: var(--color-accent, #c8a0ff); font-family: 'Spectral', serif; font-size: 1rem; letter-spacing: 1px; padding: 12px 28px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; animation: fadeIn 0.8s ease forwards; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.s3-btn-continue:hover { background: var(--color-accent, #c8a0ff); color: #000; box-shadow: 0 0 20px rgba(200, 160, 255, 0.4); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.s3-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.s3-lightbox.active { pointer-events: auto; opacity: 1; }
.s3-lightbox-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 12, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; }
.s3-lightbox-content { position: relative; z-index: 2; width: 85vw; max-width: 500px; height: 65vh; max-height: 700px; background: #fff; padding: 10px; padding-bottom: 60px; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); transform: scale(0.9) translateY(20px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.s3-lightbox.active .s3-lightbox-content { transform: scale(1) translateY(0); }
.s3-lightbox-image { width: 100%; height: 100%; border-radius: 6px; background-size: cover; background-position: center; }
.s3-lightbox-caption { position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; color: #1a1a1a; font-family: 'Spectral', serif; font-style: italic; font-size: 1.2rem; }
.s3-lightbox-close { position: absolute; top: -40px; right: 0; color: white; font-family: sans-serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }
.s3-lightbox-close:hover { opacity: 1; }

:focus-visible { outline: 2px solid var(--color-starlight, #ccc); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { 
    .ambient-stars, .s3-expand-hint { animation: none !important; } 
    .s3-hologram-card, .s3-memory-card, .s3-lightbox-content { transition-duration: 0.1s !important; } 
}