.cinematic-container{background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}.image-wrapper{position:absolute;inset:0}.image-wrapper.animating{animation:.8s ease-out fadeSlideIn}@keyframes fadeSlideIn{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.dark-overlay{z-index:1;background:linear-gradient(#0000004d 0%,#0009 50%,#000c 100%);position:absolute;inset:0}.content-wrapper{z-index:2;pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 5% 15vh;display:flex;position:absolute;inset:0}.story-text{text-align:center;color:#fff;letter-spacing:.5px;text-shadow:0 2px 10px #000c,0 4px 20px #0009;max-width:900px;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;line-height:1.6;animation:1s ease-out .3s both textFadeIn}@keyframes textFadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.nav-button{z-index:3;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;-webkit-user-select:none;user-select:none;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:2rem;transition:all .3s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.nav-button:hover:not(:disabled){background:#fff3;border-color:#ffffff80;transform:translateY(-50%)scale(1.1);box-shadow:0 0 30px #ffffff4d}.nav-button:active:not(:disabled){transform:translateY(-50%)scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button.prev{left:5%}.nav-button.next{right:5%}.progress-indicator{z-index:3;pointer-events:none;gap:12px;display:flex;position:absolute;bottom:5vh;left:50%;transform:translate(-50%)}.progress-dot{background:#ffffff4d;border-radius:50%;width:12px;height:12px;transition:all .3s}.progress-dot.active{background:#fff;border-radius:6px;width:40px;box-shadow:0 0 20px #fff9}.slide-counter{z-index:3;color:#ffffffb3;letter-spacing:2px;pointer-events:none;font-size:1rem;font-weight:300;position:absolute;top:5vh;right:5%}.start-screen{background:radial-gradient(circle,#1a1a2e 0%,#0a0a0f 100%);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.start-screen:before{content:"";background-color:#0000;background-image:linear-gradient(90deg,#00d4ff08 1px,#0000 1px),linear-gradient(#00d4ff08 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:50px 50px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;animation:20s linear infinite gridScroll;position:absolute;inset:0}@keyframes gridScroll{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.start-content{z-index:10;text-align:center;animation:1.5s ease-out startFadeIn;position:relative}@keyframes startFadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.start-title{letter-spacing:6px;color:#00d4ff;text-shadow:0 0 20px #00d4ffcc,0 0 40px #00d4ff66;margin-bottom:60px;font-size:clamp(2rem,4vw,3.5rem);font-weight:900;animation:3s ease-in-out infinite titleGlow}@keyframes titleGlow{0%,to{text-shadow:0 0 20px #00d4ffcc,0 0 40px #00d4ff66}50%{text-shadow:0 0 30px #00d4ff,0 0 60px #00d4ff99}}.shield-play-button{color:#00d4ff;cursor:pointer;background:0 0;border:none;width:150px;height:180px;transition:all .4s;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.shield-icon{filter:drop-shadow(0 0 20px #00d4ff99);width:100%;height:100%;transition:all .4s}.shield-play-button:hover .shield-icon{filter:drop-shadow(0 0 30px #00d4ff);transform:scale(1.1)}.shield-play-button:active .shield-icon{transform:scale(.95)}.initiate-mission-button{z-index:4;color:#00d4ff;letter-spacing:2px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 0 10px #00d4ffcc;background:#00d4ff26;border:2px solid #00d4ff99;padding:12px 30px;font-size:1rem;font-weight:700;transition:all .4s;animation:.8s ease-out missionButtonAppear;position:absolute;bottom:5vh;right:5%}@keyframes missionButtonAppear{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.initiate-mission-button:hover{background:#00d4ff4d;border-color:#00d4ff;transform:translateY(-3px);box-shadow:0 0 30px #00d4ff80,inset 0 0 20px #00d4ff33}.initiate-mission-button:active{transform:translateY(-1px)}.music-toggle{z-index:3;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .3s;display:flex;position:absolute;top:5vh;left:5%}.music-toggle:hover{background:#fff3;border-color:#ffffff80;transform:scale(1.1);box-shadow:0 0 20px #ffffff4d}.music-toggle svg{width:24px;height:24px}@media (max-width:768px){.nav-button{width:50px;height:50px;font-size:1.5rem}.nav-button.prev{left:3%}.nav-button.next{right:3%}.content-wrapper{padding:0 5% 12vh}.story-text{font-size:clamp(1.2rem,4vw,1.8rem)}.start-title{letter-spacing:3px;margin-bottom:40px}.shield-play-button{width:120px;height:144px}.initiate-mission-button{letter-spacing:1.5px;padding:10px 20px;font-size:.85rem;bottom:8vh;right:3%}.music-toggle{width:45px;height:45px;left:3%}}