/* ==========================================================
   3d.css — ONLY the 3D stage visuals (LIGHT THEME).
   All tokens (--red, --line, …) come from style.css :root.
   ========================================================== */

.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .hero__stage { max-width: min(78vw, 380px); }
}

/* Soft ambient halo behind the model — pure CSS, cheap on GPUs.
   Açıq fonda bir az daha yumşaq. */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 65, 66, .16) 0%,
              rgba(255, 65, 66, .05) 42%,
              transparent 70%);
  filter: blur(14px);
  animation: haloPulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes haloPulse {
  0%, 100% { opacity: .6;  transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

#logo3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;   /* page still scrolls over the canvas on mobile */
}

/* Faint background grid gives the hero depth behind the model.
   --line açıq temada tünd yarımşəffafdır — kifayət qədər incədir. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__stage::before { animation: none; }
}