/* ===================== Design Tokens ===================== */
:root{
  --green-900:#0f3d2e;
  --green-800:#14523d;
  --green-700:#1a6b4f;
  --amber-600:#d97b1f;
  --amber-500:#f2994a;
  --gold:#e0a72e;
  --rose:#d9556f;
  --teal:#2a9d8f;
  --cream:#fbf6ec;
  --ink-900:#14201b;
  --white:#ffffff;
  --font-head:'Poppins', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:linear-gradient(180deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-800) 100%);
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-head); margin:0;}
p{margin:0;}
a{text-decoration:none;}
img{max-width:100%;}

/* ===================== Brand Badge (top-left) ===================== */
.brand-badge{
  position:fixed;
  top:clamp(14px, 2.2vh, 26px);
  left:clamp(14px, 2.2vw, 30px);
  z-index:10;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:999px;
  padding:6px clamp(14px, 1.6vw, 20px) 6px 6px;
  box-shadow:0 10px 26px rgba(15,61,46,0.28);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand-badge:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,61,46,0.34);}
.brand-badge img{
  width:clamp(30px, 3.6vh, 42px); height:clamp(30px, 3.6vh, 42px);
  border-radius:50%;
  object-fit:cover;
  background:var(--white);
  box-shadow:0 0 0 1px rgba(20,82,61,0.12);
}
.brand-badge-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-badge-text strong{
  font-family:var(--font-head); font-weight:800; font-size:clamp(0.8rem, 0.95vw, 0.98rem);
  color:var(--green-900); letter-spacing:0.01em;
}
.brand-badge-text small{
  font-size:clamp(0.58rem, 0.68vw, 0.68rem); font-weight:600;
  color:var(--amber-600); text-transform:uppercase; letter-spacing:.06em;
}

@media (max-width: 520px){
  .brand-badge-text{display:none;}
  .brand-badge{padding:6px;}
}

/* ===================== Balloon Field ===================== */
.balloon-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.balloon-layer{
  position:absolute;
  bottom:0;
  width:64px;
  height:340px;
  will-change:transform;
  transition:transform .05s linear;
}
.balloon{
  position:absolute;
  bottom:-220px;
  width:64px;
  height:80px;
  border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
  box-shadow:inset -10px -12px 18px rgba(0,0,0,0.18), inset 8px 10px 14px rgba(255,255,255,0.25);
  animation:rise 16s ease-in infinite;
  will-change:transform;
}
.balloon::before{
  content:'';
  position:absolute;
  left:50%; top:100%;
  width:1px; height:120px;
  background:rgba(255,255,255,0.35);
  transform:translateX(-50%);
}
.balloon::after{
  content:'';
  position:absolute;
  left:50%; bottom:-9px;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:10px solid;
  border-top-color:inherit;
  transform:translateX(-50%);
}

.balloon-amber{background:var(--amber-500); border-top-color:var(--amber-500); animation-duration:15s;}
.balloon-green{background:#4caf7d; border-top-color:#4caf7d; animation-duration:19s;}
.balloon-rose{background:var(--rose); border-top-color:var(--rose); animation-duration:17s;}
.balloon-gold{background:var(--gold); border-top-color:var(--gold); animation-duration:14s;}
.balloon-teal{background:var(--teal); border-top-color:var(--teal); animation-duration:20s;}

@keyframes rise{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:1; }
  50%{ transform: translateY(-70vh) translateX(24px) rotate(4deg); }
  92%{ opacity:1; }
  100%{ transform: translateY(-145vh) translateX(-18px) rotate(-4deg); opacity:0; }
}

/* Sparkle trail that rises alongside each balloon */
.sparkle{
  position:absolute;
  left:78%; bottom:-190px;
  width:7px; height:7px;
  border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 6px 2px rgba(255,255,255,0.85), 0 0 14px 5px rgba(240,200,120,0.55);
  animation: sparkleRise 17s linear infinite, twinkle 1.1s ease-in-out infinite;
}
.sparkle::before, .sparkle::after{
  content:'';
  position:absolute; inset:0;
  margin:auto;
  background:rgba(255,255,255,0.95);
}
.sparkle::before{width:1px; height:12px; left:50%; top:-2.5px; transform:translateX(-50%);}
.sparkle::after{width:12px; height:1px; top:50%; left:-2.5px; transform:translateY(-50%);}

