/**
 * MAL-TP — 3D Hero Enhancements
 *
 * Layout for the WebGL hero canvas, scan-bracket overlay and
 * Elementor stacking fixes.
 *
 * @package MAL-TP
 * @version 5.0
 */

/* ---------------- Hero shell ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: var(--sp-24, 96px) var(--sp-16, 64px);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(68% 0.19 200 / 0.15), transparent);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ---------------- Scan bracket overlay ---------------- */
.hero-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-scan-overlay .corner {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 2px solid var(--accent, oklch(68% 0.19 200));
  opacity: 0.6;
  animation: scanPulse 3s infinite ease-in-out;
}

.corner-tr { top: 32px;    right: 32px;  border-left: none;  border-bottom: none; border-top-right-radius: 10px; animation-delay: 0s; }
.corner-tl { top: 32px;    left: 32px;   border-right: none; border-bottom: none; border-top-left-radius: 10px;  animation-delay: 0.4s; }
.corner-br { bottom: 32px; right: 32px;  border-left: none;  border-top: none;    border-bottom-right-radius: 10px; animation-delay: 0.8s; }
.corner-bl { bottom: 32px; left: 32px;   border-right: none; border-top: none;    border-bottom-left-radius: 10px;  animation-delay: 1.2s; }

@keyframes scanPulse {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* ---------------- Hero badge ---------------- */
.hero-badge {
  display: inline-block;
  margin-top: var(--sp-6, 24px);
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  border: 1px solid var(--border, oklch(28% 0.03 250));
  border-radius: 999px;
  background: oklch(28% 0.03 250 / 0.5);
  color: var(--text, oklch(94% 0.01 250));
  font-size: 0.9rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas { opacity: 0.3; }
  .corner { animation: none; opacity: 0.5; }
}

/* ---------------- Small screens ---------------- */
@media (max-width: 768px) {
  .hero-scan-overlay .corner { width: 40px; height: 40px; }
  .corner-tr, .corner-tl { top: 16px; }
  .corner-br, .corner-bl { bottom: 16px; }
  .corner-tr, .corner-br { right: 16px; }
  .corner-tl, .corner-bl { left: 16px; }
}

/* ---------------- Elementor stacking fixes ---------------- */
.elementor-section .hero-canvas {
  z-index: 0 !important;
}

.elementor-widget-container {
  position: relative;
  z-index: 2;
}