/* ==========================================================================
   Welcome hero: EvoFox Ronin 75% Wireless illustration + plug states.
   Geometry follows the official layout (KEYBOARD_LAYOUT) and the Amkette
   quick start guide: knob top-right, EVOFOX plate under it, LED dots before
   the arrows, ON/OFF switch on the right edge, Type-C port on the top edge.

   States (data-state on .ronin-scene):
     idle       plug waits above the port, backlight dim, nothing moves
     waiting    browser chooser open: plug lowers a little, port ring breathes
     connected  plug seats (one soft settle), one ripple, keys light in a sweep
     unplugged  plug lifts out, keys dim, port ring turns amber (soft warning)
     error      one small nudge, red port ring, then back to idle
   data-link="rf" (2.4 GHz): cable steps aside, signal arcs show once.
   ========================================================================== */

@property --lit {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.3;
}

.connect-stage-hero.mesh::before { animation: none; }   /* keep the hero still */

.ronin-stage {
  container-type: inline-size;
  width: min(880px, 100%);
  margin: 0 auto;
}

.ronin-scene {
  --u: calc(100cqw / 17.4);        /* one key unit */
  --gap: calc(var(--u) * 0.1);
  --pad-x: 0.45;
  --pad-top: 0.55;
  --port-x: 9.6;                   /* Type-C port, above F8 / F9 */
  --plug-y: -1.15;                 /* in units; 0 = seated */
  position: relative;
  padding-top: calc(var(--u) * 2.4);
}

/* ---------- case ---------- */
.ronin-case {
  position: relative;
  height: calc(var(--u) * 7.2);
  border-radius: calc(var(--u) * 0.42);
  background: linear-gradient(180deg, var(--case-top), var(--case-bottom));
  border: 1px solid var(--case-edge);
  box-shadow:
    inset 0 1px 0 var(--case-highlight),
    0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) calc(var(--u) * -0.4) var(--floor-shadow);
}

.ronin-floor {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(var(--u) * -0.55);
  height: calc(var(--u) * 0.8);
  background: radial-gradient(closest-side, var(--floor-shadow), transparent);
  z-index: -1;
}

.ronin-plate {
  position: absolute;
  left: calc(var(--u) * 0.3);
  right: calc(var(--u) * 0.3);
  top: calc(var(--u) * 0.4);
  bottom: calc(var(--u) * 0.3);
  border-radius: calc(var(--u) * 0.22);
  background: var(--plate);
  box-shadow: inset 0 1px 3px var(--well-shadow);
}

/* ---------- keycaps (black + grey, shine-through legends) ---------- */
.rk {
  position: absolute;
  left: calc((var(--x) + var(--pad-x)) * var(--u));
  top: calc((var(--y) + var(--pad-top)) * var(--u));
  width: calc(var(--w) * var(--u) - var(--gap));
  height: calc(var(--h, 1) * var(--u) - var(--gap));
  border-radius: calc(var(--u) * 0.13);
  background: linear-gradient(180deg, var(--case-highlight), transparent 40%), var(--cap-face);
  box-shadow:
    inset 0 calc(var(--u) * -0.09) 0 var(--cap-skirt),
    0 0 calc(var(--u) * 0.34) calc(var(--u) * 0.03) color-mix(in srgb, var(--glow) calc(var(--lit) * 72%), transparent);
  /* shine-through: the LED colour, diffused a little toward white by the cap */
  color: color-mix(in srgb, color-mix(in srgb, var(--glow) 68%, var(--cap-legend-lit)) calc(var(--lit) * 100%), var(--cap-legend));
  font: italic 800 calc(var(--u) * 0.24) / 1 var(--font-display);
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(var(--u) * 0.08);
  padding: calc(var(--u) * 0.13) calc(var(--u) * 0.15);
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: --lit 520ms var(--ease-out) var(--delay, 0ms);
}

.rk.is-grey {
  background: linear-gradient(180deg, var(--case-highlight), transparent 40%), var(--cap-grey-face);
  box-shadow:
    inset 0 calc(var(--u) * -0.09) 0 var(--cap-grey-skirt),
    0 0 calc(var(--u) * 0.34) calc(var(--u) * 0.03) color-mix(in srgb, var(--glow) calc(var(--lit) * 72%), transparent);
}

