/* EchoFather Familias · v7 · cristal líquido en movimiento
   Se carga después de liquid.css. Quitar este archivo y liquid-motion.js devuelve la v6 tal cual. */

/* ── El líquido: lienzo fijo detrás de todo ── */
#liquid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
html.liquid-gl .space { background: transparent; }
html.liquid-gl .aura { display: none; }
html.liquid-gl .space-grid { opacity: .55; }

/* Las barras dejan ver el líquido a través del cristal */
html.liquid-gl .header { background: linear-gradient(100deg, #0c2931a8, #0b252d8c 55%, #142d2ca3); }
html.liquid-gl .journey-bar { background: linear-gradient(100deg, #0a252da3, #1131398a 55%, #0a252dad); }

/* ── Cristal oscuro: más transparente, más refracción ── */
.method-console {
  background: var(--glass-light), var(--glass-tint), rgba(10, 42, 50, .5);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
}
.research-workbench {
  position: relative;
  background: rgba(11, 43, 53, .5);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
}
.floating-note { background: var(--glass-light), var(--glass-tint), rgba(13, 47, 55, .28); }
.map-card { position: relative; }

/* ── Cristal claro: vidrio esmerilado color papel ── */
.light-panel, .media-feature {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 253, 244, .86), rgba(244, 241, 230, .8) 60%, rgba(236, 238, 226, .84));
  border-color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 26px 70px rgba(0, 21, 30, .38);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  backdrop-filter: blur(30px) saturate(175%);
}

/* ── Brillo de borde que sigue al puntero ── */
.button, .circle-btn, .icon-btn, .media-symbol { position: relative; isolation: isolate; }
.button { overflow: hidden; }
.glint {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 0%), rgba(236, 248, 240, .12), transparent 70%);
}
.glint::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 0%), rgba(255, 240, 200, .95), rgba(255, 240, 200, 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:hover > .glint { opacity: 1; }
/* En los paneles claros el brillo va por detrás del texto para no lavarlo */
:is(.light-panel, .media-feature) { isolation: isolate; }
:is(.light-panel, .media-feature) > .glint { z-index: -1; background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 70%); }
:is(.light-panel, .media-feature) > .glint::before { z-index: 1; }
:is(.light-panel, .media-feature) > .glint::before { background: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 0%), rgba(178, 135, 58, .85), rgba(178, 135, 58, 0) 72%); }
.button.primary > .glint { background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 0%), rgba(255, 252, 235, .5), transparent 70%); }
.button.primary > .glint::before { background: radial-gradient(circle 90px at var(--mx, 50%) var(--my, 0%), #fff, rgba(255, 255, 255, 0) 75%); }
@media (pointer: coarse) { .glint { display: none; } }

/* ── Botones: atracción magnética y rebote al pulsar ── */
.button, .circle-btn, .icon-btn {
  transition: background .25s, border-color .25s, box-shadow .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1), translate .6s cubic-bezier(.22, 1.5, .45, 1);
}
.button:active, .circle-btn:active, .icon-btn:active { transform: scale(.955); transition-duration: .25s, .25s, .3s, .12s, .6s; }
.circle-btn:disabled:active { transform: none; }

/* Destello que recorre el botón dorado cada pocos segundos */
.button.primary::after {
  content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 252, 236, .7) 48%, rgba(255, 255, 255, .15) 54%, transparent 66%);
  translate: -125% 0;
  animation: liquid-gloss 7s cubic-bezier(.5, 0, .3, 1) 1.6s infinite;
}
@keyframes liquid-gloss { 0%, 72% { translate: -125% 0; } 100% { translate: 125% 0; } }

