/* =========================================================
   SITI — landing · 4. interruptor de tema y la ola
   ========================================================= */
.theme{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--fg);
  transition:border-color .4s,color .4s,transform .55s var(--ease);
}
.theme:hover{border-color:var(--ink);color:var(--ink);transform:rotate(25deg)}
.theme:active{transform:rotate(25deg) scale(.92)}
.theme__ico{display:grid;width:19px;height:19px}
.theme__ico svg{grid-area:1/1;width:19px;height:19px;transition:transform .6s var(--ease),opacity .35s var(--ease)}
/* en oscuro ofrecemos el sol; en claro, la luna */
html[data-theme="dark"]  .theme__moon{opacity:0;transform:rotate(90deg)  scale(.35)}
html[data-theme="light"] .theme__sun {opacity:0;transform:rotate(-90deg) scale(.35)}

/* --- la ola del cambio de tema ---
   El recorte (@keyframes siti-wave) lo escribe 03-theme.js en caliente porque
   depende de dónde esté el botón y de cuánto hay que cubrir: una circunferencia
   deformada por un seno cuya cresta se apaga conforme crece. */
::view-transition-image-pair(root){isolation:auto}
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:0}
::view-transition-new(root){z-index:1;animation:siti-wave var(--wave-ms,950ms) linear forwards}

/* dentro de la ola los tokens saltan de golpe: el lado nuevo nace con la paleta puesta */
html.is-theming *,
html.is-theming *::before,
html.is-theming *::after{transition:none!important}
/* salvo el sol y la luna, que sí queremos ver girar */
html.is-theming .theme__ico svg{transition:transform .6s var(--ease),opacity .35s var(--ease)!important}

/* respaldo sin View Transitions: la misma ola pintada del color destino */
.wave{
  position:fixed;inset:0;z-index:960;pointer-events:none;
  background:var(--wave-bg,var(--bg));
  animation:siti-wave var(--wave-ms,950ms) linear forwards;
}

@media (max-width:560px){ .theme{width:40px;height:40px} }