@keyframes sparkleRise{
  0%{   transform: translateY(0)       translateX(0)    scale(0.55); }
  10%{  transform: translateY(-14vh)   translateX(4px)  scale(1); }
  20%{  transform: translateY(-28vh)   translateX(9px)  scale(0.55); }
  30%{  transform: translateY(-42vh)   translateX(13px) scale(1); }
  40%{  transform: translateY(-56vh)   translateX(17px) scale(0.55); }
  50%{  transform: translateY(-70vh)   translateX(20px) scale(1); }
  60%{  transform: translateY(-85vh)   translateX(13px) scale(0.55); }
  70%{  transform: translateY(-100vh)  translateX(7px)  scale(1); }
  80%{  transform: translateY(-115vh)  translateX(0px)  scale(0.55); }
  90%{  transform: translateY(-132vh)  translateX(-7px) scale(1); }
  100%{ transform: translateY(-150vh)  translateX(-14px) scale(0.55); }
}
@keyframes twinkle{
  0%, 100%{ opacity:0.12; }
  50%{ opacity:1; }
}

/* Ambient background sparkle scatter */
.sparkle-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.twinkle{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 0 6px 2px rgba(255,255,255,0.85), 0 0 12px 4px rgba(240,200,120,0.5);
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce){
  .balloon, .sparkle, .twinkle{ animation:none; opacity:.5; }
}

/* ===================== Layout: Single-Screen Stage ===================== */
main{position:relative; z-index:1;}

.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 3vh, 40px) 20px;
}
.stage-inner{
  width:100%;
  max-width:1560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.2vh, 30px);
  text-align:center;
  color:var(--white);
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:clamp(0.85rem, 1.05vw, 1.2rem); font-weight:600;
  color:var(--amber-500);
}
.stage-title{
  font-size:clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight:800; letter-spacing:-0.01em; color:var(--amber-500);
  max-width:1100px;
  line-height:1.25;
}
.stage-title .title-org{
  display:inline-block;
  margin-top:8px;
  font-size:clamp(0.9rem, 1.7vw, 1.35rem);
  font-weight:700; letter-spacing:0.02em;
  color:var(--white);
}
.stage-title .title-sub{
  display:inline-block;
  margin-top:10px;
  font-size:clamp(1.05rem, 2.2vw, 1.85rem);
  font-weight:600; letter-spacing:normal;
  color:rgba(255,255,255,0.82);
}

.dignitary-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2vh, 22px);
}

.chief-card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:clamp(18px, 2.6vw, 34px);
  text-align:left;
  width:100%;
  max-width:820px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  border-radius:22px;
  padding:clamp(18px, 2.6vh, 32px) clamp(22px, 3.2vw, 40px);
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.ribbon{
  position:absolute; top:16px; right:-40px;
  background:var(--amber-600); color:var(--white);
  padding:5px 46px; font-size:clamp(0.68rem, 0.85vw, 0.85rem); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  transform:rotate(35deg);
}
.confirm-note{
  display:inline-block; margin-top:8px;
  font-size:clamp(0.72rem, 0.9vw, 0.9rem); font-weight:600;
  background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.85);
  padding:4px 12px; border-radius:999px;
}
.chief-photo{
  flex:none;
  width:clamp(90px, 11vh, 150px); height:clamp(90px, 11vh, 150px);
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--amber-500), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:1.25rem; color:var(--white);
  box-shadow:0 0 0 4px rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.28);
}
.chief-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}
.chief-info h2{font-size:clamp(1.8rem, 3.4vw, 3.1rem); color:var(--white); line-height:1.18;}
.chief-info h2 .nickname{
  display:block;
  font-size:0.46em; font-weight:600; color:var(--amber-500);
  margin-top:6px;
}
.guest-title{margin-top:8px; font-size:clamp(1.05rem, 1.3vw, 1.5rem); color:var(--amber-500); font-weight:600;}

