/*
Theme Name: La Biblioteca dei Mondi
Theme URI: https://www.giusyberni.it/
Author: Giusy & Loki
Description: Tema custom per La Biblioteca dei Mondi. Porta iniziale, Mappa dei Mondi, sezioni contestuali e articoli in stile fantasy/fantascienza.
Version: 0.9.0
Text Domain: biblioteca-mondi
*/

:root{
  --lbm-bg:#02050a;
  --lbm-panel:#070c14;
  --lbm-line:rgba(171,211,255,.26);
  --lbm-text:#edf5ff;
  --lbm-muted:#aebcd0;
  --lbm-glow:rgba(117,163,255,.55);
  --lbm-max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--lbm-bg)}
body{margin:0;background:var(--lbm-bg);color:var(--lbm-text);font-family:Georgia,"Times New Roman",serif;line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;margin:1rem;padding:.7rem 1rem;background:#fff;color:#000;z-index:99999}

/* FRONT PAGE ------------------------------------------------------ */
.lbm-portal-shell{min-height:100svh;background:#000;display:grid;place-items:center;overflow:hidden;position:relative}
.lbm-portal-frame{position:relative;width:min(100vw,calc(100svh * 2 / 3));aspect-ratio:2/3;max-height:100svh;background:#000;isolation:isolate}
.lbm-stage{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease;pointer-events:none}
.lbm-stage.is-active{opacity:1;visibility:visible;pointer-events:auto}
.lbm-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lbm-stage--closed::after,.lbm-stage--open::after,.lbm-stage--map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 72px 34px rgba(0,0,0,.62)}

.lbm-hotspot{position:absolute;z-index:4;border:0;background:transparent;cursor:pointer;border-radius:50%;display:block;text-decoration:none;color:transparent;outline:none}
.lbm-hotspot:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 26px 10px var(--lbm-glow)}
.lbm-hotspot:hover{box-shadow:0 0 28px 8px rgba(114,165,255,.18)}
.lbm-enter{left:37%;top:85%;width:26%;height:11%;border-radius:18px}

/* percentage hotspots on the approved 1024x1536 map */
.lbm-map-link--mondi{left:23%;top:20.5%;width:23%;height:13.5%}
.lbm-map-link--dramatis{left:56%;top:20.5%;width:23%;height:13.5%}
.lbm-map-link--biblioteca{left:35%;top:32%;width:31%;height:20%}
.lbm-map-link--progetti{left:16%;top:40.5%;width:24%;height:14.5%}
.lbm-map-link--chi{left:62%;top:40.5%;width:24%;height:14.5%}
.lbm-map-link--contatti{left:27%;top:54.5%;width:22%;height:13%}
.lbm-map-link--accedi{left:52%;top:54.5%;width:22%;height:13%}

.lbm-skip{position:absolute;right:1rem;bottom:1rem;z-index:10;font:600 12px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.48);color:#dcecff;padding:.55rem .75rem;border-radius:999px;text-decoration:none;backdrop-filter:blur(8px)}


/* ENTRANCE TRANSITION ---------------------------------------------
   Sequenza approvata: Porta Chiusa -> click Entra -> Porta in apertura
   -> transizione del vortice -> Menù.
   Effetto volutamente leggero, più simile a una transizione PowerPoint
   elegante che a un video/rotazione complessa. */
.lbm-stage--open{overflow:hidden;z-index:2}
.lbm-stage--closed{z-index:3}
.lbm-stage--map{z-index:1}

.lbm-open-door-image{z-index:1;opacity:0;will-change:opacity,transform}

.lbm-vortex-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  clip-path:circle(12.9% at 50% 55.2%);
  transform-origin:50% 55.2%;
  will-change:transform,opacity,filter;
}
.lbm-vortex-layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.lbm-portal-shell.is-entering .lbm-stage--closed{
  background:#000;
  pointer-events:none;
  animation:lbmClosedAway .32s ease .06s both;
}
.lbm-portal-shell.is-entering .lbm-skip,
.lbm-portal-shell.is-entering .lbm-enter{opacity:0;pointer-events:none}

