/* ==========================================================================
   Variables y Configuración Global
   ========================================================================== */

   :root {
    /* Paleta de colores - Tema Light (Default) */
    --color-background: #ffffff;
    --color-foreground: #282728;
    --color-accent: #ffb20f;
    --color-muted: #e6e6e6;
    --color-border: #ece9e9;

    /* Escala de espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Tipografía */
    --font-heading: 'Cabinet Grotesk', sans-serif;
    --font-ui: 'Satoshi', sans-serif;

    /* Configuraciones de odómetro */
    --digit-height: 15vh; /* Se usa vh para escalar con el tamaño de pantalla */
    --digit-font-size: 15vh;
  }

  /* Tema Dark */
  [data-theme="dark"] {
    --color-background: #101010;
    --color-foreground: #f5f5f5;
    /* El acento se mantiene */
    --color-accent: #ffb20f;
    --color-muted: #1a1a1a;
    --color-border: #2a2a2a;
  }

  /* Reset y preparación Fullscreen */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Nada de scroll en el salvapantallas */
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-ui);
    transition: background-color 0.8s ease, color 0.8s ease;
  }

  /* ==========================================================================
     Fondo con Micro-animaciones (CRÍTICO)
     ========================================================================== */

  .ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* No bloquear clicks */
    overflow: hidden;
  }

  /* Blobs para fondos orgánicos - solo color accent */
  .ambient-blob {
    position: absolute;
    background-color: var(--color-accent);
    border-radius: 50%;
    filter: blur(100px); /* Difuminado extremo para hacerlo un gradiente */
    opacity: 0.05; /* Entre 0.03 y 0.08 como se solicitó */
    mix-blend-mode: normal;
  }

  /* Tamaños y posiciones base */
  .blob-1 {
    width: 40vw;
    height: 40vw;
    top: -10vw;
    left: -10vw;
    animation: drift-1 45s infinite alternate ease-in-out;
  }

  .blob-2 {
    width: 50vw;
    height: 50vw;
    bottom: -20vw;
    right: -10vw;
    opacity: 0.06;
    animation: drift-2 60s infinite alternate ease-in-out;
  }

  .blob-3 {
    width: 35vw;
    height: 35vw;
    top: 30vh;
    left: 40vw;
    opacity: 0.04;
    animation: drift-3 50s infinite alternate ease-in-out;
  }

  /* Animaciones de blobs (suaves, orgánicas, muy lentas) */
  @keyframes drift-1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10vw, 15vh) scale(1.1); opacity: 0.07; }
    100% { transform: translate(5vw, 25vh) scale(0.9); }
  }

  @keyframes drift-2 {
    0% { transform: translate(0, 0) scale(1.1); }
    50% { transform: translate(-15vw, -10vh) scale(0.9); opacity: 0.04; }
    100% { transform: translate(-5vw, -20vh) scale(1.2); opacity: 0.08; }
  }

  @keyframes drift-3 {
    0% { transform: translate(0, 0) scale(0.9); opacity: 0.03; }
    50% { transform: translate(10vw, -15vh) scale(1.2); }
    100% { transform: translate(-10vw, -5vh) scale(1); opacity: 0.06; }
  }

  /* ==========================================================================
     Layout Principal y Anti Burn-in
     ========================================================================== */

  .screensaver-container {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* La transformación anti burn-in se inyectará por JS via variables CSS inline o transform */
    transition: transform 5s ease-in-out; /* Transición ultra suave para el anti burn-in */
  }

  /* ==========================================================================
     Reloj Odómetro
     ========================================================================== */

  .clock {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-foreground);
    line-height: 1;
    /* Alineación perfecta y espacio fijo para números */
    font-variant-numeric: tabular-nums;
  }

  .clock-separator {
    font-size: var(--digit-font-size);
    margin: 0 var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--digit-height);
    transform: translateY(-5%); /* Ajuste visual sutil para los dos puntos */
    color: var(--color-foreground);
  }

  .odometer-group {
    display: flex;
    /* Sin cajas innecesarias, solo un wrapper lógico */
  }

  /* Columna individual que actúa como ventana ('viewport') del cilindro */
  .odometer-column {
    height: var(--digit-height);
    overflow: hidden; /* Oculta los números fuera de foco */
    position: relative;
    /* Anchura fija estimada para números en Cabinet Grotesk; tabular-nums ayuda pero esto fuerza columnas fijas */
    width: 0.65em;
    font-size: var(--digit-font-size);
    text-align: center;
  }

  /* El tema dark usa los mismos estilos base sin fondo especial */
  [data-theme="dark"] .odometer-column {
    background: transparent;
  }

  /* Contenedor interno que se desplazará verticalmente */
  .odometer-reel {
    display: flex;
    flex-direction: column;
    /* La animación se gestiona por JS via Web Animations API */
    will-change: transform;
    transform: translateY(0);
  }

  /* Cada número dentro de la columna */
  .odometer-digit {
    height: var(--digit-height);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Prevenir selección */
    user-select: none;
  }

  /* ==========================================================================
     UI Mínima e Interacción
     ========================================================================== */

  .minimal-ui {
    position: fixed;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
    display: flex;
    gap: var(--spacing-sm);
    /* Desaparece automáticamente. Clase 'idle' la oculta. */
    opacity: 1;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  }

  .minimal-ui.idle {
    opacity: 0;
    visibility: hidden;
  }

  .ui-button {
    background: transparent;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .ui-button:hover {
    color: var(--color-accent);
    transform: scale(1.1);
  }

  /* Ocultar en pantallas muy pequeñas */
  @media (max-width: 480px) {
    :root {
      --digit-height: 12vh;
      --digit-font-size: 12vh;
    }

    .clock-separator {
      margin: 0 var(--spacing-xs);
    }
  }