.honour-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 1.8vw, 26px);
}
.honour-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:clamp(16px, 2.2vh, 28px) clamp(14px, 1.8vw, 22px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.honour-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,0.22);}
.honour-photo{
  width:clamp(70px, 9vh, 108px); height:clamp(70px, 9vh, 108px); margin:0 auto clamp(10px,1.4vh,16px);
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--teal), var(--green-700));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--white);
  box-shadow:0 0 0 4px rgba(255,255,255,0.25), 0 8px 20px rgba(0,0,0,0.24);
}
.honour-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}
.honour-card h3{font-size:clamp(1.3rem, 1.9vw, 1.9rem); color:var(--white); line-height:1.22;}
.honour-title{margin-top:8px; font-size:clamp(0.9rem, 1.05vw, 1.15rem); color:rgba(255,255,255,0.78); line-height:1.45;}
.honour-card .confirm-note{margin-top:10px;}

.stage-actions{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px, 1.6vh, 16px);
}

.btn-visit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color:var(--white);
  border:2px solid rgba(255,255,255,0.75);
  padding:clamp(14px, 2vh, 22px) clamp(22px, 3.8vw, 46px); border-radius:999px;
  font-weight:800; font-size:clamp(0.92rem, 1.6vw, 1.6rem);
  letter-spacing:0.01em;
  text-align:center;
  max-width:min(92vw, 640px);
  box-shadow:0 14px 34px rgba(217,123,31,0.55), 0 0 0 6px rgba(255,255,255,0.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation:btnBlink 1.5s ease-in-out infinite;
}
.btn-visit span{opacity:.9;}
.btn-visit:hover{
  animation-play-state:paused;
  transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px rgba(217,123,31,0.65), 0 0 0 6px rgba(255,255,255,0.14); background:#c26a15;
}

@keyframes btnBlink{
  0%, 100%{
    opacity:1;
    box-shadow:0 14px 34px rgba(217,123,31,0.55), 0 0 0 0 rgba(242,153,74,0.65);
  }
  50%{
    opacity:0.82;
    box-shadow:0 14px 34px rgba(217,123,31,0.55), 0 0 0 18px rgba(242,153,74,0);
  }
}

@media (prefers-reduced-motion: reduce){
  .btn-visit{animation:none;}
}

/* ===================== Credit Badge ===================== */
.credit-badge{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(6px, 0.8vh, 10px);
  background:linear-gradient(160deg, rgba(255,255,255,0.97), rgba(255,250,238,0.92));
  border:1px solid rgba(224,167,46,0.55);
  border-radius:20px;
  padding:clamp(14px, 1.8vh, 20px) clamp(22px, 2.6vw, 34px);
  box-shadow:0 20px 46px rgba(15,61,46,0.24), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.credit-badge::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%, -50%);
  width:46px; height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--amber-500), var(--gold));
}
.credit-label{
  font-size:clamp(0.64rem, 0.76vw, 0.78rem);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color:#a5895a;
}
.credit-main{
  display:flex; align-items:center; gap:clamp(12px, 1.3vw, 18px);
}
.credit-photo-wrap{
  position:relative;
  flex:none;
}
.credit-mark{
  display:block;
  width:clamp(52px, 6vh, 68px); height:clamp(52px, 6vh, 68px);
  border-radius:50%;
  object-fit:cover; object-position:center;
  box-shadow:0 0 0 3px var(--white), 0 0 0 5px rgba(224,167,46,0.6), 0 10px 20px rgba(15,61,46,0.25);
}
.credit-logo-badge{
  position:absolute; right:-4px; bottom:-4px;
  width:clamp(20px, 2.4vh, 26px); height:clamp(20px, 2.4vh, 26px);
  border-radius:50%;
  object-fit:cover;
  background:var(--white);
  box-shadow:0 0 0 2px var(--white), 0 4px 10px rgba(0,0,0,0.25);
}
.credit-text{display:flex; flex-direction:column; text-align:left; gap:3px;}
.credit-brand{
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.05rem, 1.3vw, 1.35rem);
  color:var(--green-900);
  line-height:1.15;
}
.credit-brand:hover{color:var(--amber-600);}
.credit-person{display:flex; flex-direction:column;}
.credit-person strong{
  font-size:clamp(0.85rem, 1vw, 1.02rem); font-weight:700; color:var(--ink-900);
}
.credit-role{
  font-size:clamp(0.72rem, 0.85vw, 0.86rem); font-weight:600;
  color:var(--amber-600); margin-top:1px;
}

