/*
Theme Name: NASAI
Theme URI: https://nasai.example
Author: NASAI
Author URI: https://nasai.example
Description: NASAI Constructions and Consultancy — industrial civil construction, substations and CNG/LCNG consultancy. Custom theme converted from the React/Tailwind site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nasai
*/

/* ============================================================
   Brand tokens (mirrors the original design system)
   ============================================================ */
:root {
  --navy-deep: oklch(0.22 0.08 260);
  --navy: oklch(0.32 0.12 255);
  --navy-soft: oklch(0.42 0.13 245);
  --teal: oklch(0.72 0.13 175);
  --teal-bright: oklch(0.78 0.14 185);
  --steel: oklch(0.55 0.04 240);
  --concrete: oklch(0.96 0.005 240);
}

html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  color: oklch(0.18 0.04 255);
  margin: 0;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Liquid Glass — used for navbar and hero buttons */
.liquid-glass {
  background: rgba(10, 22, 60, 0.35);
  background-blend-mode: luminosity;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.1) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.32) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Hide native video controls completely (hero) */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; }

/* Hero animated heading */
.hero-heading-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.hero-heading-char.show { opacity: 1; transform: translateX(0); }

/* Fade in helper */
.fade-in { opacity: 0; transition: opacity 1s ease; }
.fade-in.show { opacity: 1; }

/* Flip-card for capabilities (Home) */
.flip-card { perspective: 1200px; height: 18rem; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 700ms;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 1rem;
  overflow: hidden;
}
.flip-back { transform: rotateY(180deg); }

/* Industrial accent stripes */
.stripe-accent {
  background-image: repeating-linear-gradient(135deg,
    var(--teal) 0, var(--teal) 8px,
    transparent 8px, transparent 16px);
}

/* Force hover for explore-services button (overrides liquid-glass bg) */
.btn-explore:hover { background: #fff !important; color: var(--navy-deep) !important; }