/* ============================================================
   DONATELLA LIGUORI — components.css
   nav / loader / cursor ✦ / viewer / media + micro-distortion
   Palette: white ground · black text · burgundy secondary
   ============================================================ */

/* ---------------- navigation ----------------
   Quiet solid header, hairline appears on scroll.           */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:24px var(--gutter);
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease-out);
}
html.is-scrolled .nav{ border-bottom-color:rgba(10,10,9,.1); }
.nav__name{
  font-size:11px; font-weight:620; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink);
  transition:opacity .6s var(--ease-out);
}
html.is-scrolled .nav__name{ opacity:.45; }
.nav__links{ display:flex; gap:2.8em; }
.nav__links a{
  font-size:10px; font-weight:520; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); opacity:.8; position:relative; padding:4px 0;
  transition:opacity .4s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--burgundy); transition:right .55s var(--ease-out);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after, .nav__links a.active::after{ right:0; }
.nav__links a.active{ opacity:1; }

/* ---------------- loader ---------------- */

/* The opening screen: the three admin-editable lines on the
   admin-editable background colour (default azzurrino polvere),
   a thin progress line, then it slides away into the gallery. */
#loader{
  position:fixed; inset:0; z-index:800;
  background:#C1CCD9; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0;
  padding:0 var(--gutter);
  text-align:center;
  transform:translateY(0);
  transition:transform .95s var(--ease-io);
}
body.is-ready #loader{ transform:translateY(-101%); }
html:not(.js) #loader, html.reduced #loader{ display:none; }

.loader__name{
  display:flex; justify-content:center; overflow:hidden;
  font-size:clamp(26px,4.4vw,80px); line-height:.95;
  font-weight:760; font-stretch:120%; letter-spacing:-.014em;
  text-transform:uppercase;
  max-width:92vw;
}
.loader__name .lch--sp{ width:.3em; }
#loader.go .lch{ transform:none; opacity:1; }

.loader__roles{
  margin-top:2.6vh;
  font-size:calc(11px * var(--ts)); font-weight:520;
  letter-spacing:.3em; text-transform:uppercase; line-height:2;
  max-width:88vw;
  opacity:0; transition:opacity .7s ease .45s;
}
.loader__roles .sep{ color:var(--burgundy); padding:0 .5em; }
#loader.go .loader__roles{ opacity:1; }

.loader__tags{
  margin-top:1vh;
  font-size:calc(10px * var(--ts)); font-weight:480;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--burgundy);
  max-width:88vw;
  opacity:0; transition:opacity .7s ease .65s;
}
.loader__tags .dot{ padding:0 .4em; }
#loader.go .loader__tags{ opacity:1; }

/* the thin progress line — bottom-centre, a quiet horizon */
.loader__bar{
  position:absolute; left:50%; bottom:3.6vh; transform:translateX(-50%);
  width:min(300px,58vw); height:1px; overflow:hidden;
  background:rgba(10,10,9,.18);
}
.loader__bar i{
  display:block; height:100%; background:var(--burgundy);
  transform:scaleX(0); transform-origin:left;
}
#loader.go .loader__bar i{ transform:scaleX(1); transition:transform 2.1s var(--ease-io) .1s; }

/* dark background colours → the text flips to white by itself */
#loader.dark{ color:#FFFFFF; }
#loader.dark .loader__roles .sep{ color:rgba(255,255,255,.62); }
#loader.dark .loader__tags{ color:rgba(255,255,255,.82); }
#loader.dark .loader__bar{ background:rgba(255,255,255,.28); }
#loader.dark .loader__bar i{ background:#FFFFFF; }

/* ---------------- custom cursor ✦ ----------------
   Global signature interaction. The glyph and the label are two
   INDEPENDENT fixed layers, each moved by its own transform —
   no transformed container, no zero-size layers (Safari-stable).
   The cursor hides only when the pointer really leaves the page. */

html.has-cursor, html.has-cursor body{ cursor:none; }
html.has-cursor *{ cursor:none !important; }

#cursor{ width:0; height:0; pointer-events:none; }

.cursor__glyph, .cursor__label{
  position:fixed; left:0; top:0; z-index:901;
  pointer-events:none;
  will-change:transform;
}
.cursor__glyph{
  width:14px; height:14px; margin:-7px 0 0 -7px;
  color:var(--ink); opacity:0;
  transition:opacity .12s linear, color .15s linear;
}
.cursor__glyph svg{
  display:block; width:100%; height:100%; fill:currentColor;
  /* thin white halo — the ✦ stays readable over black words too */
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 1.5px rgba(255,255,255,.9));
}
.cursor__label{
  margin:-7px 0 0 17px;
  white-space:nowrap;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink); opacity:0;
  transition:opacity .14s ease, color .15s linear;
}
/* near the right edge the label flips to the left of the pointer */
#cursor.flip .cursor__label{ margin-left:-17px; }

