/* ============================================================
   FIKR CMS — Homepage hero scene (index.html only)
   Night command-center background + live-ops glass panel + the
   animated robot mascot. Loaded only on index.html so the other
   9 pages carry none of this extra CSS.
   Uses the SAME brand tokens as site.css (--indigo-*, --mauve-*).
   ============================================================ */

.hero.hero-scene{
  background:none;
  isolation:isolate;
}

/* ---------- background layers ---------- */
.hero-scene .scene-bg{
  position:absolute;inset:-6%;z-index:-6;
  background:
    radial-gradient(circle at 78% 25%,rgba(142,125,120,.35),transparent 45%),
    linear-gradient(180deg,var(--indigo-900) 0%,var(--indigo-800) 45%,var(--indigo-950) 100%);
  animation:hs-kenburns 26s ease-in-out infinite alternate;
}
@keyframes hs-kenburns{to{transform:scale(1.08) translate(-1.5%,1%);}}

.hero-scene .stars{position:absolute;inset:0;z-index:-5;overflow:hidden;pointer-events:none;}
.hero-scene .stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.6;animation:hs-twinkle 3s infinite alternate;}
@keyframes hs-twinkle{to{opacity:.1;}}

.hero-scene .skyline{position:absolute;inset-inline:0;inset-block-end:0;width:100%;height:34%;z-index:-4;opacity:.85;pointer-events:none;}

.hero-scene .scene-grid{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(142,125,120,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(142,125,120,.14) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse at 65% 40%,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 65% 40%,#000 15%,transparent 72%);
  animation:hs-pan 30s linear infinite;
}
@keyframes hs-pan{to{background-position:52px 52px;}}

.hero-scene .scanline{
  position:absolute;inset-inline:0;height:2px;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--mauve-500),transparent);
  opacity:.5;animation:hs-scan 7s linear infinite;
}
@keyframes hs-scan{from{top:-2%;}to{top:102%;}}

/* ---------- hero tag (eyebrow pill above the existing eyebrow) ---------- */
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--mauve-500);border-radius:999px;padding:6px 14px;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#d9d0cc;
  background:rgba(20,18,60,.4);margin-bottom:14px;
}
html[lang="ar"] .hero-tag{letter-spacing:0;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#8ee6a1;flex:none;animation:hs-pulse 1.8s infinite;}
@keyframes hs-pulse{0%{box-shadow:0 0 0 0 rgba(142,230,161,.6);}70%,100%{box-shadow:0 0 0 10px rgba(142,230,161,0);}}

/* ---------- live-ops glass panel ---------- */
.hero-panel{
  position:relative;z-index:3;
  border:1px solid rgba(142,125,120,.45);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(52,46,121,.7),rgba(21,18,60,.85));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:26px;box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06);
  animation:hs-float 6s ease-in-out infinite;
}
@keyframes hs-float{50%{transform:translateY(-8px);}}
.hero-panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#c3bcdd;}
.hero-panel .ph span{display:flex;align-items:center;gap:8px;}
.hero-panel .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hero-panel .stat{background:rgba(255,255,255,.05);border:1px solid rgba(142,125,120,.28);border-radius:12px;padding:14px 16px;}
.hero-panel .stat.wide{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;}
.hero-panel .stat b{display:block;font-family:var(--ff-head);font-size:1.8rem;color:#fff;line-height:1;}
.hero-panel .stat small{font-size:.95rem;color:var(--mauve-400);font-weight:600;}
.hero-panel .stat span{display:block;font-size:.76rem;color:#b6aed3;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;}
.hero-panel .stat.wide span{margin-top:0;}
.hero-panel .feed{margin-top:16px;font-size:.8rem;color:#c3bcdd;border-top:1px dashed rgba(142,125,120,.35);padding-top:14px;display:grid;gap:8px;}
.hero-panel .feed div{display:flex;gap:10px;}
.hero-panel .feed b{color:var(--mauve-400);font-weight:600;font-variant-numeric:tabular-nums;flex:none;}

/* ---------- robot mascot ---------- */
.hero-bot{position:absolute;left:0;top:0;z-index:6;width:clamp(96px,10vw,150px);pointer-events:none;will-change:transform;}
.hero-bot .bot-bob{animation:hs-bob 3.4s ease-in-out infinite;}
@keyframes hs-bob{50%{transform:translateY(-8px);}}
.hero-bot .bot-lean{transform-origin:50% 90%;}
.hero-bot svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45));}
.hero-bot #bot-head{transform-origin:100px 106px;}
.hero-bot #bot-pupils{transition:transform .08s linear;}
.hero-bot .bot-blink{animation:hs-blink 5s infinite;transform-origin:100px 79px;}
@keyframes hs-blink{0%,94%,100%{transform:scaleY(1);}97%{transform:scaleY(.1);}}
.hero-bot .bot-ant{animation:hs-ant 1.6s ease-in-out infinite;}
@keyframes hs-ant{50%{opacity:.35;}}
.hero-bot .bot-armL{transform-origin:40px 122px;animation:hs-swayL 3.4s ease-in-out infinite;}
.hero-bot .bot-armR{transform-origin:160px 122px;animation:hs-swayR 3.4s ease-in-out infinite;}
@keyframes hs-swayL{50%{transform:rotate(6deg);}}
@keyframes hs-swayR{50%{transform:rotate(-6deg);}}
.hero-bot #bot-flame{transform-origin:100px 196px;}
.hero-bot .bot-halo{position:absolute;inset:-30% -30% -10%;border-radius:50%;background:radial-gradient(circle,rgba(142,125,120,.32),transparent 65%);z-index:-1;animation:hs-halo 4s ease-in-out infinite;}
@keyframes hs-halo{50%{transform:scale(1.15);opacity:.7;}}
.hero-bot .bot-bubble{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;
  max-width:220px;white-space:normal;text-align:center;
  background:#fff;color:var(--indigo-800);font:600 .78rem var(--ff-body);
  padding:8px 14px;border-radius:999px;box-shadow:0 10px 22px rgba(0,0,0,.35);
}
html[lang="ar"] .hero-bot .bot-bubble{font-family:var(--ff-ar);}
.hero-bot .bot-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;}

/* the night scene reads the same in light or dark theme — it is a
   fixed nighttime setting, not something that should flip to "daylight" */
[data-theme="dark"] .hero.hero-scene{background:none;}

@media (max-width:960px){
  .hero-bot{width:clamp(76px,9vw,120px);}
}
@media (max-width:640px){
  .hero-panel{padding:20px;}
  .hero-panel .stat b{font-size:1.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .hero-scene .scene-bg,.hero-scene .stars i,.hero-scene .scene-grid,.hero-scene .scanline,
  .live-dot,.hero-panel,.hero-bot,.hero-bot *{animation:none!important;transition:none!important;}
}

/* ---------- editable robot (Appearance > Robot) ---------- */
.hero-bot .bot-bob{position:relative;}
.hero-bot .bot-halo{background:radial-gradient(circle,color-mix(in srgb,var(--rb-glow,#8e7d78) 34%,transparent),transparent 65%);}
.hero-bot .bot-chest{position:absolute;left:50%;top:61.5%;width:11.5%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;border-radius:4px;filter:none;}
@media (max-width:640px){.hero{padding:72px 0 96px;}}