/*
Theme Name:   Enroke (Avada Child)
Theme URI:    https://grupoenroke.com
Description:  Child theme de Avada para grupoenroke.com. Inyecta sistema de diseño Enroke v2 (Cormorant + Inter + JetBrains Mono, paleta de 7 colores) y motion stack premium (GSAP + ScrollTrigger + Splitting.js + Lenis).
Author:       Enroke
Template:     Avada
Version:      0.1.0
Text Domain:  enroke-child
*/

/* =============================================================
   1. Design tokens — Enroke Design System v2
   ============================================================= */
:root {
  /* Palette (locked, 7 colors) */
  --c-paper:      #F2EEE5;
  --c-offwhite:   #FBF8F2;
  --c-ink:        #0E1A2B;
  --c-bone:       #E8E2D3;
  --c-warm-gray:  #6C6357;
  --c-gold:       #B89968;
  --c-gold-hover: #9F7E45;

  /* Internal helpers (not part of public spec) */
  --c-paper-2: #EAE5DA;
  --c-ink-2:   #13243A;
  --c-rule:    #cdc6b6;

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   800ms;

  /* Elevation (premium = restraint) */
  --shadow-elev: 0 1px 3px rgba(14, 26, 43, 0.08);
}

/* =============================================================
   2. Global typography baseline
   ============================================================= */
body {
  font-family: var(--font-body);
  background: var(--c-paper);
  color: var(--c-ink);
}

h1, h2, h3, h4, .fusion-title-heading {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.eyebrow,
.enroke-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* Italic + gold = the protected signature */
.enroke-emph,
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--c-gold);
}

/* =============================================================
   3. Motion utilities — añade estas clases a cualquier elemento
      Avada (campo "CSS Class") para activar la animación.
   ============================================================= */

/* Estado inicial — el JS lo anima al entrar viewport */
.enroke-reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.enroke-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}

/* Note: stagger initial state is now handled by JS (gsap.from with
   immediateRender:false). Setting opacity:0 here breaks Avada's nested
   wrapper structure — wrapper hides, hiding all content inside it. */

/* Smooth scroll (Lenis) — desactivar en mobile (ver enroke-motion.js) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* =============================================================
   4. Accesibilidad — respetar prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .enroke-reveal,
  .enroke-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .enroke-stack-card { position: static !important; transform: none !important; opacity: 1 !important; }
  .enroke-santiago-photo img { filter: none !important; transition: none !important; }
}

/* =============================================================
   5. Hover team (Fase 5) — placeholder, se completa al construir About
   ============================================================= */
.enroke-team-card {
  background: var(--c-offwhite);
  transition: background var(--dur-base) var(--ease-in-out);
}
.enroke-team-card:hover {
  background: var(--c-ink);
  color: var(--c-bone);
}

/* =============================================================
   6. Stacking cards (Avada-aware)
   - Container `.enroke-stack` (Avada full-width container)
   - Children `.enroke-stack-card` (Avada columns)
   - Forces vertical layout by overriding Avada's CSS variables AND
     hardening position: sticky on each card.
   ============================================================= */

/* Force the inner row to stack vertically (Avada uses display: flex) */
.enroke-stack .fusion-builder-row,
.enroke-stack .fusion-row {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Each column becomes 100% wide, sticky, with intrinsic height */
.enroke-stack .enroke-stack-card,
.enroke-stack .fusion_builder_column.enroke-stack-card {
  /* Override Avada's CSS variables that drive the column grid */
  --awb-width-large: 100% !important;
  --awb-width-medium: 100% !important;
  --awb-width-small: 100% !important;
  --awb-spacing-right-large: 0 !important;
  --awb-spacing-left-large: 0 !important;
  --awb-spacing-right-medium: 0 !important;
  --awb-spacing-left-medium: 0 !important;
  --awb-spacing-right-small: 0 !important;
  --awb-spacing-left-small: 0 !important;
  --awb-margin-top-large: 0 !important;
  --awb-margin-bottom-large: 0 !important;

  width: 100% !important;
  max-width: 920px !important;
  flex: 0 0 auto !important;
  margin: 0 auto 16px auto !important;

  position: sticky !important;
  transform-origin: center top;
  will-change: transform;
  background: var(--awb-bg-color, #FFFFFF);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(14, 26, 43, 0.08);
}

/* Each card sticks at progressively further down → visible stack */
.enroke-stack .enroke-stack-card:nth-of-type(1) { top: 80px;  z-index: 1; }
.enroke-stack .enroke-stack-card:nth-of-type(2) { top: 100px; z-index: 2; }
.enroke-stack .enroke-stack-card:nth-of-type(3) { top: 120px; z-index: 3; }
.enroke-stack .enroke-stack-card:nth-of-type(4) { top: 140px; z-index: 4; }
.enroke-stack .enroke-stack-card:nth-of-type(5) { top: 160px; z-index: 5; }

/* Ensure no ancestor has overflow:hidden (kills sticky) */
.enroke-stack,
.enroke-stack .fusion-builder-row {
  overflow: visible !important;
}

@media (max-width: 760px) {
  .enroke-stack .enroke-stack-card,
  .enroke-stack .fusion_builder_column.enroke-stack-card {
    position: static !important;
    margin-bottom: 16px !important;
  }
}

/* =============================================================
   7. Santiago photo — premium hover
   ============================================================= */
.enroke-santiago-photo .fusion-image-element,
.enroke-santiago-photo img,
.enroke-santiago-photo .imageframe-align-center {
  overflow: hidden;
}
.enroke-santiago-photo img {
  filter: grayscale(40%);
  transition: filter 480ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: filter, transform;
}
.enroke-santiago-photo:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}