:root{
  --navy-deep:#181454;
  --navy:#231C7C;
  --navy-glow:#4633D6;
  --orange:#F5821F;
  --pink:#EC1E79;
  --yellow:#FFD23F;
  --cream:#FFF4E3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0B0930;font-family:'Segoe UI',Tahoma,sans-serif;}
.app{display:flex;flex-direction:column;align-items:center;padding:20px 12px 50px;min-height:100vh;}

.controls{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;justify-content:center;}
.controls button{
  background:var(--orange);color:#fff;border:none;border-radius:999px;
  padding:10px 22px;font-size:clamp(13px,2.6vw,15px);font-weight:800;cursor:pointer;
  box-shadow:0 4px 14px rgba(245,130,31,.35);transition:transform .15s ease;
}
.controls button:active{transform:scale(.94);}
.controls button.pause{background:var(--pink);box-shadow:0 4px 14px rgba(236,30,121,.35);}
.controls button.secondary{background:transparent;border:1.5px solid #6a63c9;color:#c9c4ff;box-shadow:none;}
#timecode{color:#8f89d6;font-size:clamp(11px,2.4vw,13px);min-width:110px;text-align:center;font-weight:700;}

.stage-wrap{width:100%;max-width:960px;}
.stage{
  position:relative;width:100%;aspect-ratio:16/9;
  background:radial-gradient(ellipse at 50% 35%, var(--navy-glow) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,210,63,.25), 0 20px 60px rgba(0,0,0,.55);
  animation:stagePulse 5s ease-in-out infinite;
}
@keyframes stagePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,210,63,.18), 0 20px 60px rgba(0,0,0,.55);}
  50%{box-shadow:0 0 0 2px rgba(236,30,121,.35), 0 20px 70px rgba(0,0,0,.6);}
}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* persistent logo bar — fixed on top of every scene */
.logo-bar{position:absolute;top:3%;right:3%;display:flex;gap:clamp(6px,1.6vw,12px);
  align-items:center;z-index:20;pointer-events:none;}
.logo-bar img{height:clamp(30px,7vw,52px);width:clamp(30px,7vw,52px);border-radius:50%;object-fit:cover;
  border:2px solid var(--yellow);box-shadow:0 0 14px rgba(255,210,63,.5);background:#fff;}
.logo-bar .sharara-logo{animation:spinGlow 8s linear infinite;}
@keyframes spinGlow{0%{filter:drop-shadow(0 0 4px rgba(236,30,121,.4));}50%{filter:drop-shadow(0 0 14px rgba(236,30,121,.8));}100%{filter:drop-shadow(0 0 4px rgba(236,30,121,.4));}}

/* ambient particles — always alive across the whole stage */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.particles span{position:absolute;border-radius:2px;opacity:0;animation:drift 6s ease-in-out infinite;}
@keyframes drift{
  0%{opacity:0;transform:translateY(0) scale(.6);}
  20%{opacity:.85;}
  80%{opacity:.4;}
  100%{opacity:0;transform:translateY(-46px) scale(1);}
}
.particles.hype span{animation-duration:3.2s;}

.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;transition:opacity 1.3s ease;pointer-events:none;z-index:2;padding:0 4%;text-align:center;}
.scene.active{opacity:1;}

.kicker{color:#C9C4FF;font-size:clamp(13px,2.6vw,20px);letter-spacing:.5px;margin-bottom:.5em;font-weight:600;}
.program-name{color:var(--cream);font-size:clamp(20px,4.2vw,34px);font-weight:800;margin-bottom:.5em;}
.curiosity-line{color:var(--yellow);font-size:clamp(16px,3.2vw,26px);font-weight:800;opacity:0;transform:translateY(10px);
  transition:opacity 1.1s ease, transform 1.1s ease;}
.curiosity-line.show{opacity:1;transform:translateY(0);}

.spark-icon{width:clamp(70px,13vw,120px);height:clamp(70px,13vw,120px);margin-bottom:.3em;
  filter:drop-shadow(0 0 20px rgba(245,130,31,.6));animation:pulseGlow 2.6s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(245,130,31,.45)) scale(1);}50%{filter:drop-shadow(0 0 32px rgba(236,30,121,.75)) scale(1.06);}}
