/* =====================================================================
   Kuki Media — livello UX condiviso (movimento, immagini, transizioni)
   Caricato da tutte le pagine pubbliche. Tutto e' "in aggiunta": se un
   browser non supporta qualcosa, il sito resta esattamente com'era.
   Gli stati nascosti (testi e foto che entrano) valgono solo con la
   classe .ux su <html>, messa da uno script di una riga nell'head e
   tolta da sola se ux.js non parte: niente contenuti invisibili.
   ===================================================================== */

/* ---------- TRANSIZIONI TRA PAGINE (View Transitions native) ---------- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

body > nav{ view-transition-name:km-nav; }
::view-transition-group(km-nav){ animation-duration:.5s; }
::view-transition-old(root){ animation:km-vt-out .32s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:km-vt-in .62s cubic-bezier(.2,.7,.1,1) .06s both; }
@keyframes km-vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes km-vt-in{ from{ opacity:0; transform:translateY(16px); } }

/* la foto della card che si allarga fino a diventare la copertina del progetto */
.cover-img{ view-transition-name:km-media; }
::view-transition-group(km-media),
::view-transition-group(km-modal),
::view-transition-group(km-lb){ animation-duration:.72s; animation-timing-function:cubic-bezier(.7,0,.15,1); }
::view-transition-old(km-media), ::view-transition-new(km-media),
::view-transition-old(km-lb), ::view-transition-new(km-lb),
::view-transition-old(km-modal), ::view-transition-new(km-modal){
  width:100%; height:100%; object-fit:cover; animation-duration:.72s; animation-timing-function:cubic-bezier(.7,0,.15,1);
}
::view-transition-old(km-lb), ::view-transition-new(km-lb){ object-fit:contain; }
::view-transition-image-pair(km-modal){ overflow:hidden; border-radius:6px; }

/* ---------- SCROLL MORBIDO (Lenis, solo desktop) ---------- */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* ---------- BARRA DI LETTURA ---------- */
.km-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:450; pointer-events:none;
  background:var(--clay, #A94E30); transform-origin:0 50%; transform:scaleX(0);
}

