/* ============================================================
   effects-3d.css
   Styling support for the 3D interactive layer: a full-page
   drifting 3D canvas behind every section, the hero's own 3D
   scene, and tilt cards.
   ============================================================ */

/* Site-wide fixed 3D canvas, sits behind absolutely everything */
#bg-3d-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Section backgrounds are made gently translucent (instead of fully
   opaque) so the drifting 3D shapes are actually visible behind the
   content, in both themes. Text contrast is unaffected — only the
   solid section fills gain a touch of alpha. */
body,
#services-section,
#contact-section {
  background: rgba(18,24,31,0.66);
}
#about-section,
#team-section {
  background: rgba(15,35,66,0.66);
}
#footer {
  background: rgba(6,14,26,0.8);
}
[data-theme="light"] body,
[data-theme="light"] #services-section,
[data-theme="light"] #contact-section {
  background: rgba(243,246,251,0.86);
}
[data-theme="light"] #about-section,
[data-theme="light"] #team-section {
  background: rgba(233,238,246,0.86);
}
[data-theme="light"] #footer {
  background: rgba(221,229,240,0.88);
}

#hero-3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;           /* sits above .hero-grid, below .hero-content (z-index:2) */
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* never blocks clicks on hero buttons/text */
}

/* Elements this file makes tiltable get GPU-friendly, fast-responding
   transforms. Loaded after the original component stylesheets so this
   transition speed wins for these selectors only. */
.service-card,
.team-card,
.highlight-item,
.about-badge-box {
  transition: transform 0.15s ease-out, border-color var(--transition), box-shadow var(--transition);
  will-change: transform;
}

/* Small CSS-only 3D flourishes (no JS needed) */
.badge-icon {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
}
.hero-badges .badge:hover .badge-icon {
  transform: rotateY(360deg) scale(1.08);
}
.service-icon, .contact-item-icon {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover .service-icon {
  transform: rotateY(180deg);
}
.contact-item:hover .contact-item-icon {
  transform: rotateY(360deg);
}

@media (prefers-reduced-motion: reduce) {
  #hero-3d-canvas { display: none; }
  .service-card, .team-card, .highlight-item, .about-badge-box {
    transition: border-color var(--transition), box-shadow var(--transition);
  }
}