.rk b { font: inherit; }
.rk.is-arrow b { font: 800 calc(var(--u) * 0.36) / 0.8 var(--font-ui); }
.rk.is-wide { align-items: center; }

.rk-sub {
  font: 500 calc(var(--u) * 0.17) / 1 var(--font-ui);
  font-style: normal;
  color: color-mix(in srgb, var(--cap-legend-lit) calc(var(--lit) * 85%), var(--cap-legend));
}
.rk-sub.is-icon { width: calc(var(--u) * 0.26); height: calc(var(--u) * 0.26); color: inherit; }
.rk-sub svg { width: 100%; height: 100%; display: block; }

/* light slit in the middle of the spacebar */
.rk.is-space::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 28%;
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 0.07);
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--glow) calc(25% + var(--lit) * 75%), var(--cap-skirt));
  box-shadow: 0 0 calc(var(--u) * 0.2) color-mix(in srgb, var(--glow) calc(var(--lit) * 80%), transparent);
}

/* silver knurled volume knob, right of Del */
.rk-knob {
  position: absolute;
  left: calc((15.3 + var(--pad-x)) * var(--u));
  top: calc((-0.08 + var(--pad-top)) * var(--u));
  width: calc(var(--u) * 1.12);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--knob-metal) 0 52%, transparent 53%),
    repeating-conic-gradient(var(--knob-metal-hi) 0 4deg, var(--knob-metal-lo) 4deg 8deg);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.03) var(--knob-metal-lo),
    0 calc(var(--u) * 0.06) calc(var(--u) * 0.16) var(--well-shadow);
}
.rk-knob::after {                   /* brushed top face highlight */
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--knob-metal-hi), var(--knob-metal) 60%, var(--knob-metal-lo));
}

/* black EVOFOX plate under the knob */
.rk-logo {
  position: absolute;
  left: calc((15.4 + var(--pad-x)) * var(--u));
  top: calc((1.32 + var(--pad-top)) * var(--u));
  width: calc(var(--u) * 1.0 - var(--gap));
  height: calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 0.1);
  background: var(--logo-plate);
  border: 1px solid var(--case-edge);
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(var(--u) * 0.1);
  color: var(--logo-ink);
  font: 800 calc(var(--u) * 0.15) / 1 var(--font-display);
  letter-spacing: 0.04em;
}

.rk-fox {
  width: calc(var(--u) * 0.48);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url(../assets/brand/fox-mark.svg) center / contain no-repeat;
          mask: url(../assets/brand/fox-mark.svg) center / contain no-repeat;
}

/* Caps Lock / Win Lock lights between Fn and ← */
.rk-leds {
  position: absolute;
  left: calc((12.3 + var(--pad-x)) * var(--u));
  top: calc((5.52 + var(--pad-top)) * var(--u));
  width: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--cap-legend);
}
.rk-leds svg { width: calc(var(--u) * 0.2); height: calc(var(--u) * 0.2); }
.rk-leds .dot {
  width: calc(var(--u) * 0.09);
  height: calc(var(--u) * 0.09);
  border-radius: 50%;
  background: var(--knob-ridge);
  transition: background var(--t-slow) var(--ease-out) 900ms, box-shadow var(--t-slow) var(--ease-out) 900ms;
}

/* Windows / macOS switch right of the arrow keys */
.rk-os {
  position: absolute;
  left: calc((16.22 + var(--pad-x)) * var(--u));
  top: calc((5.5 + var(--pad-top)) * var(--u));
  height: calc(var(--u) * 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--logo-ink);
  font: 600 calc(var(--u) * 0.16) / 1 var(--font-ui);
}
.rk-win {
  width: calc(var(--u) * 0.16);
  height: calc(var(--u) * 0.16);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 45% 45% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 45% 45% no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 45% 45% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 45% 45% no-repeat;
}
.rk-mac { font-style: normal; }
.rk-toggle {
  width: calc(var(--u) * 0.2);
  height: calc(var(--u) * 0.34);
  border-radius: var(--r-pill);
  background: var(--port-hole);
  box-shadow: inset 0 calc(var(--u) * 0.04) 0 0 var(--knob-ridge), 0 0 0 1px var(--case-edge);
}

