/* KP3D v1 support styles. Homepage only. Plain ASCII, no em dashes. */
/* Colors limited to rgba tints of 232,164,58 (amber) and 245,243,239 */
/* (warm white) plus rgba(10,10,15,x) ink. The engine drives the rest. */

/* The Field canvas. Sits in the hero z-2 decoration slot, above the */
/* video overlay, below hero-inner. Fades in like the hero video. */
.kp3d-canvas {
  position: absolute;
  inset: 0;
  /* canvas is a replaced element: inset alone does not stretch it */
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.kp3d-canvas.kp3d-on {
  opacity: 1;
}

/* Glare overlay injected per tilt card by the engine. Custom props */
/* --kp3d-gx and --kp3d-gy are written from JS as the pointer moves. */
.kp3d-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(
    circle at var(--kp3d-gx, 50%) var(--kp3d-gy, 50%),
    rgba(245, 243, 239, 0.10),
    transparent 55%
  );
  transition: opacity 0.35s var(--ease-snappy, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp3d-tilting .kp3d-glare {
  opacity: 1;
}

/* Active tilt state. Positioning context for the glare, a will-change hint */
/* scoped to the interaction, and a transition freeze so a template card's */
/* own transform transition (blog cards have one) cannot fight the per */
/* frame inline writes from the engine. */
.kp3d-tilting {
  position: relative;
  will-change: transform;
  transition: none !important;
}

/* Spring back to identity when the pointer leaves. The engine clears the */
/* inline transform under this class; important wins over the template's */
/* shorter transform transitions for one consistent eased return. */
.kp3d-tilt-rest {
  transition: transform 0.5s var(--ease-snappy, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

/* Dev HUD. Shown only by the engine when debug is requested. */
.kp3d-hud {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 99999;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #E8A43A;
  background: rgba(10, 10, 15, 0.85);
  pointer-events: none;
  white-space: pre;
}

/* Reduced motion: one static frame, no fades, no spring, no glare motion. */
@media (prefers-reduced-motion: reduce) {
  .kp3d-canvas {
    transition: none;
  }
  .kp3d-canvas.kp3d-on {
    opacity: 1;
  }
  .kp3d-glare {
    transition: none;
  }
  .kp3d-tilt-rest {
    transition: none;
  }
}