/* ─────────────────────────────────────────────
   deep.yume — style
   ───────────────────────────────────────────── */
:root {
  --void: #020203;
  --ink: #e6dcc6;
  --dim: rgba(230, 220, 198, .55);
  --faint: rgba(230, 220, 198, .2);
  --line: rgba(180, 92, 255, .22);
  --acid: #b45cff;   /* viola */
  --mag: #c8432b;    /* cinabro */
  --cyan: #4fbf9f;   /* giada */
  --gut: clamp(16px, 3.2vw, 48px);

  --f-disp: 'Archivo', 'Arial Narrow', sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-jp: 'Noto Serif JP', 'Instrument Serif', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-disp);
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
::selection { background: var(--acid); color: #000; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.mono { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }

/* ─── strati fissi ─── */
#galaxy { position: fixed; inset: 0; z-index: 0; display: block; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 50%, transparent 40%, rgba(2,2,3,.6) 100%),
    linear-gradient(180deg, rgba(2,2,3,.35), transparent 35%, transparent 65%, rgba(2,2,3,.6));
}
.veil::after { content: ''; position: absolute; inset: 0; background: rgba(2,2,3,var(--vd, 0)); }
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .06; background-image: var(--grain); }
.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}
main, .ft { position: relative; z-index: 3; }

/* ─── cursore ─── */
#cursor { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; display: none; }
#cursor .cx { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); transition: width .2s, height .2s; }
#cursor .cx::before, #cursor .cx::after { content: ''; position: absolute; background: #fff; }
#cursor .cx::before { left: 50%; top: 0; bottom: 0; width: 1px; }
#cursor .cx::after { top: 50%; left: 0; right: 0; height: 1px; }
#cursor.big .cx { width: 46px; height: 46px; }
#cursor.big .cx::before, #cursor.big .cx::after { background: var(--acid); }
@media (pointer: fine) {
  #cursor { display: block; }
  body, a { cursor: none; }
}

/* ─── glitch testo ─── */
.gl { position: relative; display: inline-block; }
.gl::before, .gl::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-text-stroke: 0; white-space: nowrap;
}
.gl.on::before { opacity: .9; color: var(--mag); transform: translate(-.045em, .01em); clip-path: inset(var(--c1, 20%) 0 var(--c2, 50%) 0); mix-blend-mode: screen; }
.gl.on::after  { opacity: .9; color: var(--cyan); transform: translate(.045em, -.01em); clip-path: inset(var(--c3, 60%) 0 var(--c4, 10%) 0); mix-blend-mode: screen; }
.gl.on { transform: translateX(var(--gx, 0)); }

body.tremor main { animation: tremor .16s steps(2) 1; }
@keyframes tremor { 0% { transform: translate(3px, 0); } 50% { transform: translate(-4px, 1px); } 100% { transform: none; } }
body.flash .hero { filter: invert(1) hue-rotate(180deg); }

/* ─── HERO ─── */
.hero {
  position: relative; min-height: 100svh; padding: 28px var(--gut) 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 12px;
}
.hero .ct-links { grid-column: 1 / 13; grid-row: 2; position: relative; z-index: 3; margin-top: 3vh; }
.h-title {
  grid-column: 1 / 13; grid-row: 1; align-self: center;
  font-weight: 900; line-height: .78; text-transform: uppercase;
  position: relative; z-index: 2;
  margin-top: 4vh;
}
.h-deep {
  font-size: clamp(5.5rem, 25vw, 26rem);
  font-variation-settings: 'wdth' 62; letter-spacing: -.02em;
  transform-origin: left bottom;
}
@keyframes blink { 50% { opacity: 0; } }
.h-yume {
  display: block; text-align: right;
  font-size: clamp(4.2rem, 19vw, 20rem);
  font-weight: 200; font-variation-settings: 'wdth' 125; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--acid);
  margin-top: -.06em; margin-right: -.03em;
}
.h-yume.gl.on { color: var(--ink); }

.h-logo {
  position: absolute; z-index: 2; top: 28px; right: var(--gut);
  width: clamp(72px, 9vw, 140px); height: auto;
}
.h-kanji {
  position: absolute; z-index: 1; right: 10%; top: 9%;
  font: 200 clamp(10rem, 34vw, 34rem)/1 var(--f-jp);
  color: transparent; -webkit-text-stroke: 2px rgba(241,238,230,.2);
  pointer-events: none; user-select: none;
}

