/* ==================== KK WEATHER USA — FIRE THEME ==================== */

:root{
  --bg-void:#050608;
  --bg-deep:#0a0d16;
  --bg-panel:#12101a;
  --bg-panel-2:#171220;
  --navy:#0e1830;
  --ember:#ffcf4d;
  --flame-1:#ff9d2e;
  --flame-2:#ff6a1a;
  --fire-red:#ff2d1a;
  --fire-red-dark:#9e1208;
  --smoke:#f4ede2;
  --muted:#b7ad c2;
  --muted:#a79cb0;
  --muted:#a79cb0;
  --line:rgba(255,140,50,.18);
  --shadow-fire:0 0 30px rgba(255,90,20,.35);
  --font-head:'Oswald',sans-serif;
  --font-body:'Rajdhani',sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--smoke);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  cursor:default;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-head); letter-spacing:.02em; text-transform:uppercase;}
section{position:relative;}

a, button, .fire-card, .modal-close{ cursor:pointer; }

::selection{background:var(--fire-red); color:#fff;}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg-void);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--flame-1),var(--fire-red)); border-radius:10px;}

/* ==================== IGNITION INTRO ==================== */
#ignite-overlay{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#ignite-overlay.done{ animation:igniteFadeOut .45s ease forwards; pointer-events:none; }
@keyframes igniteFadeOut{ to{opacity:0; visibility:hidden;} }

#ignite-fire-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:104%; top:-2%;
  filter:blur(1.8px) saturate(1.25) contrast(1.08);
}

.ignite-smoke{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6;
  background:
    radial-gradient(ellipse 42% 30% at 22% 6%, rgba(35,26,26,.55), transparent 72%),
    radial-gradient(ellipse 38% 26% at 72% 3%, rgba(35,26,26,.5), transparent 72%),
    radial-gradient(ellipse 30% 22% at 50% 0%, rgba(30,22,22,.45), transparent 70%);
  animation:smokeDrift 2.6s ease-in-out infinite alternate;
}
@keyframes smokeDrift{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-16px) scale(1.07); } }

.ignite-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 25%, rgba(0,0,0,.4) 80%),
    linear-gradient(to top, transparent 58%, rgba(6,3,2,.88) 100%);
}

.ignite-sparks{ position:absolute; inset:0; z-index:2; }
.ignite-sparks span{
  position:absolute; bottom:6%;
  width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #fff6dc, var(--flame-1) 55%, transparent 72%);
  opacity:0;
  animation:sparkFloat 1.6s ease-out infinite;
  box-shadow:0 0 8px 1px rgba(255,170,60,.8);
}
.ignite-sparks span:nth-child(1){left:6%; animation-delay:.05s;}
.ignite-sparks span:nth-child(2){left:16%; animation-delay:.42s;}
.ignite-sparks span:nth-child(3){left:27%; animation-delay:.18s;}
.ignite-sparks span:nth-child(4){left:38%; animation-delay:.6s;}
.ignite-sparks span:nth-child(5){left:49%; animation-delay:.02s;}
.ignite-sparks span:nth-child(6){left:58%; animation-delay:.5s;}
.ignite-sparks span:nth-child(7){left:67%; animation-delay:.28s;}
.ignite-sparks span:nth-child(8){left:77%; animation-delay:.66s;}
.ignite-sparks span:nth-child(9){left:87%; animation-delay:.14s;}
.ignite-sparks span:nth-child(10){left:95%; animation-delay:.36s;}
@keyframes sparkFloat{
  0%{ transform:translateY(0) translateX(0) scale(.5); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:translateY(-72vh) translateX(var(--drift,12px)) scale(1.3); opacity:0; }
}

