/* ============================================================
   showcase.css — Interactive 3D showcase + range animation
   Field Manual visual language. Uses :root tokens from styles.css.
   Compositor-friendly transforms only (transform / opacity).
   ============================================================ */

/* ---------- 3D Showcase ---------------------------------- */

.showcase3d {
  perspective: 1200px;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.showcase3d__stage {
  position: relative;
  width: min(430px, 86vw);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}

/* pointer-follow glow behind the device */
.showcase3d__glow {
  position: absolute;
  inset: -8%;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      42% 42% at var(--px, 38%) var(--py, 46%),
      var(--c-glow-wheat, rgba(200, 162, 74, 0.42)),
      transparent 70%
    );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
  transform: translateZ(-40px);
  filter: blur(2px);
}

.showcase3d:hover .showcase3d__glow,
.showcase3d:focus-within .showcase3d__glow {
  opacity: 1;
}

/* ----- the cannon image -----
   Uses a pre-cropped transparent PNG (pgt-cannon.png) — only the device,
   green checkmark already removed. Shown whole via object-fit: contain. */
.showcase3d__stage {
  overflow: visible;
}

.showcase3d__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateZ(30px);
  /* gentle premium grounding shadow */
  filter: drop-shadow(0 22px 30px rgba(10, 30, 63, 0.4));
  pointer-events: none;
  user-select: none;
}

/* ----- hotspots ----- */
.showcase3d__hotspot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;     /* center on the point */
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transform: translateZ(60px);
  -webkit-tap-highlight-color: transparent;
}

/* white core dot */
.showcase3d__hotspot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--r-pill);
  background: var(--c-paper, #FAF6EC);
  box-shadow: 0 0 0 2px var(--c-wheat, #C8A24A), var(--sh-sm);
  z-index: 2;
}

/* pulsing wheat ring */
.showcase3d__hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--c-wheat, #C8A24A);
  opacity: 0.55;
  z-index: 1;
  animation: showcase-pulse 2.2s var(--ease-out-quint) infinite;
}

@keyframes showcase-pulse {
  0%   { transform: scale(0.7); opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.showcase3d__hotspot:hover,
.showcase3d__hotspot:focus-visible {
  outline: none;
}

.showcase3d__hotspot:focus-visible::before {
  box-shadow: 0 0 0 2px var(--c-wheat, #C8A24A), 0 0 0 5px var(--c-sky, #3BA7FF);
}

/* ----- tooltip (built/positioned by showcase.js) ----- */
.showcase3d__tip {
  position: absolute;
  z-index: 5;
  left: var(--x, 50%);
  top: var(--y, 50%);
  /* sit above the dot, centered */
  transform: translate(-50%, calc(-100% - 16px)) translateZ(70px);
  width: max-content;
  max-width: 250px;
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  background: rgba(8, 13, 24, 0.96);
  backdrop-filter: blur(8px);
  color: #EDF1F7;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(231, 197, 122, 0.32);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out-quint),
              transform var(--dur-fast) var(--ease-out-quint);
}

.showcase3d__tip.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 22px)) translateZ(70px);
}

