/* ==========================================================================
   NANDNEE 3D UI LAYER
   Animated 3D design system: WebGL hero stage + CSS 3D accents
   ========================================================================== */

/* ---------- Hero host & WebGL stage ---------- */

.nd3d-host {
  position: relative;
  isolation: isolate;
}

.nd3d-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.nd3d-stage.is-ready {
  opacity: 1;
}

.nd3d-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Soft brand glow behind hero copy */
.nd3d-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 78% 22%, rgba(2, 132, 199, 0.30) 0%, transparent 70%),
    radial-gradient(42% 38% at 18% 78%, rgba(16, 185, 129, 0.22) 0%, transparent 72%);
  filter: blur(6px);
  animation: nd3dGlowDrift 16s ease-in-out infinite alternate;
}

@keyframes nd3dGlowDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.85; }
  100% { transform: translate3d(3%, 2%, 0) scale(1.12); opacity: 1; }
}

/* Animated grid floor for depth */
.nd3d-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(560px) rotateX(64deg) scale(1.9);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(60% 55% at 50% 100%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 100%, #000 0%, transparent 78%);
  opacity: 0.5;
  animation: nd3dGridRun 5.5s linear infinite;
}

@keyframes nd3dGridRun {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 64px, 64px 0; }
}

/* ---------- 3D perspective shells ---------- */

.nd3d-shell {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.nd3d-depth {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--nd3d-ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.4s ease;
  will-change: transform;
}

/* Pointer-driven tilt, driven by hero3d.js via CSS custom props */
.nd3d-tilt {
  transform:
    perspective(1000px)
    rotateX(var(--nd3d-rx, 0deg))
    rotateY(var(--nd3d-ry, 0deg))
    translate3d(0, var(--nd3d-lift, 0px), var(--nd3d-push, 0px));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.nd3d-tilt.is-tilting {
  transition: transform 0.06s linear, box-shadow 0.28s ease;
}

.nd3d-tilt:hover {
  box-shadow: 0 26px 60px rgba(2, 132, 199, 0.24);
}

/* Specular sheen that follows the pointer */
.nd3d-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    220px 220px at var(--nd3d-mx, 50%) var(--nd3d-my, 50%),
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
  transition: opacity 0.3s ease;
}

.nd3d-tilt:hover.nd3d-sheen::after {
  opacity: 1;
}

/* ---------- Scroll reveal with 3D entrance ----------
   Gated behind html.nd3d-js so content is ALWAYS visible if the
   3D engine fails to load (offline, file://, blocked CDN, old browser). */

html.nd3d-js .nd3d-reveal {
  opacity: 0;
  transform:
    perspective(1400px)
    translate3d(0, 68px, -180px)
    rotateX(9deg);
  transform-origin: 50% 100%;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

html.nd3d-js .nd3d-reveal.is-in {
  opacity: 1;
  transform:
    perspective(1400px)
    translate3d(0, 0, 0)
    rotateX(0deg);
}

.nd3d-reveal[data-nd3d-delay="1"] { transition-delay: 0.09s; }
.nd3d-reveal[data-nd3d-delay="2"] { transition-delay: 0.18s; }
.nd3d-reveal[data-nd3d-delay="3"] { transition-delay: 0.27s; }
.nd3d-reveal[data-nd3d-delay="4"] { transition-delay: 0.36s; }
.nd3d-reveal[data-nd3d-delay="5"] { transition-delay: 0.45s; }

/* ---------- Floating / levitating accents ---------- */

.nd3d-float {
  animation: nd3dFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
}

.nd3d-float-slow {
  animation: nd3dFloat 11s ease-in-out infinite;
}

@keyframes nd3dFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translate3d(0, -14px, 0) rotateX(2.5deg) rotateY(-2.5deg); }
}

/* Orbiting 3D ring / halo */
.nd3d-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transform-style: preserve-3d;
  animation: nd3dOrbit 18s linear infinite;
}

.nd3d-orbit::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--nd3d-orb, #10B981);
  box-shadow: 0 0 16px 3px var(--nd3d-orb, #10B981);
}

@keyframes nd3dOrbit {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to { transform: rotateX(72deg) rotateZ(360deg); }
}

/* Parallax depth driven by scroll (--nd3d-py set by JS) */
.nd3d-parallax {
  transform: translate3d(0, var(--nd3d-py, 0px), 0);
  will-change: transform;
}

/* ---------- Stat / pill 3D pop ---------- */

.nd3d-pop {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nd3d-pop:hover {
  transform: perspective(700px) translateY(-6px) scale(1.045) rotateX(6deg);
}

/* ---------- Loading state for the stage ---------- */

.nd3d-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.nd3d-stage.is-ready .nd3d-loading {
  opacity: 0;
}

.nd3d-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: #10B981;
  animation: nd3dSpin 0.9s linear infinite;
}

@keyframes nd3dSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Inner-page hero: factory-floor photo background ----------
   Applied to the shared "About Nandnee Group" style hero on every page
   EXCEPT the homepage, replacing the WebGL animation there. */

.nd-infra-hero {
  position: relative;
  background-color: var(--navy-deep, #081b20);
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 27, 32, 0.9) 0%,
      rgba(8, 27, 32, 0.7) 45%,
      rgba(8, 27, 32, 0.9) 100%
    ),
    url("../images/Nandnee Infra Pics/ChatGPT%20Image%20Sep%2025%2C%202026%2C%2010_15_59%20AM.png");
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  animation: ndInfraHeroPan 28s ease-in-out infinite alternate;
}

@keyframes ndInfraHeroPan {
  0% { background-position: 30% 38%; background-size: 112% 112%; }
  100% { background-position: 70% 62%; background-size: 126% 126%; }
}



.nd3d-hide {
  transition: opacity 0.9s ease, transform 1.2s ease;
}

.nd3d-hide.is-hidden {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* ---------- Accessibility & performance ---------- */

@media (prefers-reduced-motion: reduce) {
  .nd3d-glow,
  .nd3d-grid,
  .nd3d-float,
  .nd3d-float-slow,
  .nd3d-orbit,
  .nd-infra-hero {
    animation: none !important;
  }

  .nd3d-reveal,
  .nd3d-tilt,
  .nd3d-depth,
  .nd3d-pop {
    transition: none !important;
    transform: none !important;
  }

  html.nd3d-js .nd3d-reveal {
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .nd3d-grid { display: none; }
  html.nd3d-js .nd3d-reveal { transform: perspective(900px) translate3d(0, 40px, -90px); }

  /* Hide decorative stroke artwork on small screens — it reads as stray
     lines over the hero photo and crowds the headline. */
  .hero-organic-ribbon,
  .leaf-corner,
  .leaf-deco {
    display: none !important;
  }
}

.nd3d-no-webgl .nd3d-stage { display: none; }