/* ============ CAUCE · escena de entrada del login ============
   Un cauce de agua dentro de un canal tallado sobre el formulario de
   #entrada: tres ondas SVG, la racha de la semana y el anillo de enfoque.
   Al iniciar sesión (#entrada.ca-go) el agua sube, cubre la pantalla y se
   retira dejando "Todo fluye" (#entrada.ca-done). Solo tokens de la app:
   --surface, --accent, --ink-*, --neu-* y --ease. Sin datos reales. */

#us-anon .ca-escena{display:flex; flex-direction:column; gap:10px; margin-bottom:4px}
.ca-canal{
  position:relative; height:104px; border-radius:20px; overflow:hidden;
  background:var(--surface); box-shadow:var(--neu-sunken);
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.ca-canal .ca-waves{position:absolute; inset:0; width:200%; height:100%; animation:ca-flow 6s linear infinite}
.ca-canal .ca-waves path{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round}
.ca-canal .ca-w1{opacity:.9}
.ca-canal .ca-w2{opacity:.5; animation:ca-sway 3s ease-in-out infinite alternate}
.ca-canal .ca-w3{opacity:.25}
@keyframes ca-flow{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes ca-sway{from{transform:translateY(-3px)} to{transform:translateY(3px)}}
.ca-ripple{fill:none; stroke:var(--accent); opacity:.7; stroke-width:1.5; animation:ca-rip 1.1s ease-out forwards}
@keyframes ca-rip{from{r:2; opacity:.85} to{r:34; opacity:0}}

/* anillo de enfoque, arriba a la derecha del canal */
.ca-anillo{position:absolute; right:8px; top:8px; width:42px; height:42px}
.ca-anillo circle{fill:none; stroke-width:4; stroke-linecap:round}
.ca-anillo .t{stroke:rgba(var(--nd),.35)}
.ca-anillo .p{
  stroke:var(--accent); stroke-dasharray:113; stroke-dashoffset:113;
  transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset .45s var(--ease);
}

/* racha de la semana */
.ca-racha{display:flex; gap:9px; align-items:center; justify-content:center}
.ca-racha b{font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--ink-3); margin-right:2px}
.ca-dia{
  width:22px; height:22px; border-radius:50%; background:var(--surface); box-shadow:var(--neu-raised-sm);
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation;
  transition:transform .2s var(--ease);
}
.ca-dia::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .3s var(--ease)}
.ca-dia.on::after{transform:scale(1)}
.ca-dia:active{transform:scale(.92)}
.ca-dia:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.ca-hint{margin:0; text-align:center; font-size:11px; font-weight:600; color:var(--ink-3)}
.ca-float{
  position:absolute; font-family:"Sora","Manrope",system-ui,sans-serif; font-weight:800; font-size:14px;
  color:var(--accent); pointer-events:none; white-space:nowrap; animation:ca-rise .9s var(--ease) forwards;
}
@keyframes ca-rise{from{opacity:1; transform:translate(-50%,0)} to{opacity:0; transform:translate(-50%,-38px)}}

/* ---- entrada: el agua sube y cubre la pantalla de acceso ---- */
#entrada.ca-go{overflow:hidden}
#entrada.ca-go .entrada-scroll{overflow:hidden}
.ca-flood{
  position:absolute; left:0; right:0; bottom:0; height:0; z-index:6; pointer-events:none; overflow:visible;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 55%, transparent));
}
.ca-flood svg{position:absolute; left:0; top:-38px; width:200%; height:40px; animation:ca-flow 3s linear infinite}
.ca-flood svg path{fill:color-mix(in srgb, var(--accent) 22%, transparent)}
#entrada.ca-go .ca-flood{animation:ca-flood 1.3s cubic-bezier(.4,0,.2,1) .1s forwards}
@keyframes ca-flood{0%{height:0} 70%{height:115%; opacity:1} 100%{height:115%; opacity:0}}
#entrada.ca-go #us-anon .ca-escena .ca-hint{opacity:0; transition:opacity .3s}
/* la pantalla no puede esconderse ni repintarse mientras sube el agua */
#entrada.ca-go #us-anon{display:flex!important}
#entrada.ca-go #entrada-titulo,#entrada.ca-go #entrada-texto,#entrada.ca-go #entrada-crear,
#entrada.ca-go #us-google,#entrada.ca-go #us-otp,#entrada.ca-go #us-pass-toggle,#entrada.ca-go #us-pass-form{
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .45s, transform .45s;
}

/* ---- bienvenida ---- */
.ca-welcome{
  position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:40px 30px; background:var(--surface);
  opacity:0; pointer-events:none; transition:opacity .45s;
}
.ca-welcome h3{font-family:"Sora","Manrope",system-ui,sans-serif; font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.ca-welcome p{margin:0; font-size:14px; font-weight:600; color:var(--ink-2)}
#entrada.ca-done .ca-welcome{opacity:1}

@media (prefers-reduced-motion: reduce){
  .ca-canal .ca-waves,.ca-canal .ca-w2,.ca-flood svg,.ca-ripple,.ca-float{animation:none!important}
  .ca-dia,.ca-dia::after,.ca-anillo .p,.ca-welcome{transition:none!important}
  #entrada.ca-go .ca-flood{animation:none!important; height:0}
  #entrada.ca-go #entrada-titulo,#entrada.ca-go #entrada-texto,#entrada.ca-go #entrada-crear,
  #entrada.ca-go #us-google,#entrada.ca-go #us-otp,#entrada.ca-go #us-pass-toggle,#entrada.ca-go #us-pass-form{transition:none!important}
}