/* ============================================================
   COLEGIO SALVATIERRA — Apple/iOS Card Animations
   Namespace: .sv-*  |  v1.0 | 2026-05-13
   Solo opacity + transform (GPU compositable — sin layout reflow)
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Easings */
  --sv-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* iOS spring c/ rebote suave */
  --sv-ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94); /* iOS ease-out */
  --sv-snappy:    cubic-bezier(0.22, 1, 0.36, 1);       /* salida rápida */

  /* Duraciones */
  --sv-dur:         580ms;   /* entrada de tarjeta */
  --sv-dur-hover:   270ms;   /* hover / tilt */
  --sv-dur-tap:     120ms;   /* tap en touch */

  /* Stagger entre tarjetas del mismo grupo */
  --sv-stagger:     55ms;
  --sv-i:           0;       /* índice por tarjeta (lo asigna el JS) */
}

/* ── 2. Estado Oculto (antes del scroll reveal) ───────────── */
body .sv-card {
  opacity: 0 !important;
  transform: translateY(26px) scale(0.95) !important;
  transition:
    opacity   var(--sv-dur) var(--sv-ease-out),
    transform var(--sv-dur) var(--sv-spring),
    box-shadow var(--sv-dur-hover) var(--sv-ease-out) !important;
  transition-delay: calc(var(--sv-i) * var(--sv-stagger)) !important;
  will-change: opacity, transform;
}

/* ── 2b. Alta especificidad para home page desktop ────────────────────────────
   En home page, main.js (no-mobile) agrega .scroll-reveal a #main > section.
   polish.css tiene reglas de esp. (1,4,1) que fuerzan opacity:1!important en
   hijos de esas secciones.  Al tener la misma especificidad y cargarse DESPUÉS
   que polish.css, animations.css gana el desempate de orden de fuente.
   ─────────────────────────────────────────────────────────────────────────── */
body.page-home #main.home-main .scroll-reveal .sv-card {
  opacity: 0 !important;
  transform: translateY(26px) scale(0.95) !important;
  transition:
    opacity   var(--sv-dur) var(--sv-ease-out),
    transform var(--sv-dur) var(--sv-spring),
    box-shadow var(--sv-dur-hover) var(--sv-ease-out) !important;
  transition-delay: calc(var(--sv-i) * var(--sv-stagger)) !important;
}

/* ── 3. Estado Revelado ───────────────────────────────────── */
body .sv-card.sv-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  will-change: auto;
}

/* ── 3b. Estado Revelado (alta especificidad, home page desktop) ─────────── */
body.page-home #main.home-main .scroll-reveal .sv-card.sv-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  will-change: auto;
}

/* ── 4. Desktop: Hover interacciones ─────────────────────── */
@media (hover: hover) and (pointer: fine) {

  /* Transition más rápida post-reveal para interactividad */
  body .sv-card.sv-visible {
    transition:
      opacity    var(--sv-dur)       var(--sv-ease-out),
      transform  var(--sv-dur-hover) var(--sv-spring),
      box-shadow var(--sv-dur-hover) var(--sv-ease-out) !important;
    transition-delay: 0ms !important;
  }

  /* Alta especificidad: home page desktop post-reveal */
  body.page-home #main.home-main .scroll-reveal .sv-card.sv-visible {
    transition:
      opacity    var(--sv-dur)       var(--sv-ease-out),
      transform  var(--sv-dur-hover) var(--sv-spring),
      box-shadow var(--sv-dur-hover) var(--sv-ease-out) !important;
    transition-delay: 0ms !important;
  }

  /* Lift CSS (solo cuando el tilt JS no está activo) */
  body .sv-card.sv-visible:not(.sv-tilt-active):hover {
    transform: translateY(-6px) scale(1.008) !important;
    box-shadow:
      0 24px 54px rgba(8, 22, 43, 0.17),
      0 8px  16px rgba(8, 22, 43, 0.09) !important;
  }

  /* ── Shimmer sweep (solo en tarjetas de contenido) ── */
  body .box.feature.sv-card.sv-visible,
  body .identidad-card.sv-card.sv-visible {
    position: relative;
    overflow: hidden;
  }

  body .box.feature.sv-card.sv-visible::after,
  body .identidad-card.sv-card.sv-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
      118deg,
      transparent 20%,
      rgba(255, 255, 255, 0.11) 50%,
      transparent 78%
    );
    background-size: 220% 100%;
    background-position: 200% 0;
    opacity: 0;
    transition:
      background-position 0.68s var(--sv-ease-out),
      opacity             0.22s;
  }

  body .box.feature.sv-card.sv-visible:hover::after,
  body .identidad-card.sv-card.sv-visible:hover::after {
    background-position: -60% 0;
    opacity: 1;
  }

  /* ── Zoom imagen gallery ── */
  .gallery-card.sv-card.sv-visible img {
    transition:
      transform 0.55s var(--sv-ease-out),
      filter    0.55s var(--sv-ease-out) !important;
  }

  .gallery-card.sv-card.sv-visible:hover img {
    transform: scale(1.05) !important;
  }

  /* ── Zoom foto equipo ── */
  .team-member.sv-card.sv-visible .team-member-photo-shell img,
  .team-member.sv-card.sv-visible .team-member-photo-shell {
    transition: transform 0.48s var(--sv-ease-out) !important;
  }

  .team-member.sv-card.sv-visible:hover .team-member-photo-shell img {
    transform: scale(1.07) !important;
  }
}

/* ── 5. Touch Tap Feedback (celular / tablet) ─────────────── */
@media (pointer: coarse) {
  body .sv-card.sv-visible:active {
    transform: scale(0.97) !important;
    transition: transform var(--sv-dur-tap) var(--sv-snappy) !important;
  }
}

/* ── 6. Soporte 3D Tilt (JS aplica transform inline) ─────── */
body .sv-card.sv-visible {
  transform-style: preserve-3d;
}

/* Spring-back al soltar el mouse */
body .sv-card.sv-tilt-leaving {
  transition:
    transform  var(--sv-dur-hover) var(--sv-spring)   !important,
    box-shadow var(--sv-dur-hover) var(--sv-ease-out) !important;
  transition-delay: 0ms !important;
}

/* ── 7. Reducción de movimiento: sin animaciones ──────────── */
@media (prefers-reduced-motion: reduce) {
  body .sv-card,
  body .sv-card.sv-visible,
  body .sv-card.sv-tilt-leaving {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  body .sv-card.sv-visible::after {
    display: none !important;
  }
}

/* ── 8. Ajustes Mobile/Tablet ─────────────────────────────── */
@media screen and (max-width: 736px) {
  :root {
    --sv-dur:     480ms;   /* un poco más rápido en mobile */
    --sv-stagger: 45ms;
  }

  body .sv-card {
    transform: translateY(20px) scale(0.97) !important;
  }

  /* Alta especificidad mobile (tablet pointer:fine + viewport estrecho) */
  body.page-home #main.home-main .scroll-reveal .sv-card {
    transform: translateY(20px) scale(0.97) !important;
  }
}

/* ── 9. Garantía visual ───────────────────────────────────────────────────────
   Los @keyframes NO pueden sobrescribir declaraciones con !important.
   El failsafe real es el setTimeout en animations.js → boot():
     - Revela solo las tarjetas actualmente visibles en pantalla que el IO
       no procesó (el IO no espera a que la pantalla esté completamente cargada).
     - Las tarjetas debajo del fold NO se revelan hasta que el usuario desplace.
   ─────────────────────────────────────────────────────────────────────────── */