/* ================================================================
   Amnesia — stylesheet condiviso per /blog/
   Replica fedele delle variabili, nav, bottoni e card già presenti
   in index.html, così le pagine del blog risultano visivamente
   identiche al resto del sito. index.html NON importa questo file
   (mantiene il proprio <style> inline invariato) per non introdurre
   rischi su una pagina già rifinita: qui è solo duplicato in modo
   controllato.
   ================================================================ */

:root{
  --void:#07040d;
  --void-soft:#120a1f;
  --panel:rgba(255,255,255,.05);
  --panel-strong:rgba(255,255,255,.08);
  --panel-border:rgba(255,255,255,.11);
  --signal:#8b1fe0;
  --signal-bright:#b573ff;
  --signal-deep:#3a0f70;
  --pulse:#34f2c9;
  --paper:#f4eefc;
  --fog:#a99bc4;
  --fog-dim:#6e6284;

  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --nav-h:76px;
}
html[lang="ar"]{ --font-display:'Cairo', sans-serif; --font-body:'Cairo', sans-serif; --font-mono:'Cairo', sans-serif; }
html[lang="ja"]{ --font-display:'Noto Sans JP', sans-serif; --font-body:'Noto Sans JP', sans-serif; --font-mono:'Noto Sans JP', sans-serif; }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--signal); color:var(--paper); }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
:focus-visible{ outline:2px solid var(--pulse); outline-offset:3px; }

html[dir="rtl"] body{ direction:rtl; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .navlinks, html[dir="rtl"] .blog-meta,
html[lang="ja"] .eyebrow, html[lang="ja"] .navlinks, html[lang="ja"] .blog-meta{ letter-spacing:normal; }
html[dir="rtl"] .lang-menu{ right:auto; left:0; }
html[dir="rtl"] .lang-option{ text-align:right; }

.glitch, .brand{ font-family:'Chakra Petch', sans-serif; }

.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--pulse); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--pulse); display:inline-block; }

h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.01em; line-height:1.15; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 3rem); }

/* ---------- atmosphere (semplificata: niente 3D core, solo su hero) ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px, rgba(0,0,0,.35) 3px, rgba(0,0,0,0) 4px);
  background-size:100% 4px;
}
.blob{ position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.35; will-change:transform; }
.blob-a{ width:52vw; height:52vw; max-width:760px; max-height:760px; top:-14%; left:-14%; background:radial-gradient(circle at 30% 30%, var(--signal), transparent 70%); animation:driftA 26s ease-in-out infinite alternate; }
.blob-b{ width:42vw; height:42vw; max-width:620px; max-height:620px; bottom:-10%; right:-10%; background:radial-gradient(circle at 60% 60%, var(--pulse), transparent 72%); opacity:.18; animation:driftB 22s ease-in-out infinite alternate; }
@keyframes driftA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,8vh) scale(1.12); } }
@keyframes driftB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-5vw,-6vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .blob-a, .blob-b{ animation:none; } html{ scroll-behavior:auto; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h); display:flex; align-items:center;
  transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,4,13,.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--panel-border);
}
.nav .wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:700; letter-spacing:.08em; font-size:1.05rem; }
.brand img{ width:30px; height:auto; filter:drop-shadow(0 0 10px var(--signal)); }
.navlinks{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.7rem); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em; }
.navlinks a{ position:relative; opacity:.8; padding:.3rem 0; transition:opacity .2s ease, color .2s ease; white-space:nowrap; }
.navlinks a.current{ opacity:1; color:var(--pulse); }
.navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--pulse); transition:right .25s ease; }
.navlinks a:hover{ opacity:1; }
.navlinks a:hover::after{ right:0; }
.nav-right{ display:flex; align-items:center; gap:.7rem; }
.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em;
  padding:.55rem .75rem; border-radius:999px; border:1px solid var(--panel-border); background:var(--panel); color:var(--paper); cursor:pointer;
}
.lang-btn svg{ transition:transform .25s ease; flex-shrink:0; }
.lang-btn.open svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:150px;
  background:rgba(10,6,18,.94); border:1px solid var(--panel-border); border-radius:14px; backdrop-filter:blur(20px); padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:60;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-option{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--fog);
  font-family:var(--font-body); font-size:.85rem; padding:.55rem .7rem; border-radius:8px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-option:hover{ background:var(--panel-strong); color:var(--paper); }
.lang-option.active{ color:var(--pulse); }
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; cursor:pointer;
}
.nav-toggle span{ width:16px; height:2px; background:var(--paper); transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.05em;
  padding:.85rem 1.4rem; border-radius:999px; border:1px solid var(--panel-border); background:var(--panel);
  backdrop-filter:blur(12px); transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  cursor:pointer; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--signal-bright); box-shadow:0 10px 30px -12px var(--signal); }
.btn-solid{ background:linear-gradient(135deg, var(--signal), var(--signal-deep)); border-color:transparent; }
.btn-solid:hover{ box-shadow:0 12px 34px -10px var(--signal); }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:.55rem .95rem; font-size:.74rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn svg{ width:14px; height:14px; }

/* ---------- sections / glass ---------- */
.section{ position:relative; z-index:5; padding:clamp(5rem, 11vw, 8rem) 0; }
.page-head{ padding:calc(var(--nav-h) + 3.5rem) 0 2rem; position:relative; z-index:5; }
.section-head{ max-width:640px; margin-bottom:clamp(2.5rem, 6vw, 4rem); }
.section-head h1, .section-head h2{ font-size:clamp(2.1rem, 5vw, 3.4rem); margin-top:.9rem; }
.section-head p{ margin-top:1.1rem; color:var(--fog); max-width:60ch; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.glass{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:20px;
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  position:relative; overflow:hidden;
}
.glass::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%); pointer-events:none; }

