/* === Grupo Malory — Shared Base === */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Albert+Sans:wght@200;300;400;500;600;700;800&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&family=Italiana&family=Cinzel:wght@400;500;600&display=swap');

:root {
  /* Malory blue gradient */
  --malory-deep: oklch(0.28 0.18 264);
  --malory-royal: oklch(0.45 0.22 262);
  --malory-light: oklch(0.68 0.18 260);
  --malory-ice: oklch(0.92 0.04 258);

  /* Neutrals tinted toward malory hue */
  --ink: oklch(0.18 0.02 260);
  --ink-soft: oklch(0.32 0.02 260);
  --paper: oklch(0.97 0.005 260);
  --paper-warm: oklch(0.95 0.008 80);
  --canvas-dark: oklch(0.12 0.02 260);
  --canvas-deep: oklch(0.08 0.02 260);

  /* Sub-brand hint colors (refined from logos) */
  --c-connect: oklch(0.55 0.18 248);
  --c-oxepay: oklch(0.62 0.18 170);
  --c-wowlog: oklch(0.55 0.15 32);
  --c-entret: oklch(0.45 0.20 320);
  --c-iai: oklch(0.62 0.15 200);

  /* Type scale fluid */
  --t-xs: clamp(0.72rem, 0.65rem + 0.3vw, 0.78rem);
  --t-sm: clamp(0.85rem, 0.78rem + 0.35vw, 0.93rem);
  --t-base: clamp(1rem, 0.92rem + 0.4vw, 1.1rem);
  --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem);
  --t-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem);
  --t-3xl: clamp(3.2rem, 2.2rem + 5vw, 6rem);
  --t-4xl: clamp(4.5rem, 3rem + 8vw, 10rem);

  /* Space scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-24: 96px; --s-32: 128px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 300; line-height: 1.5; overflow-x: hidden; }
::selection { background: var(--malory-royal); color: var(--paper); }

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

/* Utility */
.serif { font-family: 'Spectral', Georgia, serif; }
.italic-display { font-family: 'Italiana', 'Spectral', Georgia, serif; font-style: normal; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 300; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 400;
}
.brand-grad {
  background: linear-gradient(90deg, var(--malory-deep), var(--malory-royal) 50%, var(--malory-light));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Version nav bar shared */
.version-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: oklch(0.18 0.02 260 / 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.version-nav a {
  padding: 6px 10px;
  border-radius: 100px;
  color: oklch(1 0 0 / 0.6);
  text-decoration: none;
  transition: all 0.3s var(--ease-out-quart);
}
.version-nav a:hover { color: var(--paper); background: oklch(1 0 0 / 0.08); }
.version-nav a.active { background: var(--malory-royal); color: var(--paper); }
@media (max-width: 700px) {
  .version-nav { font-size: 9px; padding: 4px; }
  .version-nav a { padding: 4px 7px; }
}
.version-nav.dark-on-light { background: oklch(0.18 0.02 260 / 0.92); }

/* CSS-only fade-in (no JS dependency — works even if GSAP CDN fails) */
@keyframes foucFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  opacity: 0;
  animation: foucFade 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.fade-in:nth-of-type(2) { animation-delay: 0.30s; }
.fade-in:nth-of-type(3) { animation-delay: 0.40s; }
.fade-in:nth-of-type(4) { animation-delay: 0.50s; }
.fade-in:nth-of-type(5) { animation-delay: 0.60s; }
.fade-in:nth-of-type(6) { animation-delay: 0.70s; }

/* .reveal still uses GSAP ScrollTrigger; safety fallback in init.js
   forces opacity:1 after 4s if anything is still hidden. */
.reveal { opacity: 0; }
.reveal.shown { opacity: 1; }