:root{--bg-dark:#0a0a2e;--bg-section:#113;--text-primary:#fff;--text-secondary:#abd;--accent-blue:#39f;--accent-gold:gold;--accent-red:#f44;--accent-green:#4f8;--accent-purple:#a6f;--subtitle-bg:#000000d9;--font-display:"Cinzel", serif;--font-body:"Noto Sans", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-dark);width:100%;height:100dvh;font-family:var(--font-body);color:var(--text-primary);-webkit-text-size-adjust:100%;overflow:hidden}#app{width:100vw;height:100dvh;position:relative;overflow:hidden}#scroll-container{width:100%;height:100%;position:relative;overflow:hidden}.section{opacity:0;pointer-events:none;justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:absolute;top:0;left:0;overflow:hidden}.section.active{opacity:1;pointer-events:auto}.section .layer{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.section .layer-bg{z-index:1}.section .layer-mid{z-index:2}.section .layer-fg{z-index:3}.section .layer-text{z-index:4;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.section-title{font-family:var(--font-display);text-shadow:0 0 30px #3399ff80;margin-bottom:1rem;font-size:clamp(2rem,5vw,4.5rem);font-weight:900}.section-subtitle{color:var(--text-secondary);max-width:60ch;font-size:clamp(1rem,2vw,1.5rem)}#subtitle-bar{z-index:100;background:var(--subtitle-bg);padding:.8rem 2rem;padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));padding-left:calc(2rem + env(safe-area-inset-left,0px));padding-right:calc(2rem + env(safe-area-inset-right,0px));-webkit-backdrop-filter:blur(8px);border-top:1px solid #ffffff1a;align-items:center;gap:1rem;transition:transform .3s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}#subtitle-bar.visible{transform:translateY(0)}#subtitle-name{font-family:var(--font-display);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:.2rem .8rem;font-size:1.1rem;font-weight:700}#subtitle-text{flex:1;font-size:1.2rem;line-height:1.4}#controls{z-index:200;gap:.5rem;display:flex;position:fixed;top:1rem;right:1rem}#play-pause-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.6;background:#00000080;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;transition:all .2s;display:flex}#play-pause-btn:hover{opacity:1;border-color:var(--accent-blue)}#rotate-overlay{z-index:9999;background:var(--bg-dark);color:var(--text-secondary);font-family:var(--font-body);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:none;position:fixed;inset:0}#rotate-overlay .phone-icon{border:3px solid var(--accent-blue);border-radius:8px;width:48px;height:80px;animation:2s ease-in-out infinite rotate-phone;position:relative}#rotate-overlay .phone-icon:after{content:"";border:2px solid var(--accent-blue);border-radius:50%;width:10px;height:10px;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}@keyframes rotate-phone{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(90deg)}to{transform:rotate(0)}}#rotate-overlay p{max-width:260px;font-size:14px;line-height:1.4}#rotate-overlay .dismiss{color:#679;cursor:pointer;margin-top:12px;font-size:11px;text-decoration:underline}@media (orientation:portrait) and (width<=768px){#rotate-overlay{display:flex}}.char-sap{color:var(--accent-blue);background:#39f3}.char-customer{color:var(--accent-gold);background:#ffd70033}.char-ariba{color:#f84;background:#f843}.char-concur{color:#4da;background:#4da3}.char-successfactors{color:#f6a;background:#f6a3}.char-fieldglass{color:#a8f;background:#a8f3}.char-signavio{color:#6cf;background:#6cf3}.char-walkme{color:#fc4;background:#fc43}.char-leanix{color:#8f6;background:#8f63}.char-boss{color:var(--accent-red);background:#f443}.char-competitor{color:#f66;background:#f663}.assemble-grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);gap:8px;width:80vw;height:70vh;padding:2rem;display:grid}.assemble-cell{opacity:0;text-align:center;background:#0006;border:2px solid #ffffff1a;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:1rem;display:flex;transform:scale(.5)}.assemble-cell.revealed{opacity:1;border-color:var(--accent-gold);transform:scale(1);box-shadow:0 0 20px #ffd7004d}.assemble-cell .char-icon{border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:.5rem;font-size:2rem;display:flex}.assemble-cell .char-name{font-family:var(--font-display);margin-bottom:.3rem;font-size:.9rem}.assemble-cell .char-line{color:var(--text-secondary);font-size:.8rem;font-style:italic}.credits-grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(5,1fr);gap:1rem;width:85vw;height:70vh;padding:2rem;display:grid}.credits-cell{text-align:center;background:#0a0a2ecc;border:2px solid #ffffff26;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding:1rem;transition:all .3s;display:flex}.credits-cell:hover{border-color:var(--accent-blue);transform:translateY(-4px)}.credits-cell .role-icon{border:2px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:.5rem;font-size:1.5rem;display:flex}.credits-cell .member-name{margin-bottom:.2rem;font-size:.85rem;font-weight:700}.credits-cell .member-role{color:var(--text-secondary);font-size:.75rem}.bg-gradient-title{background:radial-gradient(#1a1a4e 0%,#0a0a2e 70%)}.bg-gradient-gold{background:linear-gradient(135deg,#2a1a00 0%,#1a1000 50%,#0a0a2e 100%)}.bg-gradient-people{background:linear-gradient(135deg,#1a002a 0%,#100020 50%,#0a0a2e 100%)}.bg-gradient-fog{background:linear-gradient(135deg,#0a1a2a 0%,#051520 50%,#0a0a2e 100%)}.bg-gradient-final{background:radial-gradient(#2a0000 0%,#1a0000 30%,#0a0a2e 70%)}.bg-gradient-victory{background:radial-gradient(#0a2a1a 0%,#051a10 30%,#0a0a2e 70%)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-fade-in{animation:.8s forwards fadeInUp}.animate-pulse{animation:2s ease-in-out infinite pulse}