/* ─── sezioni ─── */
.sec { position: relative; padding: clamp(60px, 12vh, 140px) var(--gut) clamp(60px, 10vh, 120px); }

/* ─── ARCHIVIO ─── */
.arch-word {
  position: absolute; left: -2vw; top: 22%; z-index: 0;
  font: 900 clamp(5rem, 20vw, 20rem)/1 var(--f-disp); font-variation-settings: 'wdth' 125;
  color: transparent; -webkit-text-stroke: 1px rgba(241,238,230,.08);
  writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; white-space: nowrap;
}
.arch { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3.5vw, 56px); row-gap: clamp(70px, 12vh, 160px); }
.it a { display: block; }
.ph { position: relative; overflow: hidden; background: #000; }
.ph img {
  width: 100%; height: auto; filter: grayscale(1) sepia(.45) contrast(1.15) brightness(.62);
  transition: filter .4s;
}
.it.g .ph img { filter: none; }
.ph .gx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.it figcaption {
  display: grid; row-gap: 2px; margin-top: 10px;
  font: 400 .66rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
}
.it figcaption span { color: var(--ink); }
.it figcaption i { font-style: normal; color: var(--dim); }

/* sparse, come foto lasciate su un tavolo; a metà, tre scendono a scalini */
.a1  { grid-area: 1 / 2 / 2 / 6; }
.a2  { grid-area: 1 / 8 / 2 / 11;  margin-top: 24vh; }
.a3  { grid-area: 2 / 4 / 3 / 8;   margin-top: 4vh; transform: rotate(1.2deg); }
.a4  { grid-area: 3 / 9 / 4 / 13;  margin-top: -14vh; }
.a5  { grid-area: 3 / 1 / 4 / 4;   margin-top: 16vh; }
.a6  { grid-area: 4 / 3 / 5 / 6;   transform: rotate(-1.5deg); }
.a7  { grid-area: 4 / 6 / 5 / 9;   margin-top: 20vh; }
.a8  { grid-area: 4 / 9 / 5 / 12;  margin-top: 40vh; }
.a9  { grid-area: 5 / 1 / 6 / 5;   margin-top: -6vh; }
.a10 { grid-area: 5 / 7 / 6 / 11;  margin-top: 14vh; }
.a11 { grid-area: 6 / 3 / 7 / 7;   margin-top: 2vh; transform: rotate(-1deg); }
.a12 { grid-area: 7 / 8 / 8 / 13;  margin-top: -8vh; }

.ct-links { list-style: none; border-top: 1px solid var(--line); }
.ct-links li { border-bottom: 1px solid var(--line); }
.ct-links a {
  position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  padding: clamp(10px, 1.6vh, 20px) 0; overflow: hidden; isolation: isolate;
}
.ct-links a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--acid);
  transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.7,0,.2,1);
}
.ct-links a:hover::before, .ct-links a:focus-visible::before, .ct-links a.hot::before { transform: scaleY(1); }
.ct-links a:hover, .ct-links a:focus-visible, .ct-links a.hot { color: #050505; }
.ct-links a.hot::before { transition-duration: .18s; }
.ct-links .nm { padding-left: 4px;  font: 800 clamp(2rem, min(5.5vw, 6.2svh), 5rem)/1 var(--f-disp); font-variation-settings: 'wdth' 80; text-transform: uppercase; letter-spacing: -.02em; }
.ct-links .hd { font: 400 .75rem/1 var(--f-mono); text-transform: lowercase; color: var(--dim); }
.ct-links a:hover .hd, .ct-links a.hot .hd { color: #050505; }
.ct-links .ar { grid-column: 3; display: block; font-size: clamp(1.6rem, 4vw, 3.2rem); padding-right: 6px; transition: transform .3s; }
.ct-links .ar svg { display: block; width: .78em; height: .78em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.ct-links a:hover .ar, .ct-links a.hot .ar { transform: translate(4px, -4px) rotate(8deg); }

/* ─── footer ─── */
.ft {
  display: grid; justify-items: center;
  padding: 40px var(--gut) 28px;
}
/* resti del vecchio footer, se una cache serve ancora l'HTML precedente */
.ft-brand, .ft-copy { display: none; }
.ft-k { font: 400 clamp(4.5rem, 12vw, 9rem)/.85 var(--f-jp); color: var(--acid); }
.ft-k.gl::before, .ft-k.gl::after { text-align: center; }
/* glitch forte e breve */
.ft-k.gl.on.hard::before { transform: translate(-.16em, .03em) skewX(-10deg); clip-path: inset(var(--c1, 20%) 0 var(--c2, 40%) 0); }
.ft-k.gl.on.hard::after  { transform: translate(.14em, -.04em) skewX(8deg); clip-path: inset(var(--c3, 50%) 0 var(--c4, 10%) 0); }
.ft-k.gl.on.hard { transform: translateX(var(--gx, 0)) scaleX(var(--gs, 1)); text-shadow: 0 0 18px rgba(180, 92, 255, .6); }

/* ─── reveal ─── */
.js .reveal { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: opacity .9s, clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; clip-path: inset(0 0 -10% 0); transform: none; }
.js .it.reveal.in.a3 { transform: rotate(1.2deg); }
.js .it.reveal.in.a6 { transform: rotate(-1.5deg); }
.js .it.reveal.in.a11 { transform: rotate(-1deg); }

/* ─── responsive ─── */
@media (max-width: 900px) {
  .arch { grid-template-columns: repeat(6, 1fr); }
  .arch { row-gap: clamp(56px, 9vh, 96px); }
  .arch .it { margin-top: 0; grid-row: auto; }
  /* una foto per riga, a posizioni sparse; a6–a8 a scalini */
  .arch .a1 { grid-column: 1 / 5; }   .arch .a2 { grid-column: 3 / 7; }
  .arch .a3 { grid-column: 1 / 4; }   .arch .a4 { grid-column: 2 / 7; }
  .arch .a5 { grid-column: 4 / 7; }   .arch .a6 { grid-column: 1 / 4; }
  .arch .a7 { grid-column: 2 / 5; }   .arch .a8 { grid-column: 3 / 6; }
  .arch .a9 { grid-column: 1 / 5; }   .arch .a10 { grid-column: 3 / 7; }
  .arch .a11 { grid-column: 1 / 5; }  .arch .a12 { grid-column: 2 / 7; }
  .arch .it.a2 { margin-top: 5vh; }

  .ct-links a { grid-template-columns: 1fr auto; }
  .ct-links .hd { display: none; }
  .ct-links .ar { grid-column: 2; }
}
@media (max-width: 520px) {
  .h-title { margin-top: 14vh; }
  .veil::after { background: rgba(3,3,7,calc(var(--vd, 0) * 1.4)); }
}

/* "Riduci movimento" (spesso attivo su iPhone): il sito resta vivo, ma niente scosse né lampi */
@media (prefers-reduced-motion: reduce) {
  body.tremor main { animation: none; }
  body.flash .hero { filter: none; }
  html { scroll-behavior: auto; }
}

/* ─── pagina manifesto ─── */
body:has(.mf-page) .veil::after { background: rgba(2,2,3,.55); }
.mf-page { padding: clamp(120px, 22vh, 220px) var(--gut) clamp(80px, 14vh, 160px); }
.mf { max-width: 720px; margin: 0 auto; }
.mf-title {
  display: block;
  font: 900 clamp(4rem, 15vw, 12rem)/.8 var(--f-disp); font-variation-settings: 'wdth' 62;
  text-transform: uppercase; letter-spacing: -.02em;
  margin-bottom: clamp(40px, 8vh, 80px);
}
.mf-lead {
  font: 400 italic clamp(1.9rem, 4.2vw, 3.2rem)/1.08 var(--f-serif);
  color: var(--acid); margin-bottom: clamp(40px, 8vh, 72px);
}
.mf-text p {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.75; color: rgba(241,238,230,.9);
  text-shadow: 0 0 18px rgba(3,3,7,.9);
}
.mf-text p + p { margin-top: 1.25em; }
.mf-text p:last-child {
  margin-top: 2.2em; font: 400 italic clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--f-serif); color: var(--ink);
}