#cursor.on .cursor__glyph{ opacity:1; }
/* the ✦ always stays visible — over words too; a contextual
   label simply appears next to it (✦ Next →) */
body[data-cursor] #cursor.on .cursor__label{ opacity:1; }

/* adaptive contrast — JS samples the backdrop under the pointer
   and flips the cursor to white on dark grounds */
#cursor.on-dark .cursor__glyph,
#cursor.on-dark .cursor__label{ color:#FFFFFF; }

@media (hover:none), (pointer:coarse){ #cursor{ display:none; } }

/* ---------------- image viewer (art-book plate) ---------------- */

#viewer{ position:fixed; inset:0; z-index:600; color:var(--ink); }
#viewer[hidden]{ display:none; }

.viewer__backdrop{
  position:absolute; inset:0; background:rgba(255,255,255,.97);
  opacity:0; transition:opacity .55s var(--ease-out);
}
#viewer.open .viewer__backdrop{ opacity:1; }

.viewer__stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:10vh 9vw 18vh;
}
.viewer__stage img{
  max-width:100%; max-height:74vh; width:auto; height:auto;
  border:1px solid var(--line);
  opacity:0; transform:scale(.97) translateY(12px);
  transition:opacity .55s var(--ease-out) .08s, transform .65s var(--ease-out) .08s;
}
#viewer.open .viewer__stage img{ opacity:1; transform:none; }

.viewer__meta{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:5vh;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out) .18s, transform .6s var(--ease-out) .18s;
}
#viewer.open .viewer__meta{ opacity:1; transform:none; }
.viewer__title{
  font-size:12px; font-weight:640; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:12px;
}
.viewer__rows{ display:flex; flex-wrap:wrap; gap:6px 34px; }
.vw__row{ display:flex; gap:12px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.vw__row dt{ color:var(--burgundy); }
.vw__row dd.ph{ color:var(--burgundy); }
.viewer__count{ color:var(--burgundy); white-space:nowrap; }

.viewer__close{
  position:absolute; top:26px; right:var(--gutter);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:8px 0;
}
.viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:16px; padding:20px 16px; color:var(--ink);
  opacity:.6; transition:opacity .3s;
}
.viewer__nav:hover{ opacity:1; }
.viewer__prev{ left:var(--gutter); }
.viewer__next{ right:var(--gutter); }

/* ---------------- media (frames) + micro-distortion ----------------
   On hover the frame receives a ~180ms monochrome digital
   micro-displacement (steps = pixel jumps, no RGB split,
   no colour effects) then returns exactly to the original. */

.media{ position:relative; overflow:hidden; overflow:clip; background:var(--paper-2); margin:0; }
.media img{
  width:100%; height:100%; object-fit:cover;
}

@media (hover:hover) and (pointer:fine){
  .media:hover, .stage__frame:hover{ animation:microDistort 180ms steps(1, end); }
}
@keyframes microDistort{
  0%  { transform:translate3d(0,0,0); }
  20% { transform:translate3d(-2.5px,1px,0) skewX(.35deg); }
  40% { transform:translate3d(2px,-1.5px,0) skewX(-.3deg) scale(1.003); }
  60% { transform:translate3d(-1px,.5px,0) scale(1.002); }
  80% { transform:translate3d(1px,-.5px,0); }
  100%{ transform:translate3d(0,0,0); }
}

/* ---------------- project metadata ---------------- */

.proj__meta{
  width:min(340px,100%);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.meta__rows .mrow{
  display:flex; justify-content:space-between; gap:24px;
  padding:9px 0; border-top:1px solid var(--line);
}
.mrow__k{ color:var(--burgundy); }
.mrow__v{ text-align:right; font-weight:520; color:var(--ink); }
.mrow__v--ph{ color:var(--burgundy); font-weight:400; }
.meta__desc{
  margin-top:16px;
  font-family:var(--font-s); font-style:italic;
  font-size:15px; letter-spacing:0; text-transform:none; line-height:1.55;
  color:var(--burgundy);
}
.meta__desc--ph{ color:var(--burgundy); }

.noscript-note{ padding:18vh var(--gutter); color:var(--burgundy); }