/*
Theme Name: Gasterm
Theme URI: https://gasterm.ee
Author: Gasterm OÜ
Description: Gasterm Eesti OÜ ametlik veebisait. Gaasitööde ja küttesüsteemide eksperdid.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: gasterm
*/

/* ============================================================
   CSS VARIABLES (from React index.css)
   ============================================================ */
:root {
  --background: 30 15% 97%;
  --foreground: 220 20% 14%;

  --card: 0 0% 100%;
  --card-foreground: 220 20% 14%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 14%;

  --primary: 24 95% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 16% 22%;
  --secondary-foreground: 0 0% 96%;

  --muted: 30 10% 93%;
  --muted-foreground: 220 10% 46%;

  --accent: 24 100% 95%;
  --accent-foreground: 24 95% 40%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 30 10% 88%;
  --input: 30 10% 88%;
  --ring: 24 95% 50%;

  --radius: 0.75rem;

  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --gradient-primary: linear-gradient(135deg, hsl(24 95% 50%), hsl(30 100% 60%));
  --gradient-dark: linear-gradient(135deg, hsl(220 20% 14%), hsl(220 16% 22%));
  --shadow-card: 0 4px 24px -4px hsl(24 95% 50% / 0.08);
  --shadow-elevated: 0 12px 40px -8px hsl(220 20% 14% / 0.12);
}

/* ============================================================
   BASE
   ============================================================ */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

* {
  border-color: hsl(var(--border));
  box-sizing: border-box;
}

/* ============================================================
   CUSTOM UTILITIES (from React index.css @layer utilities)
   ============================================================ */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-elevated {
  box-shadow: var(--shadow-elevated);
}

/* ============================================================
   PARTNER MARQUEE ANIMATION (from React index.css @keyframes)
   ============================================================ */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  animation: scroll 20s linear infinite;
}

/* ============================================================
   HERO ENTRANCE ANIMATIONS (replacing framer-motion)
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-1 {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.hero-animate-2 {
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

.hero-animate-3 {
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

.hero-animate-4 {
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

/* ============================================================
   PAGE HEADER ENTRANCE ANIMATIONS (inner pages)
   ============================================================ */
.page-header-animate-1 {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 0s;
  opacity: 0;
}

.page-header-animate-2 {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

/* ============================================================
   GALLERY LIGHTBOX (Alpine.js)
   ============================================================ */
[x-cloak] { display: none !important; }

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.5rem;
}