/* ThinkaBell 3D Effects — Tier 1 (Ambient 3D) */
/* ==================================================
   Progressive-enhancement 3D transforms.
   Intentionally layer-scoped and device-aware:
   - Defaults are safe/static (no 3D until .tb-3d user allows).
   - .tb-3d          → enables transforms for supporting devices
   - .tb-3d-no-js     → JS-safe fallbacks when scripts are disabled
   - prefers-reduced-motion always disables transforms.
   Include with: <link rel="stylesheet" href="/css/tb-3d-effects.css">
   ================================================== */

@layer components {

  /* ── 3D Context Establishment ──────────────────────────── */
  .tb-3d-scene {
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
  }

  .tb-3d-layer {
    transform-style: preserve-3d;
    will-change: transform;
  }

  /* Depth layers (bg / mid / fg) */
  .tb-3d-layer--bg { transform: translateZ(-50px) scale(1.15); }
  .tb-3d-layer--mid { transform: translateZ(0); }
  .tb-3d-layer--fg { transform: translateZ(30px); }

  /* ── Card System (CSS hover tilt) ──────────────────────── */
  .tb-card-3d,
  [data-3d-cards] .card,
  [data-3d-cards] .tb-card {
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  /* JS tilt uses custom props set inline; hover uses CSS fallback */
  .tb-3d .tb-card-3d:hover,
  .tb-3d [data-3d-cards] .card:hover,
  .tb-3d [data-3d-cards] .tb-card:hover {
    transform: translateZ(20px) rotateX(2deg) rotateY(-2deg);
    box-shadow:
      0 0 0 1px rgba(99, 102, 241, .12),
      0 10px 30px rgba(0, 0, 0, .10),
      0 20px 60px rgba(99, 102, 241, .10);
  }

  /* ── Button Depth ──────────────────────────────────────── */
  .tb-btn-3d {
    transform-style: preserve-3d;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
  }

  .tb-3d .tb-btn-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform: translateZ(-4px);
    border-radius: inherit;
    filter: brightness(.9);
    pointer-events: none;
  }

  .tb-3d .tb-btn-3d:hover { transform: translateY(-2px) translateZ(4px); }
  .tb-3d .tb-btn-3d:active { transform: translateY(0) translateZ(0); }

  /* ── Floating Elements ─────────────────────────────────── */
  .tb-float-3d {
    animation: float3D 6s ease-in-out infinite;
    transform-style: preserve-3d;
  }

  @keyframes float3D {
    0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
    25%      { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); }
    75%      { transform: translateY(-5px) rotateX(-1deg) rotateY(1deg); }
  }

  /* ── Hero Depth Layers ─────────────────────────────────── */
  .tb-hero-3d,
  .tb-tools-hero {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  .tb-3d .tb-hero-3d__bg {
    transform: translateZ(-30px) scale(1.1);
    opacity: .4;
  }
  .tb-3d .tb-hero-3d__content { transform: translateZ(20px); }
  .tb-3d .tb-hero-3d__cards { transform: translateZ(40px); }
  .tb-3d .tb-tools-hero__content { transform: translateZ(20px); position: relative; z-index: 1; }

  /* ── Parallax layers ───────────────────────────────────── */
  .tb-parallax-layer {
    transition: transform .1s ease-out;
    will-change: transform;
  }

  /* ── WebGL Canvas Mount Point ──────────────────────────── */
  .tb-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* Content must sit above the 3D canvas (z-index z=0 is base) */
  .tb-3d-canvas + .tb-3d-canvas-lift { position: relative; z-index: 1; }

  /* ── Reduced Motion / Accessibility ────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .tb-3d .tb-card-3d:hover,
    .tb-3d [data-3d-cards] .card:hover,
    .tb-3d [data-3d-cards] .tb-card:hover,
    .tb-3d .tb-btn-3d:hover,
    .tb-3d .tb-btn-3d:active {
      transform: none;
      box-shadow: none;
    }
    .tb-float-3d,
    .tb-parallax-layer {
      animation: none;
      transform: none;
    }
    .tb-3d-canvas { display: none; }
  }
}

/* ── Site integration (unlayered: must out-rank unlayered hover lifts) ── */
.tb-3d [data-3d-cards] .tb-tool-card-enhanced:hover,
.tb-3d [data-3d-cards] .cat-card:hover {
  transform: translateZ(20px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, .12),
    0 10px 30px rgba(0, 0, 0, .10),
    0 20px 60px rgba(99, 102, 241, .10);
}
@media (prefers-reduced-motion: reduce) {
  .tb-3d [data-3d-cards] .tb-tool-card-enhanced:hover,
  .tb-3d [data-3d-cards] .cat-card:hover {
    transform: none;
  }
}