/* =====================================================================
   FLAIR LUX — desktop only (html.lux). No particles: the original violet
   atmosphere, the logo drawn in electricity, and the works on the home
   as two horizontal strips with a Mac-style dock. Phones (html.m26)
   never get these rules.
   ===================================================================== */
html.lux{--lux-gold:#d7fa52}
html.lux #field,html.lux .grain{display:none!important}

/* ---------- Hero: the logo drawn by the lightning alone ---------- */
html.lux .hero .stage{display:grid;place-items:center;cursor:crosshair}
.lux-logo{position:absolute;inset:-8%;z-index:1}
.lux-logo canvas{position:absolute;inset:0;z-index:1}
/* no halo, no hint and no chapter numbers: the outline alone */
html.lux .hero .cue,html.lux .fx-rule{display:none!important}

/* ---------- Works: two horizontal strips ---------- */
html.lux #motion > .wrap.grid,html.lux #web > .wrap.grid{display:none}
html.lux #motion,html.lux #web{padding-block:0}
.lux-works{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4.5vh,48px);overflow:hidden;
  padding-top:clamp(70px,10vh,100px)}
.lux-head{display:flex;align-items:flex-end;justify-content:space-between;gap:5vw;max-width:1360px;width:100%;margin:0 auto;padding:0 var(--gut-r) 0 var(--gut)}
.lux-kicker{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--lux-gold)}
.lux-kicker::before{content:"";width:46px;height:1px;background:currentColor;opacity:.7}
.lux-title{margin:0;font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:1;letter-spacing:-.03em}
.lux-title em{color:var(--iris-soft)}
.lux-side{display:flex;flex-direction:column;gap:14px;max-width:38ch;padding-bottom:.4em}
.lux-side p{margin:0;color:#d6d2e2;line-height:1.7;font-size:15.5px}
.lux-count{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
.lux-count b{color:var(--ink);font-weight:500}

.lux-track{display:flex;gap:clamp(18px,1.8vw,30px);width:max-content;padding:0 var(--gut-r) 0 var(--gut);will-change:transform}
.lux-card{position:relative;flex:none;height:clamp(230px,40vh,400px);aspect-ratio:16/10;padding:0;border:0;border-radius:20px;overflow:hidden;cursor:pointer;
  background:#120c22;color:var(--ink);text-align:left;isolation:isolate;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95),0 0 0 1px rgba(245,245,247,.10);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.lux-card.tall{aspect-ratio:4/5}
.lux-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lux-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,5,22,.05) 35%,rgba(9,5,22,.88)),linear-gradient(115deg,rgba(255,255,255,.10),transparent 30%)}
.lux-card:hover{transform:translateY(-10px);box-shadow:0 60px 110px -45px rgba(91,38,230,.7),0 0 0 1px rgba(215,250,82,.35)}
.lux-card:hover img{transform:scale(1.06)}
.lux-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:8px}
.lux-cap b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;color:var(--lux-gold)}
.lux-cap strong{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.7vw,1.8rem);line-height:1.05;letter-spacing:-.02em}
.lux-cap span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#cfc8e6}
.lux-open{position:absolute;right:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:20px;
  background:rgba(9,5,22,.6);border:1px solid rgba(245,245,247,.2);font-size:12px;font-weight:500;opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.lux-open i{width:6px;height:6px;transform:rotate(45deg);background:var(--lux-gold)}
.lux-card:hover .lux-open,.lux-card:focus-visible .lux-open{opacity:1;transform:none}

/* ---------- The dock: every project one click away, magnified like on a Mac ---------- */
.lux-dockwrap{display:flex;justify-content:center;padding:0 var(--gut-r) 0 var(--gut)}
.lux-dock{display:flex;align-items:flex-end;gap:10px;height:76px;padding:10px 14px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18)}
.lux-dock button{position:relative;flex:none;width:54px;height:54px;padding:0;border:0;border-radius:15px;cursor:pointer;background:#120c22 center/cover no-repeat;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14)}
.lux-dock button::after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--lux-gold);transform:translateX(-50%);opacity:.75}
.lux-dock button span{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,4px);white-space:nowrap;padding:6px 11px;border-radius:9px;
  background:rgba(9,5,22,.92);border:1px solid rgba(255,255,255,.14);color:var(--ink);font-size:12px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.lux-dock button:hover span,.lux-dock button:focus-visible span{opacity:1;transform:translate(-50%,0)}
.lux-dock .sep{flex:none;width:1px;align-self:stretch;margin:4px 4px;background:rgba(255,255,255,.18)}

/* the curtain that carries a cover into its project page */
.lux-curtain{position:fixed;z-index:80;pointer-events:none;overflow:hidden;border-radius:20px;background:#120c22 center/cover no-repeat}

/* ---------- Chi sono / Contatti: the particle figures are gone, the copy takes the stage ---------- */
html.lux #chi-sono .stage,html.lux #contatti .stage{display:none}
@media (min-width:960px){
  html.lux #chi-sono .grid,html.lux #contatti .grid{grid-template-columns:minmax(0,1fr);max-width:980px}
  html.lux #chi-sono .copy,html.lux #contatti .copy{order:0}
}
@media (max-width:959px){.lux-head{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.lux-card,.lux-card img{transition:none}}