/* ============================================================================
   ELEVARE · indexx.html · 3D MOTION LAYER
   Capa opt-in con 4 primitivas universales aplicadas vía data-attrs.
   No toca styles.css ni script.js de producción.
   ============================================================================ */

:root{
  --m3-perspective: 1400px;
  --m3-enter-y: 48px;
  --m3-enter-rot: 7deg;
  --m3-enter-dur: 1.1s;
  --m3-enter-delay-step: 90ms;
  --m3-tilt-amp: 6deg;
  --m3-float-dur: 7s;
  --m3-ease: cubic-bezier(.22,.61,.36,1);
  --m3-ease-spring: cubic-bezier(.34, 1.32, .64, 1);
}

/* IMPORTANTE · NO aplicar perspective a body ni a ancestros del nav (fixed).
   Perspective va incluido en cada transform individual a nivel de elemento. */

/* ============================================================================
   1 · 3D ENTER · entrada cinematográfica al entrar al viewport
   Variantes: default (abajo), "left" (izq), "right" (der), "zoom" (atrás)
   ============================================================================ */
[data-m3-enter]{
  opacity: 0;
  transform: perspective(var(--m3-perspective)) translate3d(0, var(--m3-enter-y), -80px) rotateX(var(--m3-enter-rot));
  transform-origin: 50% 100%;
  transition: opacity var(--m3-enter-dur) var(--m3-ease),
              transform var(--m3-enter-dur) var(--m3-ease);
  transition-delay: var(--m3-delay, 0s);
  will-change: opacity, transform;
}
[data-m3-enter].is-in{
  opacity: 1;
  transform: perspective(var(--m3-perspective)) translate3d(0, 0, 0) rotateX(0deg);
}

[data-m3-enter="left"]{ transform: perspective(var(--m3-perspective)) translate3d(-56px, 0, -80px) rotateY(9deg); }
[data-m3-enter="left"].is-in{ transform: perspective(var(--m3-perspective)) translate3d(0,0,0) rotateY(0); }

[data-m3-enter="right"]{ transform: perspective(var(--m3-perspective)) translate3d(56px, 0, -80px) rotateY(-9deg); }
[data-m3-enter="right"].is-in{ transform: perspective(var(--m3-perspective)) translate3d(0,0,0) rotateY(0); }

[data-m3-enter="zoom"]{ transform: perspective(var(--m3-perspective)) translate3d(0,0,-180px) scale(.93); }
[data-m3-enter="zoom"].is-in{ transform: perspective(var(--m3-perspective)) translate3d(0,0,0) scale(1); }

[data-m3-enter="flip-up"]{
  transform: perspective(var(--m3-perspective)) translate3d(0, 60px, -120px) rotateX(14deg);
  transform-origin: 50% 100%;
}
[data-m3-enter="flip-up"].is-in{ transform: perspective(var(--m3-perspective)) translate3d(0,0,0) rotateX(0); }

/* ============================================================================
   2 · 3D TILT · cards reactivas al cursor con perspectiva + glare
   ============================================================================ */
[data-m3-tilt]{
  transform-style: preserve-3d;
  transition: transform .42s var(--m3-ease),
              box-shadow .42s var(--m3-ease);
  will-change: transform;
  position: relative;
}
[data-m3-tilt]:hover{
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
}
[data-m3-tilt]::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--m3-glare-x, 50%) var(--m3-glare-y, 50%),
    rgba(255,255,255,.10),
    transparent 50%
  );
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity .32s ease;
  mix-blend-mode: screen;
  z-index: 1;
}
[data-m3-tilt]:hover::after{ opacity: 1; }

/* Variante de tilt más sutil para items grandes */
[data-m3-tilt="soft"]{ --m3-tilt-amp: 3deg; }
/* Variante más pronunciada para cards icónicas */
[data-m3-tilt="strong"]{ --m3-tilt-amp: 9deg; }

/* ============================================================================
   3 · 3D FLOAT · animación continua para marks y accents
   ============================================================================ */
[data-m3-float]{
  animation: m3-float var(--m3-float-dur) ease-in-out infinite alternate;
  will-change: transform;
  transform-style: preserve-3d;
}
@keyframes m3-float{
  0%   { transform: translate3d(0,0,0) rotateY(-3deg) rotateX(1deg); }
  100% { transform: translate3d(0,-10px,16px) rotateY(3deg) rotateX(-1deg); }
}

[data-m3-float="slow"]{ --m3-float-dur: 11s; }
[data-m3-float="fast"]{ --m3-float-dur: 5s; }

/* ============================================================================
   4 · 3D PARALLAX · scroll-driven Z + Y translation
   ============================================================================ */
[data-m3-parallax]{
  transition: transform .12s linear;
  will-change: transform;
}

/* ============================================================================
   Tratamientos específicos por sección · refuerzan jerarquía
   ============================================================================ */
