/*
Theme Name: HydroFlow 3D Plumbing
Author: Mukta
Description: 3D Plumbing & Emergency Dispatch WordPress Theme
Version: 1.0.0
*/

    :root {
      --bg-primary: #f6f9fc;
      --text-navy: #0f2a3d;
      --text-slate: #475569;
      --accent-blue: #0e7ac4;
      --accent-teal: #0ea5a4;
      --accent-sky: #38bdf8;
    }

    body {
      background-color: var(--bg-primary);
      color: var(--text-navy);
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      background-image:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.14), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(14, 165, 164, 0.10), transparent 38%),
        radial-gradient(circle at 50% 62%, rgba(14, 122, 196, 0.07), transparent 45%),
        linear-gradient(to right, rgba(14, 122, 196, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 122, 196, 0.035) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
    }

    h1, h2, h3, h4, .font-display {
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Light Glassmorphism */
    .glass-header {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(219, 234, 254, 0.9);
    }

    .glass-pill {
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(219, 234, 254, 0.95);
    }

    /* 3D Perspective Tilt Service Cards */
    .tilt-card-wrapper {
      perspective: 1100px;
    }
    .tilt-card {
      transform-style: preserve-3d;
      transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }
    .tilt-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56, 189, 248, 0.13), transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }
    .tilt-card:hover::before {
      opacity: 1;
    }
    .tilt-card-content {
      transform: translateZ(20px);
      position: relative;
      z-index: 2;
    }

    /* Three.js Canvas Container */
    #pipe-canvas-container {
      position: relative;
      width: 100%;
      height: 460px;
      background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef6ff 65%, #e0f2fe 100%);
      cursor: grab;
      user-select: none;
      touch-action: none;
    }
    #pipe-canvas-container:active {
      cursor: grabbing;
    }
    @media (max-width: 640px) {
      #pipe-canvas-container {
        height: 370px;
      }
    }

    /* Isometric House Pipe Flow Animation */
    @keyframes dashFlow {
      to {
        stroke-dashoffset: -40;
      }
    }
    .pipe-flow-active {
      stroke-dasharray: 8 6;
      animation: dashFlow 1s linear infinite;
    }

    @keyframes pulseRing {
      0% {
        transform: scale(0.85);
        opacity: 0.9;
      }
      70% {
        transform: scale(1.75);
        opacity: 0;
      }
      100% {
        transform: scale(1.75);
        opacity: 0;
      }
    }
    .zone-pulse {
      transform-origin: center;
      transform-box: fill-box;
      animation: pulseRing 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    }

    /* House Zone Highlight Transitions */
    .house-zone-group {
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .house-zone-group:hover .zone-room-fill {
      fill-opacity: 0.35;
    }
    .house-zone-group.active .zone-room-fill {
      fill-opacity: 0.55;
      stroke-width: 2.5px;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 9999px;
      border: 2px solid #f1f5f9;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Subtle float animation */
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }
    .animate-float {
      animation: floatSlow 4s ease-in-out infinite;
    }