/* CSS Reset and Body Setup */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: #000; font-family: 'Rubik', sans-serif; color: #fff; display: flex; justify-content: center; align-items: center; }

/* User Interaction Screen */
#intro-screen, #end-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgb(30, 20, 25) 0%, rgb(0, 0, 0) 100%);
    z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: opacity 2s ease; backdrop-filter: blur(20px);
}
#intro-screen.hidden, #end-screen.hidden { opacity: 0; pointer-events: none; }

.intro-title, .ending-title {
    font-family: 'Amatic SC', cursive; font-size: 6rem; font-weight: 700;
    color: #ffd1dc; margin-bottom: 10px; letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(255, 209, 220, 0.5);
}
.intro-subtitle { font-size: 1.3rem; color: #e5e5e5; font-weight: 300; margin-bottom: 50px; }
.button-group { display: flex; gap: 20px; flex-direction: column; }

button {
    background: rgba(255, 209, 220, 0.1); border: 1px solid rgba(255, 209, 220, 0.5);
    color: #ffd1dc; padding: 15px 50px; font-size: 1.5rem; font-family: 'Rubik', sans-serif;
    border-radius: 50px; cursor: pointer; transition: all 0.4s ease; backdrop-filter: blur(10px);
}
button.secondary-btn { font-size: 1.1rem; padding: 12px 35px; border-color: rgba(255,255,255,0.2); color: #ccc; display: none; }
button:hover { background: #ffd1dc; color: #000; box-shadow: 0 0 30px rgba(252, 165, 165, 0.6); transform: translateY(-2px); }

/* Pause Overlay */
#pause-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
    font-size: 8rem; color: rgba(255, 255, 255, 0.7); text-shadow: 0 0 30px #000;
    z-index: 60; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#pause-overlay.hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }

/* Pause States for Animations */
body.paused .slide, body.paused .light-leak, body.paused .icon-pop, body.paused #narrative-text {
    animation-play-state: paused !important;
}

/* Recording Indicator */
#recording-indicator { position: absolute; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px 20px; border-radius: 30px; display: flex; align-items: center; gap: 10px; z-index: 50; font-weight: bold; backdrop-filter: blur(5px); transition: opacity 0.5s ease; }
#recording-indicator.hidden { opacity: 0; pointer-events: none; }
.red-dot { width: 12px; height: 12px; background: #ff4757; border-radius: 50%; animation: blink 1s infinite alternate; }
@keyframes blink { 0% { opacity: 1; box-shadow: 0 0 10px #ff4757; } 100% { opacity: 0.3; } }

/* Slideshow Container */
#slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 4s ease-in-out; }
.slide.active, .slide.fade-out { animation: kenburns 20s linear forwards; }
.slide.active { opacity: 1; }
.slide.fade-out { opacity: 0; }

/* Cinematic organic Ken Burns */
@keyframes kenburns {
    0% { transform: scale(1.05) translate(0, 0) rotate(0deg); }
    50% { transform: scale(1.10) translate(-0.5%, -0.5%) rotate(0.2deg); }
    100% { transform: scale(1.15) translate(-1%, -1%) rotate(-0.1deg); }
}

/* Light Leaks (Cinematic Flares) */
.light-leak { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 15; mix-blend-mode: screen; pointer-events: none; animation: float 15s infinite alternate ease-in-out; }
.light-leak-1 { width: 40vw; height: 40vw; background: rgba(255, 100, 150, 0.3); top: -10vw; left: -10vw; animation-delay: 0s; }
.light-leak-2 { width: 50vw; height: 50vw; background: rgba(255, 200, 100, 0.2); bottom: -20vw; right: -10vw; animation-delay: -5s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10vw, 5vw) scale(1.2); } }

#slideshow-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.85) 100%), linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 25%); z-index: 20; pointer-events: none; }
#particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; }

/* Narrative Container */
#narrative-container { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1000px; text-align: center; z-index: 30; pointer-events: none; display: flex; justify-content: center; }
.glass-pill { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 15px 40px; opacity: 0; filter: blur(10px); transform: translateY(15px) scale(0.95); transition: opacity 1.5s ease, filter 1.5s ease, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 15px; }
.glass-pill.active { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }

/* Shimmering Text & Icon */
#narrative-text {
    font-size: 2.2rem; font-weight: 300; line-height: 1.4; margin: 0; letter-spacing: 0.5px;
    background: linear-gradient(to right, #fff 20%, #ffd1dc 40%, #ffd1dc 60%, #fff 80%);
    background-size: 200% auto; color: #000; background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

#subtitle-icon { font-size: 2.5rem; opacity: 0; display: inline-block; }
.icon-pop { animation: iconpop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes iconpop { 0% { opacity: 0; transform: scale(0.2) rotate(-20deg); } 60% { transform: scale(1.2) rotate(10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

@media (max-width: 768px) { #narrative-text { font-size: 1.4rem; } #subtitle-icon { font-size: 1.6rem; } .glass-pill { padding: 10px 20px; gap: 10px;} }

#progress-container { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.1); z-index: 40; }
#progress-bar { height: 100%; width: 0%; background: #ffd1dc; box-shadow: 0 0 10px #ffd1dc, 0 0 20px #ffd1dc; transition: width 0.1s linear; border-radius: 0 5px 5px 0; }