.sharara-word{font-size:clamp(38px,9vw,88px);font-weight:900;color:var(--yellow);
  -webkit-text-stroke:1.5px var(--orange);text-shadow:0 0 28px rgba(245,130,31,.6);letter-spacing:1px;}

.flame{width:clamp(48px,8vw,90px);height:clamp(64px,10.5vw,120px);opacity:0;transform:scale(.6);
  transition:opacity 1s ease, transform 1s ease;position:absolute;top:10%;}
.flame.show{opacity:1;transform:scale(1);}
.flame.hide{opacity:0;transform:scale(.4);}

.committee-tagline{color:var(--cream);font-size:clamp(15px,2.8vw,22px);font-weight:700;margin-bottom:.8em;
  max-width:90%;line-height:1.5;}
.word-row{display:flex;gap:clamp(10px,3vw,32px);flex-wrap:wrap;justify-content:center;max-width:90%;}
.word-chip{font-size:clamp(17px,3.6vw,30px);font-weight:800;color:var(--cream);opacity:0;transform:translateY(14px) scale(.85);
  transition:opacity .8s ease, transform .8s ease;background:rgba(245,130,31,.12);
  border:1.5px solid rgba(255,210,63,.4);padding:.3em .7em;border-radius:999px;}
.word-chip.show{opacity:1;transform:translateY(0) scale(1);}
.word-chip .dot{color:var(--orange);}

.energy-label{font-size:clamp(18px,3.6vw,30px);color:var(--cream);text-align:center;font-weight:800;
  text-shadow:0 0 20px rgba(236,30,121,.5);}

.squad-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
  gap:clamp(8px,1.6vw,18px);padding:0 6%;margin-top:.4em;}
.squad-grid .slot:nth-child(9){grid-column:3;}
.slot{width:clamp(38px,6.6vw,72px);height:clamp(38px,6.6vw,72px);border-radius:50%;border:2px dashed var(--yellow);opacity:.9;
  display:flex;align-items:center;justify-content:center;color:#c9c4ff;font-size:clamp(11px,1.6vw,15px);font-weight:700;
  background:rgba(255,255,255,.04);}
.squad-caption{margin-top:.9em;color:var(--cream);font-size:clamp(15px,2.8vw,22px);font-weight:700;}
.nine-badge{position:absolute;font-size:clamp(80px,16vw,160px);font-weight:900;color:var(--pink);opacity:0;
  text-shadow:0 0 34px rgba(236,30,121,.6);transition:opacity 1s ease, transform 1s ease;transform:scale(.7);z-index:0;}
.nine-badge.show{opacity:.2;transform:scale(1);}

.quiet-line{color:var(--cream);font-size:clamp(16px,3.2vw,26px);font-weight:700;max-width:85%;line-height:1.6;}

.outro-word{font-size:clamp(42px,10vw,100px);font-weight:900;color:var(--yellow);
  text-shadow:0 0 40px rgba(245,130,31,.75);animation:outroPulse 1.4s ease-in-out infinite;}
@keyframes outroPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.fire-emoji{font-size:clamp(30px,6vw,54px);}

/* real footage segment */
.footage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.footage-caption{position:absolute;bottom:5%;right:5%;left:5%;color:var(--cream);font-size:clamp(13px,2.4vw,18px);
  font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:center;background:rgba(11,9,48,.35);
  padding:.4em 1em;border-radius:999px;backdrop-filter:blur(3px);}

.timeline{width:100%;max-width:960px;height:6px;background:#231C7C;border-radius:4px;margin-top:16px;position:relative;overflow:hidden;}
.timeline-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--pink),var(--yellow));width:0%;transition:width .1s linear;}
.marks{display:flex;justify-content:space-between;width:100%;max-width:960px;margin-top:6px;}
.marks span{color:#5a54a6;font-size:10px;}

@media (max-width:480px){
  .controls{gap:6px;}
  .controls button{padding:8px 16px;}
}