/* ============================================================
   AHI · Transición entre mundos  (Salud ⇄ Patrimoniales)
   ------------------------------------------------------------
   Las dos páginas son gemelas: mismos tokens, distinto valor.
   Aquí los registramos como colores animables (@property), de
   modo que el salto de un mundo a otro no sea un corte sino un
   viraje: toda la página —fondo, filetes, botones, iconos,
   filamentos— deriva hacia el color de destino ANTES de que el
   navegador cambie de documento. Cuando el color ya llegó, un
   lavado suave nacido en el propio switch cubre el último
   tramo y la página nueva entra por el mismo lado al que
   corrió el slider.
   ============================================================ */

@property --night     { syntax:"<color>"; inherits:true; initial-value:#061f3d }
@property --navy      { syntax:"<color>"; inherits:true; initial-value:#0a3663 }
@property --navy-soft { syntax:"<color>"; inherits:true; initial-value:#0e4176 }
@property --cyan      { syntax:"<color>"; inherits:true; initial-value:#00b4d8 }
@property --paper     { syntax:"<color>"; inherits:true; initial-value:#f4f7f6 }
@property --realm-on-bg { syntax:"<color>"; inherits:true; initial-value:#00b4d8 }
@property --realm-on-fg { syntax:"<color>"; inherits:true; initial-value:#04223d }

/* paletas de destino — ganan por especificidad sobre :root */
html.rs-salud{
  --night:#061f3d; --navy:#0a3663; --navy-soft:#0e4176; --cyan:#00b4d8; --paper:#f4f7f6;
  --realm-on-bg:#00b4d8; --realm-on-fg:#04223d;
}
html.rs-patrimonio{
  --night:#0c2620; --navy:#14352d; --navy-soft:#1b4034; --cyan:#6e9a57; --paper:#f5f7f1;
  --realm-on-bg:#6e9a57; --realm-on-fg:#0b2620;
}

/* el viraje de paleta: 500 ms, curva de salida (rápido y se asienta) */
html.realm-leave{
  transition:
    --night .5s cubic-bezier(.33,1,.68,1), --navy .5s cubic-bezier(.33,1,.68,1),
    --navy-soft .5s cubic-bezier(.33,1,.68,1), --cyan .46s cubic-bezier(.33,1,.68,1),
    --paper .5s cubic-bezier(.33,1,.68,1),
    --realm-on-bg .45s ease, --realm-on-fg .45s ease;
}

/* ---------- el lavado ---------- */
#realm-wash{
  position:fixed; inset:0; z-index:300; pointer-events:none; opacity:0;
  transform:scale(1.07); transform-origin:var(--wx,50%) var(--wy,7%);
  background:
    radial-gradient(52% 46% at var(--wx,50%) var(--wy,7%),
      color-mix(in srgb,var(--cyan) 52%,var(--navy-soft)) 0%, transparent 64%),
    radial-gradient(150% 115% at var(--wx,50%) var(--wy,7%),
      var(--navy) 0%, var(--night) 58%);
}
html.realm-leave #realm-wash{
  opacity:1; transform:scale(1);
  transition:opacity .44s cubic-bezier(.4,0,.6,1) .14s,
             transform .6s cubic-bezier(.2,.8,.2,1);
}
html.realm-enter #realm-wash{ animation:realm-wash-out .66s cubic-bezier(.4,0,.2,1) both }
@keyframes realm-wash-out{
  from{ opacity:1; transform:scale(1) }
  to  { opacity:0; transform:scale(1.12) }
}

/* ---------- el contenido cede y vuelve por el mismo lado ---------- */
html.realm-leave header,
html.realm-leave main,
html.realm-leave footer,
html.realm-leave .mobile{
  transition:transform .62s cubic-bezier(.4,0,.2,1), opacity .4s ease .02s;
  transform:translate3d(calc(var(--rdir,1) * -30px),0,0);
  opacity:.3;
}
html.realm-enter header,
html.realm-enter main,
html.realm-enter footer{ animation:realm-in .72s cubic-bezier(.2,.8,.2,1) .05s both }
@keyframes realm-in{
  from{ opacity:0; transform:translate3d(calc(var(--rdir,1) * 34px),0,0) }
  to  { opacity:1; transform:none }
}

/* ---------- el slider: una pastilla que corre, no que parpadea ---------- */
.realm{ position:relative }
.realm>a{ position:relative; z-index:1 }
.realm::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; z-index:0; opacity:0;
  width:var(--knob-w,0px); border-radius:100px; background:var(--realm-on-bg);
  transform:translate3d(var(--knob-x,0px),0,0);
}
.realm.has-knob::before{ opacity:1 }
.realm.has-knob.knob-ready::before{
  transition:transform .58s cubic-bezier(.2,.8,.2,1),
             width .58s cubic-bezier(.2,.8,.2,1),
             background .45s ease;
}
.realm.has-knob a[aria-current="page"]{ background:transparent }

@media(prefers-reduced-motion:reduce){
  html.realm-leave{ transition:none }
  #realm-wash{ display:none }
  html.realm-leave header, html.realm-leave main,
  html.realm-leave footer, html.realm-leave .mobile{ transform:none; opacity:1; transition:none }
  html.realm-enter header, html.realm-enter main, html.realm-enter footer{ animation:none }
  .realm.has-knob.knob-ready::before{ transition:none }
}