/* ============================================================
   NARA FX — hero robotics scene + companion drone
   ============================================================ */
#hero .nara-fx-canvas {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
}
#hero .nara-fx-canvas.is-ready { opacity: 1; }
@media (min-width: 1024px) {   /* fade the scene out before it reaches the headline */
  #hero .nara-fx-canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
            mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
  }
  html[dir="rtl"] #hero .nara-fx-canvas {
    -webkit-mask-image: linear-gradient(270deg, transparent 40%, #000 60%);
            mask-image: linear-gradient(270deg, transparent 40%, #000 60%);
  }
}
#hero { cursor: crosshair; }
#hero a, #hero button { cursor: pointer; }
@media (max-width: 1023px) {
  #hero .nara-fx-canvas.is-ready { opacity: 0.35; }   /* ambient behind text on tablets/phones */
  #hero { cursor: auto; }
}

/* ── companion drone ── */
.nara-companion {
  position: fixed; left: 0; top: 0; z-index: 900;
  width: 64px; height: 36px;
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0, 194, 255, .25));
}
.nara-companion.is-on { opacity: 1; }
.nara-companion svg { display: block; overflow: visible; }
.nara-companion .nc-disc  { fill: rgba(0, 194, 255, .18); }
.nara-companion .nc-blade { fill: var(--white); opacity: .8; transform-box: fill-box; transform-origin: center; animation: ncSpin .11s linear infinite; }
.nara-companion .nc-b2    { animation-delay: -.05s; }
.nara-companion .nc-arm, .nara-companion .nc-leg { stroke: var(--white); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nara-companion .nc-body  { fill: var(--white); stroke: var(--accent); stroke-width: 1.2; }
.nara-companion .nc-stripe { fill: var(--accent); }
.nara-companion .nc-cam   { fill: var(--bg); stroke: var(--accent); stroke-width: 1.2; }
.nara-companion .nc-led   { animation: ncBlink 1.1s steps(2, jump-none) infinite; }
.nara-companion .nc-g { fill: #00FFB2; }
.nara-companion .nc-r { fill: #FF4D5E; animation-delay: -.55s; }
.nara-companion .nc-beam {
  position: absolute; left: 50%; top: 26px; width: 90px; height: 70px;
  transform: translateX(-50%) scaleY(0); transform-origin: top center;
  background: linear-gradient(to bottom, rgba(0, 194, 255, .45), rgba(0, 194, 255, 0));
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  opacity: 0;
}
.nara-companion.is-scan .nc-beam { animation: ncBeam 1.4s ease forwards; }
.section-label.fx-scanned { animation: ncLabel 1.5s ease; }

@keyframes ncSpin  { 0% { transform: scaleX(1); } 50% { transform: scaleX(.08); } 100% { transform: scaleX(1); } }
@keyframes ncBlink { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes ncBeam  {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  25%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  75%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(.2); }
}
@keyframes ncLabel {
  0%, 100% { text-shadow: none; }
  30%, 60% { text-shadow: 0 0 10px rgba(0, 194, 255, .9), 0 0 22px rgba(0, 194, 255, .5); }
}

/* light mode */
body.light-mode .nara-companion { filter: drop-shadow(0 6px 10px rgba(0, 80, 140, .2)); }
body.light-mode .nara-companion .nc-g { fill: #00A874; }

@media (max-width: 1099px) { .nara-companion { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nara-companion { display: none; }
  #hero { cursor: auto; }
}