/* Prima mostriamo chiaramente la Porta in Apertura approvata. */
.lbm-portal-shell.is-entering .lbm-open-door-image{
  animation:lbmOpenImageIn .42s ease .10s both;
}

/* Poi parte la transizione del vortice: cresce e invade il vano. */
.lbm-portal-shell.is-vortex-grow .lbm-vortex-layer{
  animation:lbmVortexGrow .96s cubic-bezier(.22,.76,.18,1) both;
}

/* Fase finale: il vortice si richiude e sotto compare la Mappa. */
.lbm-portal-shell.is-vortex-collapse .lbm-vortex-layer{
  animation:lbmVortexShrink .76s cubic-bezier(.58,.02,.52,1) both;
}
.lbm-portal-shell.is-vortex-collapse .lbm-stage--open{
  animation:lbmOpenFade .70s ease .02s both;
}
.lbm-portal-shell.is-map-reveal .lbm-stage--map{
  z-index:5;
  pointer-events:none;
  animation:lbmMapArrive .56s ease .10s both;
}

@keyframes lbmClosedAway{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes lbmOpenImageIn{
  0%{opacity:0;transform:scale(1.01)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes lbmVortexGrow{
  0%{opacity:0;transform:rotate(0deg) scale(.96);filter:brightness(1)}
  12%{opacity:1}
  100%{opacity:1;transform:rotate(16deg) scale(2.58);filter:brightness(1.08)}
}
@keyframes lbmVortexShrink{
  0%{opacity:1;transform:rotate(16deg) scale(2.58);filter:brightness(1.08)}
  72%{opacity:1}
  100%{opacity:0;transform:rotate(28deg) scale(.06);filter:brightness(.95)}
}
@keyframes lbmOpenFade{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes lbmMapArrive{
  0%{opacity:0;transform:scale(1.012)}
  100%{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .lbm-stage{transition:none}
  .lbm-opening-wing,.lbm-vortex-layer{display:none!important}
}

/* INTERNAL -------------------------------------------------------- */
.lbm-site{min-height:100svh;background:
 radial-gradient(circle at 50% -10%,rgba(50,93,164,.22),transparent 34rem),
 linear-gradient(#03070e,#010307 70%)}
.lbm-topbar{position:sticky;top:0;z-index:50;background:rgba(2,5,10,.92);border-bottom:1px solid var(--lbm-line);backdrop-filter:blur(14px)}
.lbm-topbar__inner{width:min(calc(100% - 2rem),var(--lbm-max));margin:auto;min-height:88px;display:flex;align-items:center;gap:1rem}
.lbm-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;min-width:max-content}
.lbm-brand img{width:58px;height:58px;object-fit:contain}
.lbm-brand__text{font-size:1.25rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase}
.lbm-utility-nav{margin-left:auto;display:flex;justify-content:flex-end;gap:.45rem 1rem;align-items:center}
.lbm-utility-nav a,.lbm-utility-nav button{appearance:none;border:0;background:transparent;text-decoration:none;color:#cdd9ea;font:600 .76rem/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.4rem 0;border-bottom:1px solid transparent;cursor:pointer}
.lbm-utility-nav a:hover,.lbm-utility-nav button:hover{color:#fff;border-bottom-color:#9ec9ff}

.lbm-page-frame{position:relative;width:min(calc(100% - 1rem),1320px);margin:0 auto;padding:2rem clamp(.5rem,5vw,4rem) 4rem}
.lbm-page-frame::before,.lbm-page-frame::after{content:"";position:fixed;top:88px;bottom:0;width:min(12vw,160px);opacity:.38;pointer-events:none;background-image:url('assets/images/riferimento-pagina.png');background-size:1055px 1491px;background-repeat:no-repeat;filter:saturate(.82)}
.lbm-page-frame::before{left:0;background-position:left top}
.lbm-page-frame::after{right:0;background-position:right top}

.lbm-section-head{width:min(100%,var(--lbm-max));margin:0 auto 1.6rem;border-bottom:1px solid var(--lbm-line);padding-bottom:1rem;text-align:center}
.lbm-section-head h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:.25rem 0 .85rem;font-weight:400}
.lbm-section-menu{display:flex;gap:.65rem 1.2rem;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center}
.lbm-section-menu a{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;text-decoration:none;color:#c3d2e7}
.lbm-section-menu a:hover,.lbm-section-menu a.is-current{color:#fff;text-shadow:0 0 12px var(--lbm-glow);border-bottom:1px solid #9ec9ff}

.lbm-content-card{position:relative;width:min(100%,var(--lbm-max));margin:auto;background:rgba(4,9,15,.86);border:1px solid var(--lbm-line);box-shadow:0 24px 80px rgba(0,0,0,.45);padding:clamp(1.2rem,4vw,3.2rem)}
.lbm-content-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.035);pointer-events:none}
.lbm-kicker{font:600 .75rem/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9fb4cf}
.lbm-post-title{font-size:clamp(2rem,5.5vw,4.5rem);line-height:1.03;font-weight:400;margin:.45rem 0 1rem}
.lbm-excerpt{font-size:clamp(1rem,2vw,1.35rem);color:#c8d2df;max-width:55rem}
.lbm-meta{display:flex;gap:.7rem 1.2rem;flex-wrap:wrap;color:#90a2b8;font-size:.84rem;border-bottom:1px solid var(--lbm-line);padding-bottom:1rem;margin-bottom:1.4rem}
.lbm-featured{width:100%;aspect-ratio:16/7;object-fit:cover;border:1px solid var(--lbm-line);margin-bottom:1.5rem;background:#07101a}
.lbm-entry-content{font-size:1.06rem;color:#d9e0e9}
.lbm-entry-content h2,.lbm-entry-content h3{font-weight:400;color:#fff;line-height:1.2}
.lbm-entry-content blockquote{margin:2rem 0;padding:.8rem 1.2rem;border-left:3px solid #95c1ff;color:#c9d6e7;font-style:italic;background:rgba(115,164,235,.05)}
.lbm-entry-content a{color:#bcd8ff}
.lbm-empty{padding:3rem;text-align:center;color:#a9b7c8}

.lbm-static-title{font-size:clamp(2.3rem,5vw,4rem);font-weight:400;margin-top:0}
.lbm-footer{width:min(calc(100% - 2rem),var(--lbm-max));margin:2rem auto 0;padding:1.5rem 0 3rem;border-top:1px solid var(--lbm-line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8190a5;font-size:.84rem}
.lbm-footer a{text-decoration:none;color:#aabbd2}

.lbm-comments{width:min(100%,var(--lbm-max));margin:2rem auto;background:rgba(4,9,15,.75);border:1px solid var(--lbm-line);padding:1.5rem}
.lbm-login-note{padding:1rem;border:1px solid var(--lbm-line);background:rgba(88,132,198,.06)}
.lbm-login-note a{color:#d8e9ff}

@media(max-width:760px){
 .lbm-topbar__inner{min-height:72px;align-items:flex-start;padding:.7rem 0;flex-wrap:wrap}
 .lbm-brand img{width:44px;height:44px}
 .lbm-brand__text{font-size:1rem}
 .lbm-utility-nav{margin-left:auto;justify-content:flex-end;gap:.8rem}
 .lbm-page-frame{padding-top:1rem}
 .lbm-page-frame::before,.lbm-page-frame::after{opacity:.18;width:60px;background-size:auto 100%}
 .lbm-content-card{padding:1.1rem}
}

.lbm-static-page{text-align:center}
.lbm-contact-page{min-height:42vh}
.lbm-archive-title{text-align:center;margin-bottom:1.2rem}
.lbm-archive-title h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:400;margin:.25rem 0 .6rem}
.lbm-archive-item{padding:1.15rem 0;border-bottom:1px solid var(--lbm-line)}
.lbm-archive-item h2{font-weight:400;margin:.25rem 0}
.lbm-archive-item h2 a{text-decoration:none}
.lbm-excerpt--small{font-size:1rem}