/* ---------- HEADER INTELLIGENTE ---------- */
body > nav{ transition:transform .55s cubic-bezier(.2,.7,.1,1), padding .45s cubic-bezier(.2,.7,.1,1), background-color .45s; }
nav.km-hide{ transform:translateY(-102%); }
@media (min-width:861px){
  nav.km-compact{ padding-top:15px; padding-bottom:15px; background:rgba(250,247,241,0.94); }
}
.navlinks a{ position:relative; transition:color .3s; }
/* menu mobile: chiuso davvero (prima ne spuntava una striscia sopra l'header) */
@media (max-width:860px){
  .navlinks:not(.open){ transform:translateY(-140%); visibility:hidden; transition:transform .3s, visibility 0s linear .3s; }
  .navlinks.open{ visibility:visible; transition:transform .45s cubic-bezier(.2,.7,.1,1); }
}
.navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--clay, #A94E30);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.navlinks a:hover::after, .navlinks a.km-active::after, .navlinks a.current::after{ transform:scaleX(1); transform-origin:0 50%; }
.navlinks a.km-active{ color:var(--clay, #A94E30); }

/* ---------- TITOLI CHE SALGONO PAROLA PER PAROLA ---------- */
.km-split .km-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:0 .07em .1em 0; margin:0 -.07em -.1em 0; /* spazio per corsivi e discendenti */
}
.km-split .km-wi{ display:inline-block; }
.ux .km-split .km-wi{ transform:translateY(108%); transition:transform 1.05s cubic-bezier(.2,.7,.1,1); }
.ux .km-split.in .km-wi{ transform:none; }

/* ---------- FOTO CHE "SI SVILUPPANO" ----------
   Niente pannelli colorati: la foto emerge piano, come in camera oscura,
   e si assesta da un leggerissimo ingrandimento. Il contenitore resta
   sempre visibile e cliccabile. */
.ux .km-curtain > img, .ux .km-curtain > .ph{
  opacity:0; transform:scale(1.045); filter:saturate(.4) brightness(1.06);
  transition:opacity 1.1s cubic-bezier(.25,.6,.3,1), transform 1.8s cubic-bezier(.2,.7,.1,1), filter 1.8s cubic-bezier(.25,.6,.3,1);
}
.ux .km-curtain.in > img, .ux .km-curtain.in > .ph{ opacity:1; transform:scale(1); filter:none; }
.ux .shot{ animation:none; }

/* ---------- HERO: ENTRATA, CONTATORE FOTO, INVITO A SCORRERE ---------- */
.ux .hero .hero-kicker, .ux .hero .hero-cta{ opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.1,1); }
.ux .hero.km-hero-in .hero-kicker{ opacity:.85; transform:none; transition-delay:.15s; }
.ux .hero.km-hero-in .hero-cta{ opacity:1; transform:none; transition-delay:.75s; }
/* l'hero riempie lo schermo sotto l'header, cosi' didascalia e contatore restano visibili */
.hero{ height:calc(100vh - 80px); height:calc(100svh - 80px); }
.hero-inner{ will-change:transform, opacity; }
.hero-slideshow{ will-change:transform; }
.hero-caption{ max-width:calc(100% - 230px); }
.km-hero-meta{
  position:absolute; z-index:2; right:30px; bottom:28px; display:flex; align-items:center; gap:12px;
  color:#F3ECDD; font-size:11px; letter-spacing:.18em; font-variant-numeric:tabular-nums; opacity:.85;
}
.km-hero-bar{ width:64px; height:1px; background:rgba(243,236,221,.3); overflow:hidden; }
.km-hero-bar i{ display:block; height:100%; background:#F3ECDD; transform-origin:0 50%; transform:scaleX(0); }
.km-hero-bar i.run{ animation:km-bar 6s linear forwards; }
@keyframes km-bar{ to{ transform:scaleX(1); } }
.km-scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
  color:#F3ECDD; font-size:10px; letter-spacing:.32em; text-transform:uppercase; opacity:.8;
}
.km-scroll-cue span{
  width:1px; height:44px; background:rgba(243,236,221,.22) linear-gradient(#F3ECDD,#F3ECDD) no-repeat 0 -18px / 1px 18px;
  animation:km-cue 2.2s cubic-bezier(.7,0,.2,1) infinite;
}
@keyframes km-cue{ to{ background-position:0 44px; } }
@media (max-width:700px){
  .km-scroll-cue{ display:none; }
  .km-hero-meta{ right:20px; bottom:22px; }
  .hero-caption{ max-width:calc(100% - 170px); left:20px; bottom:22px; }
}

/* ---------- MAG: BARRA DI AVANZAMENTO DEL CAROSELLO ---------- */
.km-rail{ height:1px; background:var(--line, #DCD2BE); margin:0 48px 34px; overflow:hidden; }
.km-rail i{ display:block; height:100%; width:30%; background:var(--clay, #A94E30); transition:transform .25s ease-out; }
@media (max-width:860px){ .km-rail{ margin:0 24px 28px; } }

/* ---------- CURSORE CON ETICHETTA (solo mouse) ---------- */
.km-cursor{
  position:fixed; top:0; left:0; z-index:460; pointer-events:none;
  width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
  background:var(--clay, #A94E30); color:#FBF7EE; display:flex; align-items:center; justify-content:center;
  font:500 10px/1 'Inter', sans-serif; letter-spacing:.2em; text-transform:uppercase; text-indent:.2em;
  transform:translate3d(-200px,-200px,0) scale(0);
}
.km-cursor-ready :is(.grid#projects-grid, .featured, .side-item, .grid .card, .shot, .gal-item, .inline-img, .cover-img, .km-ba),
.km-cursor-ready :is(.grid#projects-grid, .featured, .side-item, .grid .card, .shot, .gal-item, .inline-img, .cover-img, .km-ba) *{ cursor:none; }

/* foto ingrandibili */
.shot img, .gal-item img, .inline-img img, .cover-img img{ cursor:zoom-in; }

/* ---------- LIGHTBOX ---------- */
.km-lb{
  position:fixed; inset:0; z-index:500; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(16,14,11,.97); color:#F3ECDD;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
}
.km-lb.open{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.km-lb.km-instant{ transition:none; }
.km-lb-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 20px 12px 26px;
  font:500 11px/1 'Inter', sans-serif; letter-spacing:.22em; font-variant-numeric:tabular-nums;
}
.km-lb-stage{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:0 84px; touch-action:none; }
.km-lb-img{
  display:block; max-width:100%; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px);
  object-fit:contain; user-select:none; -webkit-user-drag:none; border-radius:2px;
  transition:transform .5s cubic-bezier(.2,.7,.1,1), opacity .25s ease; cursor:zoom-in;
}
.km-lb.zoomed .km-lb-img{ cursor:zoom-out; }
.km-lb-btn{
  width:48px; height:48px; flex-shrink:0; border-radius:50%; border:1px solid rgba(243,236,221,.28);
  background:transparent; color:#F3ECDD; font:300 18px/1 'Inter', sans-serif; cursor:pointer;
  display:grid; place-items:center; transition:background-color .25s, border-color .25s, color .25s;
}
.km-lb-btn:hover{ background:#F3ECDD; border-color:#F3ECDD; color:#1D1A16; }
.km-lb-btn:focus-visible{ outline:2px solid var(--clay, #A94E30); outline-offset:3px; }
.km-lb-prev, .km-lb-next{ position:absolute; top:50%; margin-top:-24px; z-index:2; }
.km-lb-prev{ left:18px; } .km-lb-next{ right:18px; }
.km-lb-cap{
  margin:0; padding:14px 24px calc(22px + env(safe-area-inset-bottom, 0px)); min-height:58px; text-align:center;
  font:italic 300 15px/1.5 'Fraunces', serif; color:#CFC5B4;
}
@media (max-width:700px){
  .km-lb-stage{ padding:0 6px; }
  .km-lb-prev, .km-lb-next{ display:none; }
  .km-lb-img{ max-height:calc(100dvh - 140px); }
}

/* ---------- PRIMA / DOPO ---------- */
.km-ba-section{ max-width:1100px; margin:0 auto; padding:0 48px 130px; }
.km-ba-list{ display:grid; gap:56px; }
.km-ba{ margin:0; --p:50%; }
.km-ba-frame{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:3 / 2; max-height:82vh; width:100%; background:var(--stone, #EFE9DD); touch-action:pan-y; user-select:none; }
.km-ba img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none; }
.km-ba .km-ba-before{ clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.km-ba .km-ba-sim{ filter:saturate(.62) brightness(.8) contrast(.84) sepia(.12) hue-rotate(-6deg); transform:rotate(.7deg) scale(1.035); }
.km-ba-handle{ position:absolute; top:0; bottom:0; left:var(--p); width:1px; background:#FBF7EE; z-index:2; pointer-events:none; }
.km-ba-handle i{
  position:absolute; top:50%; left:0; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:#FBF7EE; box-shadow:0 6px 24px rgba(29,26,22,.25);
}
.km-ba-handle i::before, .km-ba-handle i::after{
  content:''; position:absolute; top:50%; width:7px; height:7px; margin-top:-4px; border:solid var(--ink, #1D1A16); border-width:0 0 1.5px 1.5px;
}
.km-ba-handle i::before{ left:12px; transform:rotate(45deg); }
.km-ba-handle i::after{ right:12px; transform:rotate(-135deg); }
.km-ba-tag{
  position:absolute; top:16px; z-index:2; padding:7px 12px; border-radius:30px; pointer-events:none;
  background:rgba(29,26,22,.55); backdrop-filter:blur(6px); color:#FBF7EE;
  font:500 10px/1 'Inter', sans-serif; letter-spacing:.18em; text-transform:uppercase;
}
.km-ba-tag-b{ left:16px; } .km-ba-tag-a{ right:16px; }
.km-ba-range{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.km-ba:focus-within .km-ba-handle i{ outline:2px solid var(--clay, #A94E30); outline-offset:3px; }
.km-ba-cap{ margin-top:14px; font-size:13px; color:var(--ink-soft, #6B6357); }
.km-ba-note{ text-align:center; font-size:13.5px; color:var(--ink-soft, #6B6357); max-width:600px; margin:36px auto 0; line-height:1.7; }
@media (max-width:860px){ .km-ba-section{ padding:0 24px 90px; } }

/* ---------- FAQ CHE SI APRONO CON MORBIDEZZA (Chrome/Edge recenti) ---------- */
:root{ interpolate-size:allow-keywords; }
.faq-item::details-content{ block-size:0; overflow:hidden; transition:block-size .5s cubic-bezier(.2,.7,.1,1), content-visibility .5s allow-discrete; }
.faq-item[open]::details-content{ block-size:auto; }

/* ---------- CHI PREFERISCE MENO MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce){
  .ux .km-split .km-wi, .ux .km-curtain > img, .ux .km-curtain > .ph,
  .ux .hero .hero-kicker, .ux .hero .hero-cta{ transition:none !important; transform:none !important; clip-path:none !important; opacity:1 !important; }
  .km-scroll-cue span{ animation:none; }
  nav, .km-lb, .km-lb-img{ transition:none; }
  .faq-item::details-content{ transition:none; }
}

/* ---------- DETTAGLI TIPOGRAFICI ---------- */
::selection{ background:var(--clay, #A94E30); color:#FBF7EE; }
html{ scrollbar-color:var(--line, #DCD2BE) transparent; }
body{ text-rendering:optimizeLegibility; font-kerning:normal; }
h1, h2, h3, summary{ text-wrap:balance; }
p, li, dd{ text-wrap:pretty; hanging-punctuation:first; }
img{ -webkit-user-drag:none; }