/* ── Oro líquido en los titulares ── */
.hero-copy h1 em, .chapter-intro h2 em, .section-heading h2 em, .universe-copy h2 em {
  background: linear-gradient(100deg, #dfbd76 0%, #f8e2ab 22%, #c99a4c 42%, #fbe9bd 60%, #d7b066 80%, #dfbd76 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding: 0 .09em; margin: 0 -.09em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: liquid-gold 10s ease-in-out infinite;
}
@keyframes liquid-gold { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Indicador líquido del menú ── */
.nav-liquid { display: none; }
@media (min-width: 981px) {
  html.has-nav-liquid .header nav { position: relative; }
  .nav-liquid {
    display: block; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 100%; z-index: 0;
    border-radius: 999px; pointer-events: none; opacity: 0; transform-origin: center;
    background: radial-gradient(ellipse at 50% 0%, #fff7d64a, transparent 70%), linear-gradient(145deg, #edf3dc2b, #dfbd761f 45%, #dfbd7633);
    box-shadow: inset 0 1px 0 #fff9d175, inset 0 -1px 0 #ffffff12, inset 0 0 0 1px #e8d4a52e, 0 4px 16px #00000030;
    transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
  }
  .nav-liquid.is-moving { transform: scaleY(.76); }
  html.has-nav-liquid .header nav a { position: relative; z-index: 1; }
  html.has-nav-liquid .header nav a[aria-current] { background: transparent; box-shadow: none; }
}

/* ── Gota líquida en los puntos de capítulo ── */
#chapter-dots { position: relative; }
.dots-liquid {
  position: absolute; top: 50%; height: 6px; margin-top: -3px; left: 0; right: 100%;
  border-radius: 6px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, #f6dda3, #dfbd76);
  box-shadow: 0 0 0 4px #dfbd7614, 0 0 14px #dfbd7690;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
}
.dots-liquid.is-moving { transform: scaleY(.6); }
html.has-dots-liquid #chapter-dots button[aria-current=true]::after { opacity: 0; }

/* ── Cambio de capítulo: la sala se disuelve y la nueva emerge del líquido ── */
.room { transition: opacity .55s, transform .8s cubic-bezier(.22, .8, .22, 1), filter .7s, visibility 0s .8s; }
.room.active { transition: opacity .65s .08s, transform .9s cubic-bezier(.22, .8, .22, 1), filter .85s .05s, visibility 0s; }
body:not(.simple) .room:not(.active) { filter: blur(10px); }

@keyframes liquid-rise { from { opacity: 0; translate: 0 30px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
/* Las escenas 3D no admiten opacidad ni filtro sin aplanarse: solo se desplazan */
@keyframes liquid-rise-3d { from { translate: 0 46px; scale: .965; } to { translate: 0 0; scale: 1; } }
body:not(.simple) .room.active .room-inner > * { animation: liquid-rise 1.05s cubic-bezier(.2, .75, .2, 1) backwards; }
body:not(.simple) .room.active .room-inner > .spatial { animation-name: liquid-rise-3d; }
body:not(.simple) .room.active .room-inner > :nth-child(2) { animation-delay: .12s; }
body:not(.simple) .room.active .room-inner > :nth-child(3) { animation-delay: .22s; }
body:not(.simple) .room.active .room-inner > :nth-child(n+4) { animation-delay: .3s; }

/* ── Objetos que flotan sobre el líquido ── */
@keyframes liquid-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes liquid-bob-soft { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hero-emblem { animation: liquid-bob 9s ease-in-out infinite; }
.note-a { animation: liquid-bob-soft 7s ease-in-out -2s infinite; }
.note-b { animation: liquid-bob-soft 8.5s ease-in-out -5s infinite; }
.book-object { animation: liquid-bob 10s ease-in-out -3s infinite; }
.art-frame { animation: liquid-bob-soft 11s ease-in-out -4s infinite; }
.small-emblem { animation: liquid-bob 8s ease-in-out -1s infinite; }
.orbit-dot { animation: liquid-bob-soft 6s ease-in-out infinite; }

/* Diálogos: el líquido sigue visible, desenfocado, detrás */
dialog::backdrop { background: #02151cc2; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }

/* ── Móvil: menos desenfoque, paneles casi opacos ── */
@media (max-width: 720px) {
  .light-panel, .media-feature { background: linear-gradient(135deg, rgba(255, 253, 244, .94), rgba(242, 239, 228, .92)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .method-console { background: var(--glass-light), var(--glass-tint), rgba(10, 42, 50, .74); }
  .research-workbench { background: rgba(11, 43, 53, .8); }
  body:not(.simple) .room:not(.active) { filter: none; }
}

/* ── Vista sencilla / movimiento reducido: todo quieto ── */
body.simple *, body.simple *::before, body.simple *::after { animation: none !important; }
body.simple .room { filter: none !important; }
body.simple :is(.button, .circle-btn, .icon-btn) { translate: none !important; }
@media (prefers-reduced-transparency: reduce) {
  .light-panel, .media-feature { background: #f4f0e6; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .method-console, .research-workbench { background: #0c2c35; -webkit-backdrop-filter: none; backdrop-filter: none; }
}