/* EKOS Acoustic — Custom styles (vars, utilities, animations)
   Tailwind utility classes are served via CDN (see functions.php).
   This file contains only what Tailwind CDN cannot provide. */

:root {
  --background: oklch(0.12 0.005 60);
  --foreground: oklch(0.96 0.003 60);
  --surface: oklch(0.16 0.006 60);
  --surface-2: oklch(0.20 0.008 60);
  --muted: oklch(0.20 0.006 60);
  --muted-foreground: oklch(0.65 0.01 60);
  --border: oklch(0.28 0.008 60 / 60%);
  --input: oklch(0.28 0.01 60);
  --ring: oklch(0.72 0.11 55);
  --blue: #99D3EE;
  --blue-soft: #488eaf;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}
::selection {
  background: color-mix(in oklab, var(--blue) 40%, transparent);
  color: var(--foreground);
}

/* Custom utilities (equivalent to Tailwind @utility) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
}

.rule-copper {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklab, var(--blue) 60%, transparent),
    transparent
  );
}

.hover-lift {
  transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 500ms ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
}

/* Animations */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 0.9s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* WordPress alignment */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--muted-foreground); }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* Gallery masonry fallback */
.ekos-gallery { columns: 1; column-gap: 1.5rem; }
@media (min-width: 640px) { .ekos-gallery { columns: 2; } }
@media (min-width: 1024px) { .ekos-gallery { columns: 3; } }
.ekos-gallery figure { break-inside: avoid; margin-bottom: 1.5rem; overflow: hidden; }
.ekos-gallery img { width: 100%; height: auto; display: block; transition: transform 1.2s ease; }
.ekos-gallery figure:hover img { transform: scale(1.05); }