/* HairSalon di Cassisi Alessandra — demo homepage (Klevora, 03/11/2026)
   Concept: il tendone bordeaux di via Donizetti 29 diventa l'intestazione del sito:
   si "srotola" all'apertura, con il bordo a festoni come quello vero.
   Palette dal locale: bordeaux del tendone, bianco del logo AC, giallo della facciata (solo accento su scuro).
   Font: Bodoni Moda (titoli, contrasto da salone) + Manrope (testo e scritta del tendone).
   Momento wow: tendone che si srotola + luce che scorre sul lavoro in apertura. Solo CSS, niente GSAP.
   Cuore della pagina: galleria dei lavori dal profilo e dalla scheda del salone.
   Nessuna interazione (demo). Contatti: solo telefono fisso, niente WhatsApp. */

@font-face{font-family:"Bodoni";src:url(/assets/fonts/bodoni.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni";src:url(/assets/fonts/bodoni-it.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --vino:#7a1631; --vino-dk:#4a0d1f; --vino-lt:#f4e9ec;
  --carta:#fbf8f6; --bianco:#fff; --ink:#23181b; --muted:#65555a;
  --giallo:#efcd76;
  --serif:"Bodoni",Didot,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --wrap:1180px; --bar:0px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--vino) var(--carta)}
body{margin:0;background:var(--carta);color:var(--ink);font:400 17px/1.6 var(--sans);accent-color:var(--vino);caret-color:var(--vino);padding-bottom:var(--bar)}
::selection{background:var(--vino);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:var(--vino);text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(34px,5.2vw,60px)}
h2 em,h1 em{font-style:italic;color:var(--vino)}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--vino);outline-offset:3px}
section{padding:96px 0}