/* ===================== Responsive: tablets & below ===================== */
@media (max-width: 1040px){
  .honour-grid{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width: 700px){
  .honour-grid{grid-template-columns:1fr;}
  .honour-card{max-width:420px; margin:0 auto; width:100%;}
}

@media (max-width: 600px){
  .chief-card{flex-direction:column; text-align:center; max-width:420px;}
  .chief-info{display:flex; flex-direction:column; align-items:center;}
}

/* Keep content clear of the fixed top-left logo badge on short/narrow screens */
@media (max-width: 600px){
  .stage{padding-top:78px;}
}

@media (max-width: 520px){
  .credit-badge{padding:14px 18px;}
  .credit-main{flex-direction:column; text-align:center;}
  .credit-text{align-items:center; text-align:center;}
  .credit-person{align-items:center;}
}

@media (max-width: 360px){
  .stage-title{font-size:clamp(1.5rem, 7vw, 1.9rem);}
  .chief-info h2{font-size:clamp(1.4rem, 7vw, 1.8rem);}
  .btn-visit{font-size:0.82rem; padding:12px 18px;}
}

/* ===================== Launch Overlay ===================== */
.launch-overlay{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 65%, rgba(20,82,61,0.97), rgba(10,28,20,0.99));
  overflow:hidden;
}
.launch-overlay.active{display:flex;}
.launch-content{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px;
  z-index:1;
}

.overlay-balloons{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.overlay-balloons .balloon{ position:absolute; }

.launch-thanks{
  margin:0; font-family:var(--font-head); font-weight:900;
  font-size:clamp(2.1rem, 6vw, 4rem); color:var(--amber-500);
  text-shadow:0 6px 24px rgba(0,0,0,0.45);
  opacity:0; animation: launchFadeUp .7s ease 0.15s forwards;
}
.launch-sub{
  margin:14px 0 0; max-width:720px;
  font-size:clamp(1.15rem, 2.6vw, 1.7rem); font-weight:600; color:rgba(255,255,255,0.9);
  opacity:0; animation: launchFadeUp .7s ease 0.5s forwards;
}
@keyframes launchFadeUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

/* Countdown ring/loader */
.countdown-wrap{
  position:relative;
  width:clamp(74px, 9vw, 110px); height:clamp(74px, 9vw, 110px);
  margin-top:26px;
  animation: countdownFade 12.5s linear forwards;
}
.countdown-ring{
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.countdown-ring-bg{
  fill:none; stroke:rgba(255,255,255,0.18); stroke-width:7;
}
.countdown-ring-fg{
  fill:none; stroke:var(--amber-500); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:282.74; stroke-dashoffset:282.74;
  filter:drop-shadow(0 0 6px rgba(242,153,74,0.7));
  animation: ringFill 10s linear forwards;
}
@keyframes ringFill{
  from{ stroke-dashoffset:282.74; }
  to{ stroke-dashoffset:0; }
}
.countdown-number{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.6rem, 3.2vw, 2.6rem);
  color:#ffffff;
}
@keyframes countdownFade{
  0%{opacity:1;}
  81%{opacity:1;}
  90%{opacity:0;}
  100%{opacity:0;}
}

/* Launch pad stage */
.rocket-stage{
  position:relative;
  width:280px;
  height:min(58vh, 520px);
  margin-top:30px;
  display:flex; align-items:flex-end; justify-content:center;
}

.rocket-wrap{
  position:relative;
  opacity:0;
  animation: rocketSequence 12.5s cubic-bezier(.7,0,.84,0) forwards;
}
.rocket-wrap .rocket{
  display:block; font-size:clamp(90px, 15vw, 170px); line-height:1;
  transform:rotate(-45deg);
  transform-origin:center;
  filter:drop-shadow(0 0 26px rgba(242,153,74,0.9));
}

/* 0–1.6%: appear on the pad · sits still for 10s (to ~81.6%) · then vertical ascent */
@keyframes rocketSequence{
  0%{     opacity:0; transform:translateY(0); }
  1.6%{   opacity:1; transform:translateY(0); }
  81.6%{  opacity:1; transform:translateY(0); }
  100%{   opacity:0; transform:translateY(-95vh); }
}

.idle-smoke{
  position:absolute; bottom:2px; left:50%;
  width:14px; height:14px; margin-left:-7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.5), rgba(200,200,200,0.2) 60%, rgba(200,200,200,0) 75%);
  filter:blur(1px);
  opacity:0;
}
.idle-smoke.i1{ animation: idleSmoke 1.4s ease-out 0.4s 7; }
.idle-smoke.i2{ margin-left:6px; animation: idleSmoke 1.6s ease-out 0.9s 6; }
@keyframes idleSmoke{
  0%{ opacity:0; transform:translate(0,0) scale(0.3); }
  20%{ opacity:.5; transform:translate(2px,-8px) scale(0.6); }
  100%{ opacity:0; transform:translate(6px,-30px) scale(1.4); }
}