.ignite-logo{
  position:relative; z-index:3; text-align:center;
  opacity:0;
  animation:logoPop .6s cubic-bezier(.25,.8,.3,1.3) .35s forwards;
}
.ignite-logo img{ width:120px; margin:0 auto 14px; filter:drop-shadow(0 0 25px rgba(255,140,40,.8)); }
.ignite-logo p{
  font-family:var(--font-head); letter-spacing:.35em; font-size:.8rem;
  color:var(--ember); text-shadow:0 0 12px rgba(255,180,60,.8);
}
@keyframes logoPop{
  0%{ opacity:0; transform:scale(.7); }
  60%{ opacity:1; transform:scale(1.08); }
  100%{ opacity:1; transform:scale(1); }
}

/* ==================== FIRE CLICK CANVAS ==================== */
#fire-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:9998;
}

/* ==================== TICKER ==================== */
.ticker{
  display:flex; align-items:stretch;
  background:linear-gradient(90deg, var(--fire-red-dark), var(--fire-red));
  border-bottom:1px solid rgba(0,0,0,.4);
  height:34px; overflow:hidden;
}
.ticker-label{
  flex:none; display:flex; align-items:center;
  padding:0 14px; font-family:var(--font-head); font-size:.72rem; letter-spacing:.08em;
  background:#000; color:var(--ember); white-space:nowrap;
}
.ticker-track{ flex:1; display:flex; overflow:hidden; position:relative; }
.ticker-content{
  display:flex; align-items:center; white-space:nowrap;
  padding-left:100%;
  animation:tickerScroll 42s linear infinite;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.ticker-content span{ margin-right:2.5rem; }
@keyframes tickerScroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* ==================== HEADER ==================== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(6,7,12,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1240px; margin:0 auto; padding:.7rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-logo{ width:44px; height:44px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-head); font-size:1.05rem; letter-spacing:.04em; }
.brand-text small{ color:var(--muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }

.main-nav{ display:flex; gap:1.6rem; }
.main-nav a{
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:.3rem 0;
}
.main-nav a:hover{ color:var(--flame-1); }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:linear-gradient(90deg,var(--flame-1),var(--fire-red)); transition:width .25s ease;
}
.main-nav a:hover::after{ width:100%; }

@media (max-width:820px){ .main-nav{ display:none; } }

/* ==================== FIRE BUTTONS ==================== */
.btn-fire{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  padding:.68rem 1.4rem; border-radius:999px; border:1px solid rgba(255,180,90,.35);
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 6px 18px rgba(255,45,20,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-fire:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 10px 28px rgba(255,60,20,.55); }
.btn-fire:active{ transform:translateY(0) scale(.97); }
.btn-content{ position:relative; z-index:3; display:flex; align-items:center; gap:.45rem; }
.yt-icon{ width:16px; height:16px; }

.flame-layer{
  position:absolute; inset:-40% -10% -10%; z-index:1;
  background:linear-gradient(180deg, var(--fire-red-dark) 0%, var(--fire-red) 55%, var(--flame-2) 100%);
}
.flame-layer::before, .flame-layer::after{
  content:''; position:absolute; bottom:-10%; width:60%; height:130%;
  background:radial-gradient(ellipse at bottom, var(--ember) 0%, var(--flame-1) 35%, var(--fire-red) 60%, transparent 72%);
  filter:blur(3px);
  opacity:.9;
  border-radius:50% 50% 40% 40%;
}
.flame-layer::before{ left:-5%; animation:lick1 1.1s ease-in-out infinite; }
.flame-layer::after{ right:-5%; animation:lick2 1.35s ease-in-out infinite; }
@keyframes lick1{
  0%,100%{ transform:translateY(0) scaleY(1) scaleX(1); opacity:.75; }
  50%{ transform:translateY(-18%) scaleY(1.25) scaleX(.85); opacity:1; }
}
@keyframes lick2{
  0%,100%{ transform:translateY(0) scaleY(1.1) scaleX(.9); opacity:.7; }
  50%{ transform:translateY(-22%) scaleY(1.3) scaleX(.8); opacity:1; }
}
.btn-fire:hover .flame-layer::before,
.btn-fire:hover .flame-layer::after{ animation-duration:.55s; }

.btn-subscribe{
  background:linear-gradient(180deg, var(--fire-red) 0%, var(--fire-red-dark) 100%);
  border-color:rgba(255,90,60,.5);
}
.btn-lg{ padding:1rem 2.2rem; font-size:.95rem; }

.btn-outline{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.68rem 1.4rem; border-radius:999px; border:1px solid rgba(255,255,255,.3);
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--smoke); transition:all .2s ease;
}
.btn-outline:hover{ border-color:var(--flame-1); color:var(--flame-1); background:rgba(255,120,30,.08); }

/* ==================== HERO ==================== */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(4,5,9,.55) 0%, rgba(5,6,10,.55) 45%, rgba(5,6,8,.95) 100%),
    linear-gradient(90deg, rgba(5,6,10,.75) 0%, rgba(5,6,10,.15) 55%, rgba(5,6,10,.6) 100%);
}
.hero-inner{
  position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:2rem 1.5rem;
  width:100%;
}
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-size:.72rem; letter-spacing:.14em;
  color:var(--ember); background:rgba(255,90,20,.14); border:1px solid rgba(255,140,50,.4);
  padding:.35rem .8rem; border-radius:999px; margin-bottom:1.1rem;
}
.hero h1{
  font-size:clamp(2.2rem, 5.4vw, 4.1rem); line-height:1.05; max-width:16ch; margin-bottom:1.1rem;
}
.hero h1 span{
  display:block;
  background:linear-gradient(90deg, var(--ember), var(--flame-1) 45%, var(--fire-red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(255,80,20,.35);
}
.hero p{ max-width:52ch; color:var(--muted); font-size:1.08rem; margin-bottom:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ==================== STATS BAR ==================== */
.stats-bar{ max-width:1240px; margin:0 auto; padding:3.2rem 1.5rem 1rem; }
.stats-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin-bottom:1.4rem; border-bottom:1px solid var(--line); padding-bottom:.9rem;
}
.stats-head h2{ font-size:1.5rem; }
.stats-source{ color:var(--muted); font-size:.78rem; letter-spacing:.03em; }
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem;
}
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2, 1fr); } }
.stat-card{
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.2rem;
  text-align:center; position:relative; overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--flame-1), var(--fire-red));
}
.stat-num{
  display:block; font-family:var(--font-head); font-size:2.1rem; font-weight:700;
  background:linear-gradient(180deg, var(--ember), var(--flame-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ display:block; margin-top:.35rem; font-size:.78rem; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; }

/* ==================== NEWS ==================== */
.news{ max-width:1240px; margin:0 auto; padding:3.6rem 1.5rem; }
.news-head{ max-width:60ch; margin-bottom:2.2rem; }
.news-head h2{ font-size:clamp(1.7rem,3.2vw,2.3rem); margin:.5rem 0 .7rem; }
.news-head p{ color:var(--muted); }

.fire-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1.4rem;
}
.fire-card{
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--line); border-radius:16px; padding:1.5rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fire-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,140,50,.55);
  box-shadow:0 18px 40px rgba(255,60,20,.22);
}
.fire-card-top{ display:flex; align-items:center; justify-content:space-between; }
.fire-tag{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ember);
  background:rgba(255,120,30,.1); border:1px solid rgba(255,140,50,.3);
  padding:.25rem .6rem; border-radius:999px;
}
.fire-flames{ font-size:.85rem; letter-spacing:.1em; filter:drop-shadow(0 0 6px rgba(255,110,20,.6)); }
.fire-card h3{ font-size:1.15rem; line-height:1.3; text-transform:none; letter-spacing:0; }
.fire-stat{
  font-family:var(--font-head); font-size:.8rem; letter-spacing:.03em; color:var(--flame-1);
}
.fire-excerpt{ color:var(--muted); font-size:.94rem; flex:1; }
.fire-readmore{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke);
  margin-top:.3rem;
}
.fire-readmore .arrow{ transition:transform .2s ease; }
.fire-card:hover .fire-readmore .arrow{ transform:translateX(5px); }