/* fascia anteprima */
.ribbon{background:var(--ink);color:#f3e6e9;font-size:12.5px;text-align:center;padding:7px 12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ribbon b{color:var(--giallo);font-weight:600}

/* tendone = intestazione */
.awning{position:relative;z-index:2;color:#fff;transform-origin:50% 0}
.awning-body{background:linear-gradient(180deg,#8a1c3a 0%,var(--vino) 55%,#6a1129 100%)}
.awning-in{max-width:var(--wrap);margin:0 auto;padding:16px 22px 14px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:12px;color:#fff;text-decoration:none;line-height:1}
.brand b{font:800 26px/1 var(--sans);letter-spacing:.01em}
.brand span{font:500 15px/1 var(--sans);letter-spacing:.04em}
.awning nav{margin-left:auto}
.awning nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.awning nav a{color:#fff;text-decoration:none;font-weight:600;font-size:15px;opacity:.92}
.awning nav a:hover{opacity:1;text-decoration:underline}
.call-top{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--vino);border-radius:99px;padding:10px 18px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease-out)}
.call-top:active{transform:scale(.97)}
.call-top svg,.btn svg,.bar svg{width:18px;height:18px;flex:none}
/* bordo a festoni, come il tendone vero */
.awning-edge{height:22px;background:radial-gradient(circle at 50% 0,#6a1129 0 15px,transparent 15.5px) 0 0/30px 22px repeat-x;filter:drop-shadow(0 6px 6px rgba(74,13,31,.18))}
.js .awning{animation:unroll .9s var(--ease-out) both}
.js .awning-in>*{animation:fade .5s .55s var(--ease-out) both}
@keyframes unroll{from{transform:scaleY(.02)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* hero */
.hero{padding:36px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vino);margin-bottom:18px}
.hero h1{font-size:clamp(46px,6.6vw,88px);line-height:.98}
.hero .sub{font-size:19px;color:var(--muted);max-width:30ch;margin-top:22px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 24px;border-radius:99px;font:700 16px/1 var(--sans);text-decoration:none;transition:transform .16s var(--ease-out),background-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--vino);color:#fff}
.btn-ghost{border:1.5px solid var(--vino);color:var(--vino)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--vino-dk)}.btn-ghost:hover{background:var(--vino-lt)}.call-top:hover{transform:translateY(-1px)}}
.rating{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:15px;color:var(--muted)}
.rating b{font:600 22px/1 var(--serif);color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:var(--vino)}.stars svg{width:15px;height:15px}
.shine{margin:0;position:relative;overflow:hidden;border-radius:220px 220px 14px 14px;aspect-ratio:4/5;background:#e9dcdf}
.shine img{width:100%;height:100%;object-fit:cover}
.shine::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 38%,rgba(255,236,214,.55) 50%,transparent 62%);mix-blend-mode:soft-light;transform:translateX(-70%);pointer-events:none}
.js .shine::after{animation:sweep 7s 1.2s var(--ease-io) infinite}
@keyframes sweep{0%{transform:translateX(-70%)}45%,100%{transform:translateX(70%)}}
.shine figcaption{position:absolute;left:14px;bottom:14px;background:rgba(35,24,27,.72);color:#fff;font-size:13px;padding:6px 12px;border-radius:99px}

/* lavori */
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.head p{color:var(--muted);max-width:36ch}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.works figure{margin:0;aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:12px;background:#eadfe2}
.works img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.works figure:hover img{transform:scale(1.04)}}
.works figcaption{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:600;padding:5px 11px;border-radius:99px}
.works-more{margin-top:26px;text-align:center}

/* servizi: fascia bordeaux */
.services{background:var(--vino);color:#fff}
.services h2{color:#fff}.services h2 em{color:var(--giallo)}
.srv-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.srv-list{list-style:none;margin:34px 0 0;padding:0}
.srv-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.22)}
.srv-list li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.srv-list svg{width:24px;height:24px;color:var(--giallo);margin-top:4px}
.srv-list b{display:block;font:500 25px/1.15 var(--serif)}
.srv-list span{color:#f1dfe4;font-size:16px}
.srv-photo{position:relative}
.srv-photo img{border-radius:12px}
.quote-card{position:absolute;right:-18px;bottom:-26px;max-width:290px;background:var(--carta);color:var(--ink);padding:18px 20px;border-radius:12px;box-shadow:0 18px 40px rgba(30,5,12,.28)}
.quote-card p{font:italic 500 20px/1.25 var(--serif)}
.quote-card small{display:block;margin-top:8px;color:var(--muted);font-size:13px}

/* alessandra */
.ale-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.ale-photo{position:relative}
.ale-photo img{border-radius:12px}
.ale-text p{margin-top:20px;color:var(--muted);max-width:44ch}
.ale-text blockquote{margin:28px 0 0;padding-left:18px;border-left:3px solid var(--vino);font:italic 500 23px/1.3 var(--serif);color:var(--ink)}
.ale-text cite{display:block;font:500 13px/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:8px}

/* salone */
.salon{padding-top:0}
.salon-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.salon-grid figure{margin:0;border-radius:12px;overflow:hidden}
.salon-grid img{width:100%;height:100%;object-fit:cover}
.salon-txt{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.salon-txt p{color:var(--muted)}

/* recensioni */
.reviews{background:var(--vino-lt)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.rev{background:#fff;border-radius:14px;padding:26px 24px;margin:0}
.rev .stars{margin-bottom:14px}
.rev p{font:500 21px/1.3 var(--serif)}
.rev-src{margin-top:26px;font-size:15px;color:var(--muted)}

/* orari e contatti */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hours{width:100%;border-collapse:collapse;margin-top:26px;font-size:17px}
.hours td{padding:12px 0;border-bottom:1px solid #e6dadd}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--vino);font-weight:700}
.hours tr.today td:first-child::after{content:" · oggi";font-weight:500}
.addr{font:500 26px/1.2 var(--serif);margin-top:26px}
.tel{font:600 20px/1 var(--sans);margin-top:12px}
.tel a{color:var(--ink);text-decoration:none}
.visit-photo{margin:26px 0 0;border-radius:12px;overflow:hidden}
.small-link{margin-top:18px;font-size:15px}

/* footer */
footer{border-top:1px solid #e6dadd;padding:30px 0 40px;font-size:14px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.kl{display:inline-flex;align-items:center;gap:8px;color:#0c1b33;text-decoration:none}
.kl span{color:var(--muted)}

/* barra mobile */
.bar{display:none}

/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  section{padding:72px 0}
  .awning nav{display:none}
  .call-top{margin-left:auto}
  .hero-grid,.srv-grid,.ale-grid,.visit-grid,.salon-txt{grid-template-columns:1fr;gap:34px}
  .works{grid-template-columns:1fr 1fr;gap:10px}
  .rev-grid{grid-template-columns:1fr}
  .salon-grid{grid-template-columns:1.5fr 1fr;gap:10px}
  .salon-grid figure{height:250px}
  .quote-card{right:12px;bottom:-22px}
  .head{flex-direction:column;align-items:start;gap:14px}
}
@media (max-width:767px){
  :root{--bar:64px}
  .bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--vino);padding-bottom:env(safe-area-inset-bottom)}
  .bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;color:#fff;text-decoration:none;font-size:12.5px;font-weight:600}
  .bar a+a{border-left:1px solid rgba(255,255,255,.18)}
  .ribbon{font-size:11.5px}.ribbon .rb-long{display:none}
  .awning-in{padding:12px 16px 10px}
  .brand b{font-size:21px}.brand span{font-size:12px}
  .call-top{padding:9px 14px;font-size:14px}
  .awning-edge{height:16px;background-size:22px 16px;background-image:radial-gradient(circle at 50% 0,#6a1129 0 11px,transparent 11.5px)}
  .hero{padding:16px 0 56px}
  .hero-grid{gap:22px}
  .hero-media{order:-1}
  .shine{aspect-ratio:auto;height:min(32vh,270px);border-radius:150px 150px 12px 12px}
  .shine img{object-position:50% 35%}
  .eyebrow{font-size:11.5px;margin-bottom:12px}
  .hero h1{font-size:40px}
  .eyebrow .eb-long{display:none}
  .hero .sub{font-size:17px;margin-top:14px}
  .btns{margin-top:20px}
  .rating{margin-top:18px}
  h2{font-size:36px}
  .quote-card{position:relative;right:auto;bottom:auto;margin:-40px 14px 0;max-width:none}
}
@media (max-width:460px){.hero-desk{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .awning,.js .awning-in>*{animation:none}
  .js .shine::after{animation:none;display:none}
  .js .reveal{transform:none;transition:opacity .5s}
  .works img{transition:none}
}