/* ========================================
   QORELIX 3D — Canvas layering, card tilt,
   depth utilities, reduced-motion fallbacks,
   MOBILE-FRIENDLY responsive behavior.
   ======================================== */

/* Fixed full-screen canvas behind all page content */
.q3d-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* When 3D is active, lift the whole document above the canvas so it
   remains fully interactive and readable. */
html.has-3d body { position: relative; z-index: 1; }

/* Ensure top-level layout wrappers sit above the canvas. */
html.has-3d .nav,
html.has-3d .loader,
html.has-3d .scroll-progress,
html.has-3d .mouse-follower,
html.has-3d .mouse-follower-dot { z-index: 100; }

html.has-3d .section,
html.has-3d .hero,
html.has-3d footer,
html.has-3d .cta-section { position: relative; z-index: 1; }

/* --- Card 3D tilt (pointer-driven, desktop only) --- */
.q3d-tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.q3d-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(220, 38, 38, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.q3d-tilt:hover::after { opacity: 1; }
.q3d-tilt > * { position: relative; z-index: 1; }

/* Translucent backdrop so 3D field shows through elegantly */
html.has-3d .product-card,
html.has-3d .model-card,
html.has-3d .why-card,
html.has-3d .value-card,
html.has-3d .card {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Keep CTAs and key text crisp above translucent panels */
html.has-3d .btn { position: relative; z-index: 2; }

/* Hero: let the holographic logo scene breathe behind the title */
html.has-3d .hero .hero-bg > * { opacity: 0.25; transition: opacity 0.6s ease; }
html.has-3d .hero-content { position: relative; z-index: 2; }

/* --- Reduced motion / no-WebGL fallback: elegant CSS-only ambient --- */
html.no-3d .q3d-canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
  .q3d-tilt {
    transform: none !important;
    transition: box-shadow 0.3s ease;
  }
  .q3d-tilt::after { display: none; }
}

/* ====================================================
   MOBILE-FRIENDLY BREAKPOINTS
   ==================================================== */

/* --- Tablet (≤1024px): reduce tilt effect, thin canvas --- */
@media (max-width: 1024px) {
  .q3d-tilt {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: none;
    transition: box-shadow 0.3s ease;
  }
  .q3d-tilt::after { display: none; }

  /* On tablets, reduce backdrop blur for perf */
  html.has-3d .product-card,
  html.has-3d .model-card,
  html.has-3d .why-card,
  html.has-3d .value-card,
  html.has-3d .card {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

/* --- Mobile (≤768px): full simplification --- */
@media (max-width: 768px) {
  /* Disable all 3D tilt on mobile — touch interaction, no hover */
  .q3d-tilt {
    transform: none !important;
    transition: box-shadow 0.3s ease;
  }
  .q3d-tilt::after { display: none !important; }

  /* Cards maintain solid backgrounds on mobile (no translucency) */
  html.has-3d .product-card,
  html.has-3d .model-card,
  html.has-3d .why-card,
  html.has-3d .value-card,
  html.has-3d .card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-bg-card);
  }

  /* Reduce canvas opacity on mobile so it doesn't overwhelm content */
  .q3d-canvas { opacity: 0.4; }

  /* Hero content stays crisp */
  html.has-3d .hero .hero-bg > * { opacity: 0.15; }

  /* Ensure footer links/buttons are fully tappable above canvas */
  html.has-3d footer a,
  html.has-3d footer button,
  html.has-3d .footer-bottom a,
  html.has-3d .footer-newsletter-input button {
    position: relative;
    z-index: 5;
  }

  /* Touch-friendly: increase tap target sizes in nav */
  html.has-3d .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Ensure forms are fully usable above canvas */
  html.has-3d form input,
  html.has-3d form textarea,
  html.has-3d form select,
  html.has-3d form button {
    position: relative;
    z-index: 5;
    min-height: 44px;
  }
}

/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {
  /* Further reduce canvas visual weight */
  .q3d-canvas { opacity: 0.3; }

  /* No backdrop effects on tiny screens */
  html.has-3d .product-card,
  html.has-3d .model-card,
  html.has-3d .why-card,
  html.has-3d .value-card,
  html.has-3d .card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* --- Tiny screens (≤360px) --- */
@media (max-width: 360px) {
  .q3d-canvas { opacity: 0.2; }
}

/* --- Safe area (notch/dynamic island) support --- */
@supports (padding-top: env(safe-area-inset-top)) {
  html.has-3d .nav {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    height: calc(var(--nav-height) + env(safe-area-inset-top));
  }
  html.has-3d .q3d-canvas {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
}

/* --- Landscape mobile: reduce 3D to avoid layout issues --- */
@media (max-height: 500px) and (orientation: landscape) {
  .q3d-canvas { opacity: 0.25; }
  .q3d-tilt { transform: none !important; }
  .q3d-tilt::after { display: none !important; }
}

/* --- Print: hide all 3D --- */
@media print {
  .q3d-canvas { display: none !important; }
  html.has-3d body { z-index: auto; }
  html.has-3d .section,
  html.has-3d .hero,
  html.has-3d footer { z-index: auto; position: static; }
  .q3d-tilt { transform: none !important; }
  .q3d-tilt::after { display: none !important; }
  html.has-3d .product-card,
  html.has-3d .model-card,
  html.has-3d .why-card,
  html.has-3d .value-card,
  html.has-3d .card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}