/* ==================== YT PROMO ==================== */
.yt-promo{
  margin:2rem 1.5rem; max-width:1240px; margin-left:auto; margin-right:auto;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,110,20,.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,30,20,.18), transparent 45%),
    linear-gradient(160deg, var(--navy), #090a12);
  border:1px solid var(--line); border-radius:22px; padding:3rem 2.2rem;
}
.yt-promo-inner{
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:space-between;
}
.yt-promo-logo{ width:74px; filter:drop-shadow(0 0 20px rgba(255,120,30,.5)); }
.yt-promo-inner > div{ flex:1; min-width:260px; }
.yt-promo h2{ font-size:1.6rem; margin-bottom:.5rem; }
.yt-promo p{ color:var(--muted); max-width:48ch; }

/* ==================== ABOUT ==================== */
.about{ max-width:820px; margin:0 auto; padding:3.5rem 1.5rem 4.5rem; }
.about h2{ font-size:1.6rem; margin-bottom:1rem; }
.about p{ color:var(--muted); margin-bottom:1rem; }
.about .disclaimer{ font-size:.85rem; border-left:2px solid var(--flame-2); padding-left:.9rem; }

/* ==================== FOOTER ==================== */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-deep); padding:2.6rem 1.5rem 1.4rem; }
.footer-inner{
  max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.4rem; padding-bottom:1.6rem;
}
.footer-brand{ display:flex; align-items:center; gap:.7rem; }
.footer-brand img{ width:40px; }
.footer-brand p{ font-family:var(--font-head); font-size:.9rem; letter-spacing:.05em; }
.footer-brand small{ color:var(--muted); font-family:var(--font-body); letter-spacing:.03em; }
.footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-links a{ color:var(--muted); font-size:.85rem; }
.footer-links a:hover{ color:var(--flame-1); }
.footer-copy{
  max-width:1240px; margin:0 auto; border-top:1px solid var(--line); padding-top:1.2rem;
  color:var(--muted); font-size:.76rem;
}