.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--pulse); box-shadow:0 0 12px var(--pulse); display:inline-block; animation:blip 1.8s ease-in-out infinite; }
@keyframes blip{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---------- blog grid / cards (usate sia in homepage sia in /blog/) ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.5rem; }
.blog-card{ padding:2rem 1.8rem; display:flex; flex-direction:column; }
.blog-card.has-cover{ padding-top:0; overflow:hidden; }
.blog-card .cover{ width:calc(100% + 3.6rem); margin:0 -1.8rem 1.4rem; aspect-ratio:16/9; object-fit:cover; }
.blog-meta{
  display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--pulse); margin-bottom:1rem; flex-wrap:wrap;
}
.blog-meta a{ color:var(--pulse); opacity:.85; }
.blog-meta a:hover{ opacity:1; text-decoration:underline; }
.blog-card h3{ font-size:1.25rem; text-transform:none; letter-spacing:.01em; margin-bottom:.8rem; }
.blog-excerpt{ color:var(--fog); font-size:.92rem; line-height:1.75; flex:1; }
.blog-read-toggle{
  margin-top:1.2rem; display:inline-block; background:none; border:none; padding:0;
  font-family:var(--font-mono); font-size:.78rem; color:var(--paper); opacity:.75;
  border-bottom:1px solid var(--panel-border); padding-bottom:2px; cursor:pointer;
  transition:opacity .2s ease, color .2s ease, border-color .2s ease; width:fit-content;
}
.blog-read-toggle:hover{ opacity:1; color:var(--pulse); border-color:var(--pulse); }
.blog-empty{ color:var(--fog); grid-column:1/-1; text-align:center; padding:3rem 1rem; }

/* ---------- pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:3rem; font-family:var(--font-mono); font-size:.8rem; }
.pagination .current{ color:var(--fog-dim); }

/* ---------- single article ---------- */
.article-head{ max-width:760px; margin:0 auto 2.5rem; text-align:center; }
.article-head h1{ font-size:clamp(2rem, 5vw, 3rem); margin-top:1rem; }
.article-cover{ width:100%; max-height:420px; object-fit:cover; border-radius:20px; border:1px solid var(--panel-border); margin:2rem auto; max-width:900px; }
.article-body{ max-width:720px; margin:0 auto; color:var(--paper); font-size:1.05rem; line-height:1.85; }
.article-body h2, .article-body h3, .article-body h4{ text-transform:none; margin:1.6em 0 .6em; line-height:1.3; }
.article-body h2{ font-size:1.5rem; } .article-body h3{ font-size:1.25rem; }
.article-body p{ margin-bottom:1.2em; }
.article-body ul, .article-body ol{ margin:0 0 1.2em 1.4em; list-style:revert; color:var(--fog); }
.article-body blockquote{ border-left:2px solid var(--pulse); padding-left:1.2em; margin:1.6em 0; color:var(--fog); font-style:italic; }
.article-body a{ color:var(--pulse); text-decoration:underline; text-underline-offset:3px; }
.article-body code{ background:var(--panel-strong); padding:.15em .4em; border-radius:5px; font-family:var(--font-mono); font-size:.9em; }
.article-body pre{ background:var(--void-soft); border:1px solid var(--panel-border); border-radius:12px; padding:1.2em; overflow-x:auto; margin-bottom:1.2em; }
.article-footer{ max-width:720px; margin:3rem auto 0; padding-top:2rem; border-top:1px solid var(--panel-border); text-align:center; }

/* ---------- footer ---------- */
.footer{ position:relative; z-index:5; padding:2.5rem 0 3rem; border-top:1px solid var(--panel-border); margin-top:2rem; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; color:var(--fog-dim); }
.footer .brand{ font-size:.95rem; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .blog-card .cover{ width:100%; margin:0 0 1.2rem; border-radius:12px; }
}
@media (max-width:640px){
  .navlinks{
    position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(7,4,13,.94); backdrop-filter:blur(20px); border-bottom:1px solid var(--panel-border);
    max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 1.5rem;
  }
  .navlinks.open{ max-height:340px; padding:1rem 1.5rem 1.6rem; overflow-y:auto; }
  .navlinks a{ padding:.8rem 0; width:100%; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .page-head{ padding-top:calc(var(--nav-h) + 1.5rem); }
}