/* Cards de método (pillars) · stagger automático interno */
.pillars [data-m3-enter]:nth-child(1){ --m3-delay: 0ms; }
.pillars [data-m3-enter]:nth-child(2){ --m3-delay: 110ms; }
.pillars [data-m3-enter]:nth-child(3){ --m3-delay: 220ms; }

/* Casos featured · entrada alternada izquierda/derecha */
.results__featured:nth-of-type(odd)[data-m3-enter]{ --m3-delay: 60ms; }
.results__featured:nth-of-type(even)[data-m3-enter]{ --m3-delay: 140ms; }

/* Stats del founder · entrada zoom escalonada */
.founder__stats .founder__stat:nth-child(1){ --m3-delay: 0ms; }
.founder__stats .founder__stat:nth-child(2){ --m3-delay: 90ms; }
.founder__stats .founder__stat:nth-child(3){ --m3-delay: 180ms; }
.founder__stats .founder__stat:nth-child(4){ --m3-delay: 270ms; }

/* Cards de resultados (4 columnas) · stagger */
.results__grid > .results__card:nth-child(1){ --m3-delay: 0ms; }
.results__grid > .results__card:nth-child(2){ --m3-delay: 90ms; }
.results__grid > .results__card:nth-child(3){ --m3-delay: 180ms; }
.results__grid > .results__card:nth-child(4){ --m3-delay: 270ms; }

/* Items de inversión · stagger */
.investment__list > .investment__item:nth-child(1){ --m3-delay: 0ms; }
.investment__list > .investment__item:nth-child(2){ --m3-delay: 100ms; }
.investment__list > .investment__item:nth-child(3){ --m3-delay: 200ms; }
.investment__list > .investment__item:nth-child(4){ --m3-delay: 300ms; }

/* Compromiso (07) · 4 items con stagger en flip-up */
.commitment__grid > .commitment__item:nth-child(1){ --m3-delay: 0ms; }
.commitment__grid > .commitment__item:nth-child(2){ --m3-delay: 90ms; }
.commitment__grid > .commitment__item:nth-child(3){ --m3-delay: 180ms; }
.commitment__grid > .commitment__item:nth-child(4){ --m3-delay: 270ms; }

/* Timeline (proceso) · alternancia izquierda/derecha implícita */
.timeline .timeline__item:nth-child(odd)[data-m3-enter]{
  transform: perspective(var(--m3-perspective)) translate3d(-44px, 24px, -60px) rotateY(7deg);
}
.timeline .timeline__item:nth-child(even)[data-m3-enter]{
  transform: perspective(var(--m3-perspective)) translate3d(44px, 24px, -60px) rotateY(-7deg);
}
.timeline .timeline__item.is-in{
  transform: perspective(var(--m3-perspective)) translate3d(0,0,0) rotateY(0) !important;
}

/* FAQ items · stagger sutil */
.faq__item:nth-child(1){ --m3-delay: 0ms; }
.faq__item:nth-child(2){ --m3-delay: 60ms; }
.faq__item:nth-child(3){ --m3-delay: 120ms; }
.faq__item:nth-child(4){ --m3-delay: 180ms; }
.faq__item:nth-child(5){ --m3-delay: 240ms; }
.faq__item:nth-child(6){ --m3-delay: 300ms; }
.faq__item:nth-child(7){ --m3-delay: 360ms; }
.faq__item:nth-child(8){ --m3-delay: 420ms; }

/* Apply pasos (choice cards) · stagger */
.apply__choice-grid .apply__choice-card:nth-child(1){ --m3-delay: 0ms; }
.apply__choice-grid .apply__choice-card:nth-child(2){ --m3-delay: 80ms; }
.apply__choice-grid .apply__choice-card:nth-child(3){ --m3-delay: 160ms; }
.apply__choice-grid .apply__choice-card:nth-child(4){ --m3-delay: 240ms; }

/* Hero · logo mark con float + perspectiva interna */
.hero__logo-mark{ transform-style: preserve-3d; display:inline-block; }

/* ============================================================================
   Refinement · accesibilidad y reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  [data-m3-enter]{ opacity:1; transform:none; transition:none; }
  [data-m3-tilt]:hover{ box-shadow: none; }
  [data-m3-tilt]{ transform:none !important; }
  [data-m3-tilt]::after{ display:none; }
  [data-m3-float]{ animation:none; }
  [data-m3-parallax]{ transform:none !important; transition:none; }
}

@media (hover: none), (pointer: coarse){
  [data-m3-tilt]{ transform:none !important; }
  [data-m3-tilt]::after{ display:none; }
}

/* En pantallas estrechas, suavizamos amplitudes */
@media (max-width: 768px){
  :root{
    --m3-enter-y: 32px;
    --m3-enter-rot: 5deg;
    --m3-enter-dur: .85s;
  }
  [data-m3-float]{ animation-duration: 9s; }
}