.flame{
  position:absolute; left:50%; bottom:2px;
  border-radius:50% 50% 45% 45% / 62% 62% 38% 38%;
  opacity:0;
}
.flame-outer{
  width:44px; height:96px; margin-left:-22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, var(--amber-500) 32%, var(--amber-600) 62%, rgba(217,123,31,0) 100%);
  filter:blur(3px);
  animation: flameFlickerOuter .13s ease-in-out 9.9s infinite alternate;
}
.flame-inner{
  width:20px; height:52px; margin-left:-10px;
  background:linear-gradient(180deg, #ffffff 0%, #fff4c8 45%, var(--amber-500) 100%);
  animation: flameFlickerInner .09s ease-in-out 9.9s infinite alternate;
}
@keyframes flameFlickerOuter{
  0%{ opacity:.7; transform:scale(0.85, 0.88); }
  100%{ opacity:1; transform:scale(1.08, 1.18); }
}
@keyframes flameFlickerInner{
  0%{ opacity:.8; transform:scale(0.8, 0.85); }
  100%{ opacity:1; transform:scale(1.05, 1.2); }
}

.ignition-flash{
  position:absolute; bottom:-6px; left:50%;
  width:16px; height:16px; margin-left:-8px;
  border-radius:50%;
  background:radial-gradient(circle, #ffffff, var(--amber-500) 40%, rgba(242,153,74,0) 72%);
  opacity:0;
  animation: ignitionFlash .5s ease-out 9.8s forwards;
}
@keyframes ignitionFlash{
  0%{ opacity:0; transform:scale(0.3); }
  35%{ opacity:1; transform:scale(4); }
  100%{ opacity:0; transform:scale(5.5); }
}

.smoke{
  position:absolute; bottom:0; left:50%;
  width:32px; height:32px; margin-left:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.55), rgba(210,210,210,0.25) 60%, rgba(210,210,210,0) 76%);
  filter:blur(1px);
  opacity:0;
}
.smoke.s1{ animation: smokePuff 1.7s ease-out 9.82s forwards; }
.smoke.s2{ margin-left:-46px; animation: smokePuffLeft 1.9s ease-out 9.94s forwards; }
.smoke.s3{ margin-left:14px;  animation: smokePuffRight 1.8s ease-out 10.02s forwards; }
.smoke.s4{ margin-left:-24px; animation: smokePuffLeft 2.1s ease-out 10.12s forwards; }
.smoke.s5{ margin-left:30px;  animation: smokePuffRight 2s ease-out 10.2s forwards; }

@keyframes smokePuff{
  0%{ opacity:0; transform:translate(0,0) scale(0.4); }
  15%{ opacity:.8; transform:translate(0,-6px) scale(0.85); }
  100%{ opacity:0; transform:translate(0,-72px) scale(2.3); }
}
@keyframes smokePuffLeft{
  0%{ opacity:0; transform:translate(0,0) scale(0.4); }
  15%{ opacity:.8; transform:translate(-4px,-6px) scale(0.85); }
  100%{ opacity:0; transform:translate(-30px,-68px) scale(2.2); }
}
@keyframes smokePuffRight{
  0%{ opacity:0; transform:translate(0,0) scale(0.4); }
  15%{ opacity:.8; transform:translate(4px,-6px) scale(0.85); }
  100%{ opacity:0; transform:translate(30px,-68px) scale(2.2); }
}

@media (prefers-reduced-motion: reduce){
  .rocket-wrap, .flame, .ignition-flash, .smoke, .idle-smoke, .launch-thanks, .launch-sub,
  .countdown-wrap, .countdown-ring-fg{animation:none; opacity:1;}
}