/* PhaseSky Drone visualization (REV_002) */

.phasesky-drone {
  --silver: #d9e1eb;
  --charcoal: #0b1018;
  --charcoal-soft: #111827;
  --accent: #7dd5ff;
  --accent-soft: rgba(125, 213, 255, 0.28);
  --shadow-strong: 0 26px 72px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.28);
  background: radial-gradient(circle at 50% 32%, rgba(125, 213, 255, 0.14), rgba(10, 14, 20, 0)),
    linear-gradient(180deg, rgba(10, 13, 18, 0.96), rgba(7, 10, 15, 0.9));
  border-radius: 18px;
  padding: 1.6rem 1.8rem 1.3rem;
  box-shadow: var(--shadow-strong);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: var(--silver);
}

.phasesky-drone__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.phasesky-drone__glow,
.phasesky-drone__grid {
  position: absolute;
  inset: 0;
}

.phasesky-drone__glow {
  background:
    radial-gradient(circle at 50% 40%, rgba(125, 213, 255, 0.16), rgba(125, 213, 255, 0) 48%),
    radial-gradient(circle at 70% 24%, rgba(217, 227, 238, 0.08), transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(125, 213, 255, 0.12), transparent 42%);
  opacity: 0.7;
}

.phasesky-drone__grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  mask-image: radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.6;
}

.phasesky-drone__scene {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
  z-index: 1;
  perspective: 1200px;
  perspective-origin: 50% 52%;
}

.phasesky-drone__model {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms ease-in-out;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.35));
}

.phasesky-drone__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.psk-root {
  transition: transform 700ms ease-in-out;
}

.psk-layer {
  transition: transform 700ms ease-in-out;
}

.psk-frame,
.psk-arm,
.psk-electronics,
.psk-motor,
.psk-prop {
  transform-box: fill-box;
  transform-origin: center;
}

.frame-body {
  fill: var(--charcoal);
  stroke: #0d1320;
  stroke-width: 2.6;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
}

.frame-stripe {
  fill: var(--accent);
  opacity: 0.7;
}

.elec-board {
  fill: var(--charcoal-soft);
  stroke: var(--accent);
  stroke-width: 1.9;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
}

.elec-topper {
  fill: rgba(125, 213, 255, 0.35);
}

.psk-arm .arm-body {
  fill: #0f1624;
  stroke: #182033;
  stroke-width: 1.6;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.34));
}

.psk-arm .arm-inset {
  fill: rgba(125, 213, 255, 0.22);
  stroke: rgba(125, 213, 255, 0.18);
  stroke-width: 1;
}

.psk-motor .motor-bell {
  fill: var(--silver);
  stroke: #c1cada;
  stroke-width: 1.6;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.24));
}

.psk-motor .motor-body {
  fill: #0c111c;
  stroke: #151c2c;
  stroke-width: 1.2;
}

.psk-motor .motor-hub {
  fill: var(--accent);
  stroke: #5ca1c7;
  stroke-width: 1;
}

.psk-prop .prop-blade {
  fill: #c7d4df;
  stroke: #a3b6c7;
  stroke-width: 0.9;
  opacity: 0.95;
  transform-origin: center;
}

.psk-prop .prop-hub {
  fill: #131a27;
  stroke: var(--accent);
  stroke-width: 0.9;
}

.psk-halo {
  opacity: 0.72;
}

/* Labels */
.psk-label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-family);
  letter-spacing: 0.11em;
  color: var(--silver);
  text-transform: uppercase;
  z-index: 2;
}

.psk-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 380ms ease-in-out;
  transition-delay: var(--label-delay, 0s);
}

.psk-leader {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(125, 213, 255, 0.9), rgba(125, 213, 255, 0));
  opacity: 0.72;
  transform-origin: left center;
  transform: rotate(var(--leader-angle, 0deg));
}

.phasesky-drone.is-exploded .psk-label {
  opacity: 1;
}

.phasesky-drone__hint {
  margin-top: 0.9rem;
  color: var(--silver);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.76;
}

.phasesky-drone__caption {
  margin-top: 0.65rem;
  color: var(--color-secondary);
  font-size: 0.95rem;
  max-width: 760px;
}

@media (max-width: 720px) {
  .phasesky-drone__scene {
    min-height: 320px;
  }

  .psk-label {
    font-size: 0.72rem;
  }
}