/* ---------- Type-C port on the top edge ---------- */
.ronin-port {
  position: absolute;
  left: calc((var(--port-x) + var(--pad-x)) * var(--u));
  top: calc(var(--u) * -0.09);
  width: calc(var(--u) * 0.62);
  height: calc(var(--u) * 0.18);
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--port-hole);
  box-shadow: 0 0 0 1px var(--case-edge);
}

.ronin-port::after {               /* ring used for states */
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.22) calc(var(--u) * -0.24);
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--line-strong);
  opacity: 0.55;
  transition: border-color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}

/* ---------- cable ---------- */
.ronin-cable {
  position: absolute;
  left: calc((var(--port-x) + var(--pad-x)) * var(--u));
  bottom: calc(100% - var(--u) * 2.4 - var(--u) * 0.02);   /* plug tip sits on the port */
  width: calc(var(--u) * 0.62);
  transform: translate(-50%, calc(var(--plug-y) * var(--u)));
  transition: transform 560ms var(--ease-out), opacity var(--t-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.ronin-wire {
  width: calc(var(--u) * 0.2);
  height: calc(var(--u) * 3.4);
  background: linear-gradient(90deg, var(--wire), var(--knob-ridge) 45%, var(--wire));
  border-radius: var(--r-pill) var(--r-pill) 0 0;
}

.ronin-boot {
  width: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.95);
  margin-top: calc(var(--u) * -0.05);
  border-radius: calc(var(--u) * 0.14) calc(var(--u) * 0.14) calc(var(--u) * 0.08) calc(var(--u) * 0.08);
  background: linear-gradient(90deg, var(--plug-boot), var(--knob-ridge) 50%, var(--plug-boot));
  position: relative;
}

.ronin-boot::after {               /* status light on the boot */
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 0.16);
  width: calc(var(--u) * 0.2);
  height: calc(var(--u) * 0.05);
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--knob-ridge);
  transition: background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.ronin-tip {
  width: calc(var(--u) * 0.36);
  height: calc(var(--u) * 0.3);
  border-radius: 0 0 calc(var(--u) * 0.08) calc(var(--u) * 0.08);
  background: linear-gradient(90deg, var(--plug-metal-dark), var(--plug-metal) 50%, var(--plug-metal-dark));
}

/* ---------- 2.4 GHz signal arcs ---------- */
.ronin-signal {
  position: absolute;
  left: calc((var(--port-x) + var(--pad-x)) * var(--u));
  top: calc(var(--u) * 0.6);
  width: calc(var(--u) * 1.6);
  transform: translateX(-50%);
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
}

.ronin-signal path { opacity: 0.25; }

/* ---------- ripple at the port ---------- */
.ronin-ripple {
  position: absolute;
  left: calc((var(--port-x) + var(--pad-x)) * var(--u));
  top: calc(var(--u) * 2.4);
  width: calc(var(--u) * 0.7);
  height: calc(var(--u) * 0.7);
  margin: calc(var(--u) * -0.35) 0 0 calc(var(--u) * -0.35);
  border-radius: 50%;
  border: 2px solid var(--lime);
  opacity: 0;
  pointer-events: none;
}

/* ================= states ================= */
.ronin-scene[data-state="idle"] { --plug-y: -1.15; }

.ronin-scene[data-state="waiting"] { --plug-y: -0.55; }
.ronin-scene[data-state="waiting"] .ronin-port::after {
  border-style: solid;
  border-color: var(--accent-ink);
  animation: ronin-breathe 1.8s var(--ease) infinite;
}

.ronin-scene[data-state="connected"] { --plug-y: 0; --lit: 1; }
.ronin-scene[data-state="connected"] .ronin-cable { transition-timing-function: var(--spring); }
.ronin-scene[data-state="connected"] .ronin-boot::after {
  background: var(--lime);
  box-shadow: 0 0 calc(var(--u) * 0.16) var(--lime);
}
.ronin-scene[data-state="connected"] .ronin-port::after { opacity: 0; }
.ronin-scene[data-state="connected"] .rk-leds .dot { background: var(--led-on); box-shadow: 0 0 calc(var(--u) * 0.12) var(--led-on); }
.ronin-scene[data-state="connected"] .ronin-ripple { animation: ronin-ripple 760ms var(--ease-out) 380ms 1 both; }
.ronin-scene[data-state="connected"] .rk { --delay: calc(380ms + var(--x) * 26ms); }

