/* ============================================================
   Galería de burbujas + páginas flotantes · adaptación a Impreza
   Se carga en todas las páginas desde functions.php
   ============================================================ */
:root {
  --pp-bg: #0b1020;
  --pp-fg: #f4f6fb;
  --pp-accent: #5ee0c8;
  --pp-panel: #ffffff;
  --pp-panel-fg: #151a26;
  --header-h: 80px;            /* la fija el JS con la altura real de .l-header */
}

/* ---------- Galería (fondo en todas las páginas) ---------- */
#gallery.gallery {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, #163049 0%, #0b1020 55%, #070a14 100%);
  transition: filter .7s ease, transform .7s ease;
}
body.page-open #gallery.gallery { filter: blur(18px) brightness(.45); transform: scale(1.04); }
.g-circles { position: absolute; inset: 0; }
.g-circle {
  position: absolute; left: 0; top: 0; width: 400px; height: 400px; border-radius: 50%;
  background: #1c2436 center / cover no-repeat; transform-origin: 50% 50%; will-change: transform;
  cursor: pointer; z-index: 1; transition: filter .7s ease; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.g-circle:focus-visible { outline: 6px solid var(--pp-accent); outline-offset: 4px; }
.g-circle.sunk { filter: blur(7px) brightness(.5) saturate(.7); pointer-events: none; }
.g-circle.featured { z-index: 20; cursor: default; }
.g-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(4,8,18,.55); opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.gallery.is-open .g-overlay { opacity: 1; pointer-events: auto; cursor: pointer; }
.g-detail {
  position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 30; will-change: transform; transform-origin: 50% 50%;
  animation: g-in .7s ease-out both; transition: opacity .45s ease; outline: none; box-sizing: border-box;
}
@keyframes g-in { from { opacity: 0; } to { opacity: 1; } }
.g-detail:focus-visible { outline: 4px solid var(--pp-accent); outline-offset: 3px; }
.g-detail.leaving { opacity: 0; }
.g-detail.chosen { z-index: 32; }
.g-detail--img { background: #1c2436 center / cover no-repeat; cursor: pointer; }
.g-detail--text {
  background: var(--pp-panel); color: var(--pp-panel-fg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: calc(var(--r) * 1px * .2);
}
.g-detail--text h2 { margin: 0 0 .35em; font-size: calc(var(--r) * 1px * .13); line-height: 1.12; color: inherit; }
.g-detail--text p { margin: 0; color: #4a5264; line-height: 1.35; font-size: calc(var(--r) * 1px * .08); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.g-detail--text a { margin-top: .6em; color: var(--pp-panel-fg); font-weight: 600; text-decoration: none; font-size: calc(var(--r) * 1px * .075); border-bottom: 1.5px solid var(--pp-accent); }
.g-detail--close {
  z-index: 35; background: var(--pp-fg); color: #111; border: 0; cursor: pointer; display: grid; place-items: center;
  font-weight: 600; font-size: calc(var(--r) * 1px * .8); line-height: 1; font-family: inherit; padding: 0; transition: background .2s, opacity .45s ease;
}
.g-detail--close:hover, .g-detail--close:focus-visible { background: var(--pp-accent); outline: none; }

/* ---------- Portada ---------- */
body.pp-home { overflow: hidden; background: var(--pp-bg); }
body.pp-home .l-main, body.pp-home .l-footer { display: none; }   /* el Post List queda como respaldo para buscadores */

/* ---------- Páginas interiores: el contenido flota sobre la galería ---------- */
body.page-open { background: var(--pp-bg); }
body.page-open .l-footer { display: none; }
body.page-open .l-main {
  position: relative; z-index: 1;
  max-width: 760px; margin: calc(var(--header-h) + 24px) auto 48px;
  background: var(--pp-panel); color: var(--pp-panel-fg);
  border-radius: 28px; padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  animation: pp-panel-in .6s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes pp-panel-in { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
body.page-open .l-main .l-section { padding: 0 !important; background: transparent !important; }
body.page-open .l-main .l-section-h { max-width: none !important; padding: 0 !important; }
@media (max-width: 600px) { body.page-open .l-main { margin-left: 12px; margin-right: 12px; border-radius: 20px; } }
.pp-page-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; text-decoration: none !important; color: var(--pp-panel-fg) !important;
  background: #eef0f4; font-weight: 600; font-size: 22px; line-height: 1; font-family: inherit; transition: background .2s;
}
.pp-page-close:hover { background: var(--pp-accent); }

/* ---------- Cabecera de Impreza sobre la galería ---------- */
.l-header { z-index: 200; }
body.pp-home .l-header .l-subheader, body.page-open .l-header .l-subheader { background: linear-gradient(to bottom, rgba(11,16,32,.75), rgba(11,16,32,0)) !important; }

@media (prefers-reduced-motion: reduce) {
  #gallery.gallery, .l-main, .g-circle, .g-detail { transition: none; animation: none; }
}