/* =========================================================
   HamiShop 3D — CSS layer
   - Tilt on cards (mouse-driven 3D rotation)
   - Cursor-following soft light overlay
   - Hero 3D canvas stage
   - Parallax helpers
   ========================================================= */

:root {
  --hsp-3d-tilt-max: 8deg;
  --hsp-3d-perspective: 1400px;
  --hsp-3d-depth-1: 10px;
  --hsp-3d-depth-2: 20px;
  --hsp-3d-depth-3: 32px;
  --hsp-3d-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hsp-3d-dur: 0.45s;
  --hsp-3d-light-color: rgba(255, 224, 184, 0.20);
  --hsp-3d-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
  --hsp-3d-shadow-hover: 0 28px 56px rgba(15, 23, 42, 0.20);
}

/* ---------- perspective wrapper (auto-applied by JS) ---------- */
.hsp-3d-perspective {
  perspective: var(--hsp-3d-perspective);
}

/* ---------- tilt base ---------- */
.hsp-3d-tilt {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform var(--hsp-3d-dur) var(--hsp-3d-ease),
              box-shadow var(--hsp-3d-dur) var(--hsp-3d-ease);
  will-change: transform;
}
.hsp-3d-tilt:hover { box-shadow: var(--hsp-3d-shadow-hover); }

/* ---------- depth layers (children that float forward) ---------- */
.hsp-3d-tilt-inner,
.hsp-3d-tilt-inner-2,
.hsp-3d-tilt-inner-3 {
  will-change: transform;
}
.hsp-3d-tilt-inner   { transform: translateZ(var(--hsp-3d-depth-1)); }
.hsp-3d-tilt-inner-2 { transform: translateZ(var(--hsp-3d-depth-2)); }
.hsp-3d-tilt-inner-3 { transform: translateZ(var(--hsp-3d-depth-3)); }

/* ---------- cursor light overlay ---------- */
.hsp-3d-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    var(--hsp-3d-light-color),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--hsp-3d-dur) var(--hsp-3d-ease);
  border-radius: inherit;
  z-index: 2;
  mix-blend-mode: soft-light;
}
.hsp-3d-tilt:hover .hsp-3d-light { opacity: 1; }

/* ---------- hero 3D stage ---------- */
.hsp-3d-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.hsp-3d-hero-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.hsp-3d-hero-host { position: relative; }
.hsp-3d-hero-host > *:not(.hsp-3d-hero-stage) { position: relative; z-index: 1; }

/* ---------- parallax helper ---------- */
.hsp-3d-parallax { will-change: transform; transform: translateZ(0); }

/* ---------- safety: reduced motion + mobile + non-WebGL ---------- */
@media (prefers-reduced-motion: reduce) {
  .hsp-3d-tilt,
  .hsp-3d-tilt:hover,
  .hsp-3d-tilt-inner,
  .hsp-3d-tilt-inner-2,
  .hsp-3d-tilt-inner-3,
  .hsp-3d-parallax { transform: none !important; transition: none !important; }
  .hsp-3d-light { display: none !important; }
  .hsp-3d-hero-stage { display: none !important; }
}

@media (max-width: 768px) {
  .hsp-3d-hero-stage { display: none !important; }
  /* keep light tilt on mobile but skip mouse-driven rotation (JS handles via isTouch) */
}

.hsp-3d-no-webgl .hsp-3d-hero-stage { display: none !important; }