/* ==========================================================================
   Lucidez · El Ciclo del Dia (FASE 1)
   Un solo foco que cambia con el momento del dia. El anillo es el motivo
   firma: respira al amanecer, muestra el avance de dia, se atenua de noche.
   ========================================================================== */

.home {
  min-height: calc(100dvh - var(--header-h) - var(--dock-h) - var(--sp-6));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-5);
  opacity: 0;
  transform: translateY(6px);
  animation: home-enter var(--dur-view) var(--ease-out) forwards;
}
@keyframes home-enter { to { opacity: 1; transform: translateY(0); } }

.home__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.home__greeting {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--text);
  margin: 0;
}
.home__prompt { color: var(--text-soft); max-width: 30ch; margin: 0 auto; }
.home__next {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}
.home__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 320px;
  margin-top: var(--sp-2);
}

/* ------------------------------------------------------------------ Anillo */
.ring {
  position: relative;
  width: clamp(220px, 64vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.ring__track {
  fill: none;
  stroke: var(--surface-border);
  stroke-width: 3;
}
.ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms var(--ease-out),
              stroke var(--dur-view) var(--ease-out);
}
/* Halo de respiracion: un pulso lento tipo inhalar/exhalar. */
.ring__breath {
  fill: var(--accent-tint);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ring__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-1);
}
.ring__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ring__value-sub { font-size: var(--fs-sm); color: var(--text-soft); }
.ring__breathlabel {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--fs-lg);
  color: var(--text);
}
.ring__whisper {
  font-size: var(--fs-sm);
  color: var(--excellence);
  letter-spacing: 0.04em;
}

/* --- Modo respiracion (amanecer) --------------------------------------- */
.ring--breathe .ring__fill { opacity: 0; }
.ring--breathe .ring__value,
.ring--breathe .ring__whisper { display: none; }
.ring--breathe .ring__breath {
  opacity: 0.9;
  animation: breathe 10s var(--ease-in-out) infinite;
}
@keyframes breathe {
  0%   { transform: scale(0.72); opacity: 0.55; }
  40%  { transform: scale(1.0); opacity: 0.95;
         animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1); }
  100% { transform: scale(0.72); opacity: 0.55; }
}

/* --- Modo progreso (dia) ----------------------------------------------- */
.ring--progress .ring__breath { opacity: 0; animation: none; }
.ring--progress .ring__breathlabel { display: none; }

/* --- Modo dial (noche): se atenua a un hilo fino ----------------------- */
.ring--dial { opacity: 0.85; }
.ring--dial .ring__breath { opacity: 0; animation: none; }
.ring--dial .ring__breathlabel { display: none; }
.ring--dial .ring__fill { stroke-width: 2; opacity: 0.5; }
.ring--dial .ring__value { font-size: var(--fs-xl); color: var(--text-soft); }

/* --- Momento de excelencia (raro, unico deleite) ----------------------- */
.ring--gold .ring__fill { stroke: var(--excellence); opacity: 1; }
.ring--gold .ring__value { color: var(--excellence); }
.celebrate {
  transform: scale(0.9);
  opacity: 0;
  animation: pop-in 280ms var(--ease-out) forwards;
}
@keyframes pop-in {
  0%   { transform: scale(0.9);  opacity: 0; }
  70%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Reduced motion: sin pulso ni pop; conservamos color y opacidad final. */
@media (prefers-reduced-motion: reduce) {
  .ring--breathe .ring__breath { opacity: 0.8; animation: none; transform: scale(0.9); }
  .celebrate { animation: none; opacity: 1; transform: none; }
  .home { animation: none; opacity: 1; transform: none; }
}