/* =========================================================
   CLUB SUD AMÉRICA — UI 2.0 FOUNDATION
   Capa de overrides no destructiva.
   ========================================================= */

:root {
  --ui2-green-950: #032219;
  --ui2-green-900: #063428;
  --ui2-green-800: #084737;
  --ui2-green-700: #0b5f49;
  --ui2-mint-500: #28c28b;

  --ui2-ink: #06271e;
  --ui2-ink-soft: #3f554c;
  --ui2-muted: #6f7f78;
  --ui2-canvas: #f3f5f4;
  --ui2-surface: #ffffff;
  --ui2-surface-soft: #f8faf9;
  --ui2-line: rgba(6, 39, 30, .10);

  --ui2-radius-sm: 12px;
  --ui2-radius-md: 18px;
  --ui2-radius-lg: 24px;
  --ui2-radius-xl: 30px;

  --ui2-shadow-xs: 0 1px 2px rgba(3, 34, 25, .04);
  --ui2-shadow-sm: 0 10px 26px rgba(3, 34, 25, .07);
  --ui2-shadow-md: 0 20px 48px rgba(3, 34, 25, .10);
  --ui2-shadow-focus: 0 0 0 4px rgba(40, 194, 139, .16);

  --ui2-ease-out: cubic-bezier(.2, .8, .2, 1);
  --ui2-duration-fast: 160ms;
  --ui2-duration: 240ms;
  --ui2-duration-slow: 560ms;

  --ui2-mobile-nav-height: 72px;
}

html { background: var(--ui2-canvas); }

body {
  color: var(--ui2-ink);
  background:
    radial-gradient(circle at 78% -10%, rgba(40, 194, 139, .055), transparent 28rem),
    var(--ui2-canvas);
}

::selection { color: #fff; background: var(--ui2-green-700); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ui2-mint-500);
  outline-offset: 3px;
}

:where(a, button) { -webkit-tap-highlight-color: transparent; }
.content { isolation: isolate; }
.content > :first-child { margin-top: 0; }

.ui2-motion-enabled .ui2-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.992);
  transition:
    opacity var(--ui2-duration-slow) var(--ui2-ease-out),
    transform var(--ui2-duration-slow) var(--ui2-ease-out);
  transition-delay: var(--ui2-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.ui2-motion-enabled .ui2-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

:where(.card, .newsCard, .scheduleCard, .resultCard, .membersCard) {
  transition:
    transform var(--ui2-duration) var(--ui2-ease-out),
    box-shadow var(--ui2-duration) var(--ui2-ease-out),
    border-color var(--ui2-duration) ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(.card, .newsCard, .scheduleCard, .resultCard, .membersCard):hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 768px) {
  body { padding-bottom: calc(var(--ui2-mobile-nav-height) + env(safe-area-inset-bottom)); }
  .content { padding-bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .ui2-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   UI 2.0 — Scroll reveal
   ========================================================= */

.ui2-motion-enabled .ui2-reveal {
    opacity: 0;
    transform:
        translate3d(0, 24px, 0)
        scale(.985);

    transition:
        opacity 560ms cubic-bezier(.22, 1, .36, 1),
        transform 560ms cubic-bezier(.22, 1, .36, 1);

    transition-delay: var(--ui2-reveal-delay, 0ms);

    will-change: opacity, transform;
}

.ui2-motion-enabled .ui2-reveal.is-visible {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

/*
 * Animación inicial del hero.
 * Es un poco más larga porque es la primera impresión.
 */
.ui2-motion-enabled .homeHero.ui2-reveal {
    transform:
        translate3d(0, 16px, 0)
        scale(.992);

    transition-duration: 720ms;
}

.ui2-motion-enabled .homeHero.ui2-reveal.is-visible {
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

/*
 * Las cards pequeñas entran con menos desplazamiento.
 */
.ui2-motion-enabled .sportsWidget.ui2-reveal,
.ui2-motion-enabled .newsCompact.ui2-reveal,
.ui2-motion-enabled .institutionalPanel.ui2-reveal {
    transform:
        translate3d(0, 18px, 0)
        scale(.99);
}

.ui2-motion-enabled .sportsWidget.ui2-reveal.is-visible,
.ui2-motion-enabled .newsCompact.ui2-reveal.is-visible,
.ui2-motion-enabled .institutionalPanel.ui2-reveal.is-visible {
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .ui2-motion-enabled .ui2-reveal,
    .ui2-motion-enabled .ui2-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}