/* tooltip arrow */
.showcase3d__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--c-deep, #0A1E3F);
  border-right: 1px solid var(--c-rule-dark, #1E3461);
  border-bottom: 1px solid var(--c-rule-dark, #1E3461);
  transform: rotate(45deg);
}

.showcase3d__tip-title {
  display: block;
  font-family: var(--ff-display, 'Space Grotesk'), sans-serif;
  font-weight: 600;
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.25;
  color: var(--c-wheat-hi, #E8C57A);
  margin-bottom: 0.25em;
}

.showcase3d__tip-text {
  display: block;
  font-family: var(--ff-body, 'Inter'), sans-serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #EDF1F7;
}

/* ----- caption ----- */
.showcase3d__cap {
  margin-top: var(--s-3, 0.8rem);
  text-align: center;
  font-family: var(--ff-mono, 'JetBrains Mono'), monospace;
  font-size: var(--fs-caption, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3, #6B7685);
}

/* ============================================================
   .range-anim — animated range/shock-wave diagram
   Concentric wheat rings expanding outward from a center core,
   representing the ~500 m shock-wave coverage radius. Overlay
   this behind/around an image (img inside .range-anim__media).
   ============================================================ */

.range-anim {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin-inline: auto;
  isolation: isolate;
}

/* optional media (image/gif) layer — sits above rings, below core */
.range-anim__media {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-lg);
}

/* expanding rings */
.range-anim__ring {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 22%;
  margin: 0;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-wheat, #C8A24A);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  animation: range-wave 4s var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
  animation-delay: var(--ring-delay, 0s);
}

/* stagger the rings into a continuous outward pulse */
.range-anim__ring:nth-child(1) { --ring-delay: 0s; }
.range-anim__ring:nth-child(2) { --ring-delay: 1s; }
.range-anim__ring:nth-child(3) { --ring-delay: 2s; }
.range-anim__ring:nth-child(4) { --ring-delay: 3s; }

@keyframes range-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    border-color: var(--c-wheat-hi, #E8C57A);
  }
  10% {
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(4.6);
    opacity: 0;
    border-color: var(--c-wheat, #C8A24A);
  }
}

/* pulsing center core (the cannon point) */
.range-anim__core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--c-wheat-hi, #E8C57A);
  box-shadow: var(--sh-glow, 0 0 24px rgba(200, 162, 74, 0.6)), 0 0 0 4px var(--c-wheat-soft, rgba(200, 162, 74, 0.1));
  transform: translate(-50%, -50%);
  animation: range-core 4s var(--ease-in-out, ease-in-out) infinite;
  pointer-events: none;
}

@keyframes range-core {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.35); }
}

/* ============================================================
   .cloud-aside — small supporting cloud visual (Princip rada)
   ============================================================ */
.cloud-aside {
  display: flex;
  align-items: center;
  gap: var(--s-3, 0.8rem);
  margin-top: var(--s-5, 1.5rem);
  padding-top: var(--s-4, 1.2rem);
  border-top: 1px solid var(--c-rule, #E4DFD4);
}
.cloud-aside img {
  flex: 0 0 auto;
  width: clamp(96px, 24vw, 140px);
  height: auto;
  border-radius: var(--r-md);
}
.cloud-aside figcaption {
  font-family: var(--ff-mono, 'JetBrains Mono'), monospace;
  font-size: var(--fs-caption, 0.75rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-ink-3, #6B7685);
}

/* ============================================================
   Reduced motion: no tilt, no pulse, no expanding rings.
   Tooltips & hotspots remain fully usable on hover/focus.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .showcase3d__stage {
    transform: none !important;
    transition: none;
  }
  .showcase3d__glow {
    transition: none;
  }
  .showcase3d__hotspot::after {
    animation: none;
    opacity: 0.35;
    transform: scale(1.4);
  }
  .showcase3d__tip {
    transition: opacity var(--dur-fast) linear;
  }

  .range-anim__ring {
    animation: none;
    /* show static concentric rings instead of motion */
    opacity: 0.5;
    border-color: var(--c-wheat, #C8A24A);
  }
  .range-anim__ring:nth-child(1) { transform: translate(-50%, -50%) scale(1); }
  .range-anim__ring:nth-child(2) { transform: translate(-50%, -50%) scale(2); }
  .range-anim__ring:nth-child(3) { transform: translate(-50%, -50%) scale(3); }
  .range-anim__ring:nth-child(4) { transform: translate(-50%, -50%) scale(4); }
  .range-anim__core {
    animation: none;
  }
}

/* ============================================================
   Mobile: keep hotspot tooltips fully inside the screen
   (center them on the stage instead of over the dot, which
   pushed side tooltips off the edge on phones).
   ============================================================ */
@media (max-width: 640px) {
  .showcase3d__tip {
    left: 50% !important;
    max-width: min(84vw, 300px);
  }
  .showcase3d__tip::after { display: none; }
}