.ronin-scene[data-state="unplugged"] { --plug-y: -1.6; --lit: 0.12; }
.ronin-scene[data-state="unplugged"] .rk { --delay: calc((16 - var(--x)) * 14ms); }
.ronin-scene[data-state="unplugged"] .ronin-port::after {
  border-style: solid;
  border-color: var(--warning);
  opacity: 0.9;
}

.ronin-scene[data-state="error"] { --plug-y: -0.9; }
.ronin-scene[data-state="error"] .ronin-cable { animation: ronin-nudge 420ms var(--ease) 1; }
.ronin-scene[data-state="error"] .ronin-port::after {
  border-style: solid;
  border-color: var(--danger);
  opacity: 0.9;
}

/* 2.4 GHz: no cable, signal arcs instead */
.ronin-scene[data-link="rf"] .ronin-cable { opacity: 0; --plug-y: -2.2; }
.ronin-scene[data-link="rf"] .ronin-port::after { opacity: 0; }
.ronin-scene[data-link="rf"] .ronin-ripple { animation: none; }
.ronin-scene[data-link="rf"][data-state="connected"] .ronin-signal { opacity: 1; }
.ronin-scene[data-link="rf"][data-state="connected"] .ronin-signal path {
  animation: ronin-arc 900ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 140ms);
}

/* no transition at all (used to jump to a start state before animating) */
.ronin-scene.no-anim, .ronin-scene.no-anim * { transition: none !important; animation: none !important; }

@keyframes ronin-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@keyframes ronin-ripple {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(3); }
}
@keyframes ronin-nudge {
  0%, 100% { translate: 0 0; }
  30% { translate: calc(var(--u) * -0.08) 0; }
  60% { translate: calc(var(--u) * 0.08) 0; }
}
@keyframes ronin-arc { from { opacity: 0.1; } to { opacity: 1; } }

/* Reduced motion: states change instantly, nothing moves or pulses */
@media (prefers-reduced-motion: reduce) {
  .ronin-scene, .ronin-scene * {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Live keyboard previews (Dashboard, RGB Lighting, Key Remapping, Custom RGB)
   reuse the same Ronin. The effects engine sets --glow and --lit per key.
   ========================================================================== */
.keyboard-stage.is-ronin {
  container-type: inline-size;
  width: 100%;
  max-width: 1000px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none !important;
}

.ronin-scene.is-live { padding-top: 0; --lit: 0.3; }
.ronin-scene.is-live .ronin-case { cursor: default; }
.ronin-scene.is-live .rk {
  cursor: pointer;
  transition: transform 60ms ease-out;   /* no slow fade: effects run at 60 fps */
}
.ronin-scene.is-live .rk:hover { filter: brightness(1.18); }
.ronin-scene.is-live .rk.key-pressed { transform: translateY(2px); }
.ronin-scene.is-live .rk.key-selected {
  box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px var(--ring-edge) !important;
  z-index: 2;
}
.ronin-scene.is-live .rk.key-locked { opacity: 0.4; cursor: not-allowed; }

/* Custom RGB canvas: show each painted colour clearly (tinted cap + stronger bleed) */
.ronin-scene.is-customrgb .rk {
  background: linear-gradient(180deg, var(--case-highlight), transparent 40%),
              color-mix(in srgb, var(--glow) 16%, var(--cap-face));
  box-shadow:
    inset 0 calc(var(--u) * -0.09) 0 var(--cap-skirt),
    0 0 calc(var(--u) * 0.4) calc(var(--u) * 0.05) color-mix(in srgb, var(--glow) 85%, transparent);
}
.ronin-scene.is-customrgb .rk.is-grey {
  background: linear-gradient(180deg, var(--case-highlight), transparent 40%),
              color-mix(in srgb, var(--glow) 22%, var(--cap-grey-face));
  box-shadow:
    inset 0 calc(var(--u) * -0.09) 0 var(--cap-grey-skirt),
    0 0 calc(var(--u) * 0.4) calc(var(--u) * 0.05) color-mix(in srgb, var(--glow) 85%, transparent);
}