/* Login / registro en celular: la portada verde queda fija y, al scrollear, el
   formulario aparece con una transición según la variante (html.auth-fx-<variante>):
   portal (círculo que crece), wipe (barrido diagonal), zoom (acercamiento) o sheet
   (hoja que sube). Solo aplica con html.auth-fx, clase que agrega el script inline de
   partials/auth_scroll_head.php si el ancho es < 960px y no hay prefers-reduced-motion.
   En escritorio no cambia nada. Variante de prueba: ?fx=portal|wipe|zoom|sheet|off */

/* ---- Comunes ---- */
html.auth-fx .auth-side{
  position:sticky;top:0;z-index:0;
  min-height:100vh;min-height:100svh;
  justify-content:center;
  padding-bottom:72px;
}
html.auth-fx .auth-side-content,
html.auth-fx .auth-side-decor{will-change:transform,opacity;}
html.auth-fx .auth-side-content{transform-origin:50% 35%;}
html.auth-fx .auth-side-footer{display:none;}

html.auth-fx .auth-main{
  position:relative;z-index:2;
  min-height:100vh;min-height:100svh;
}
html.auth-fx .auth-page .auth-shell{
  justify-content:flex-start;
  padding-top:34px;padding-bottom:48px;
}
html.auth-fx #auth-card{scroll-margin-top:14px;}

/* portal y wipe: el contenido de la portada se centra en el espacio que queda por encima
   de la burbuja de papel (--fx-peek lo fija auth-scroll.js), para que no se pisen. */
html.auth-fx-portal .auth-side,
html.auth-fx-wipe .auth-side{
  padding-bottom:calc(var(--fx-peek,150px) + 28px);
}

/* Pantallas bajas (ej. 320×568): se compacta la portada para que entre sobre la burbuja. */
@media (max-height:640px){
  html.auth-fx .auth-side{padding-top:20px;}
  html.auth-fx .auth-side-title{font-size:26px;margin-top:0;}
  html.auth-fx .auth-side-sub{font-size:14px;margin-top:8px;}
  html.auth-fx .auth-preview-card{margin-top:16px;padding:14px;}
}

/* Capa fija color papel que "cubre" la portada (portal / wipe / zoom) */
.auth-fx-layer{display:none;}
html.auth-fx:not(.auth-fx-sheet) .auth-fx-layer{
  display:block;position:fixed;inset:0;z-index:1;
  background:var(--paper);pointer-events:none;
  will-change:clip-path,opacity;
}

/* ---- Variante: sheet (hoja que sube) ---- */
html.auth-fx-sheet .auth-side{
  min-height:calc(100vh - 120px);min-height:calc(100svh - 120px);
  padding-bottom:64px;
}
html.auth-fx-sheet .auth-main{
  margin-top:-28px;
  border-radius:32px 32px 0 0;
  background:var(--paper);
  box-shadow:0 -22px 50px -22px oklch(12% 0.04 160 / 0.6);
}
html.auth-fx-sheet .auth-main::before{
  content:"";position:absolute;top:10px;left:50%;
  width:44px;height:5px;margin-left:-22px;border-radius:3px;
  background:oklch(86% 0.012 95);
  animation:authHandlePulse 2.4s ease-in-out 1.2s 3;
}
@keyframes authHandlePulse{
  0%,100%{transform:scaleX(1);background:oklch(86% 0.012 95);}
  50%{transform:scaleX(1.5);background:var(--green);}
}
html.auth-fx-sheet .auth-page .auth-shell{padding-top:26px;}

/* ---- Aparición en cascada (todas las variantes) ---- */
html.auth-fx.auth-fx-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,32px,0) scale(.97);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
html.auth-fx.auth-fx-ready [data-reveal].is-in{opacity:1;transform:none;}

/* ---- Indicador "Deslizá para ..." ---- */
.auth-scroll-cue{display:none;}
html.auth-fx .auth-scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:fixed;z-index:3;left:50%;
  transform:translateX(-50%);
  border:0;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:13px;
  cursor:pointer;white-space:nowrap;
  /* "backwards" (no "both"): una animación con fill forward pisaría el opacity
     que auth-scroll.js ajusta con el scroll y el cartel quedaría flotando. */
  animation:authCueIn .7s cubic-bezier(.16,1,.3,1) .9s backwards;
  -webkit-tap-highlight-color:transparent;
}
.auth-scroll-cue-logo{width:38px;height:38px;margin-bottom:4px;animation:authCueLogo 2.6s ease-in-out infinite;}
.auth-scroll-cue-chevrons{display:flex;flex-direction:column;align-items:center;height:20px;}
.auth-scroll-cue-chevrons svg{width:14px;height:14px;margin-top:-5px;animation:authCueChevron 1.5s ease-in-out infinite;}
.auth-scroll-cue-chevrons svg:nth-child(2){animation-delay:.18s;}
@keyframes authCueIn{0%{opacity:0;transform:translate(-50%,16px);}100%{opacity:1;transform:translate(-50%,0);}}
@keyframes authCueChevron{
  0%,100%{opacity:.25;transform:translateY(-2px);}
  50%{opacity:1;transform:translateY(3px);}
}
@keyframes authCueLogo{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-5px) scale(1.06);}}

/* sheet y zoom: pastilla de vidrio blanca sobre la portada verde */
html.auth-fx-sheet .auth-scroll-cue,
html.auth-fx-zoom .auth-scroll-cue{
  padding:9px 18px 6px;border-radius:999px;color:white;
  background:oklch(100% 0 0 / 0.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid oklch(100% 0 0 / 0.28);
}
html.auth-fx-sheet .auth-scroll-cue{bottom:calc(148px + 18px);}
html.auth-fx-zoom .auth-scroll-cue{bottom:36px;}
html.auth-fx-zoom .auth-scroll-cue-logo,
html.auth-fx-sheet .auth-scroll-cue-logo{display:none;}

/* portal y wipe: el cartel vive dentro del papel que asoma abajo, en verde oscuro */
html.auth-fx-portal .auth-scroll-cue,
html.auth-fx-wipe .auth-scroll-cue{
  /* centrado en la altura visible de la burbuja (el bloque mide ~80px) */
  bottom:max(14px,calc(var(--fx-peek,150px) / 2 - 40px));
  padding:10px 26px;color:var(--green-dark);background:transparent;
}

@media (prefers-reduced-motion:reduce){
  html.auth-fx-sheet .auth-main::before{animation:none;}
  html.auth-fx .auth-scroll-cue{animation:none;}
  .auth-scroll-cue-logo,.auth-scroll-cue-chevrons svg{animation:none;}
  .auth-scroll-cue-chevrons svg{opacity:.8;}
}