/* ==================== MODAL ==================== */
.modal{ position:fixed; inset:0; z-index:2000; display:none; }
.modal.open{ display:block; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(3,3,6,.8); backdrop-filter:blur(6px);
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal-panel{
  position:relative; z-index:1; max-width:640px; width:92%; max-height:84vh; overflow-y:auto;
  margin:6vh auto; background:linear-gradient(170deg, var(--bg-panel), #0c0a12);
  border:1px solid rgba(255,140,50,.35); border-radius:18px; padding:2.2rem 2rem 2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,90,20,.08);
  animation:modalPop .3s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes modalPop{ from{ opacity:0; transform:translateY(20px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.modal-panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, var(--ember), var(--flame-2), var(--fire-red));
}
.modal-close{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--smoke);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--fire-red); border-color:var(--fire-red); }
.modal-tag{
  display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ember);
  background:rgba(255,120,30,.1); border:1px solid rgba(255,140,50,.3); padding:.25rem .6rem; border-radius:999px;
  margin-bottom:.8rem;
}
.modal-panel h3{ font-size:1.5rem; text-transform:none; letter-spacing:0; line-height:1.3; margin-bottom:.6rem; }
.modal-stat{ font-family:var(--font-head); color:var(--flame-1); font-size:.9rem; margin-bottom:1.1rem; }
.modal-body p{ color:var(--muted); margin-bottom:1rem; font-size:1rem; }
.modal-source{
  font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding:1rem 0 1.4rem; margin-bottom:1rem;
}
.modal-source a{ color:var(--flame-1); text-decoration:underline; text-underline-offset:3px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width:520px){
  .header-inner{ padding:.6rem 1rem; }
  .hero{ min-height:100vh; }
  .yt-promo-inner{ justify-content:center; text-align:center; }
}