/* ============================================================
   IL NEMICO — Cartigliano (VI)
   ============================================================ */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Variable.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0c0a09;
  --bg-2:#161210;
  --bg-3:#1e1714;
  --ink:#f3ece2;
  --ink-dim:#b6aa9e;
  --red:#7a2420;
  --red-deep:#54180f;
  --red-bright:#a8362c;
  --gold:#b9925f;
  --gold-dim:#8a6c47;
  --line: rgba(243,236,226,.12);
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body: 'Work Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
html.no-js .js-only{ display:none; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.is-loading, html.is-loading body{ overflow: hidden; height: 100%; }

img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

.wrap{
  width: min(1160px, 92vw);
  margin: 0 auto;
}

h1, h2, h3, .display{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .96;
  text-transform: uppercase;
}

.eyebrow{
  display:inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9em;
}

.section{ padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section-alt{ background: var(--bg-2); }

.section-head{ max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head-center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
.section-head p{ color: var(--ink-dim); margin-top: .8em; font-size: 1.05rem; }

/* ============ BOTTONI ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: .95em 1.8em;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ transform: translateY(-2px); border-color: var(--ink-dim); }
.btn-red{
  background: var(--red);
  border-color: var(--red);
}
.btn-red:hover{ background: var(--red-bright); border-color: var(--red-bright); }

/* ============ PRELOADER ============ */
#preloader{
  position: fixed; inset:0; z-index: 999;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-color{
  position:absolute; inset:0;
  background-color: var(--red-deep);
}
.preloader-logo{
  position:relative;
  width: min(88vw, 440px);
  height: auto;
  mix-blend-mode: multiply;
}
html.no-js #preloader{ display:none; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(12,10,9,.85), transparent);
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand img{ width:38px; height:38px; border-radius:50%; }
.brand-name{ font-family: var(--display); font-size:1.35rem; letter-spacing:.03em; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; z-index:70;
}
.nav-toggle span{ width:24px; height:2px; background: var(--ink); }

.site-nav{ display:flex; align-items:center; gap: clamp(1rem, 2.4vw, 1.8rem); }
.site-nav a{
  font-size: .88rem; font-weight:600; letter-spacing:.03em;
  color: var(--ink-dim);
  transition: color .3s var(--ease);
}
.site-nav a:hover{ color: var(--ink); }
.site-nav .btn{ padding:.7em 1.4em; font-size:.85rem; }
.site-nav-social{ display:flex; align-items:center; gap: .9rem; }
.site-nav-social a{ display:flex; color: var(--ink-dim); }
.site-nav-social a:hover{ color: var(--ink); }
.site-nav-social svg{ width:18px; height:18px; fill:currentColor; }

/* ============ HERO + PRENOTAZIONE ============ */
.hero-pin{ position: relative; overflow: hidden; }
.hero{
  position: relative; width:100%;
  overflow:hidden;
}
.hero-layer{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
}
.hero-layer-a{ background-image: url('../img/hero-tomahawk.jpg'); }

.hero-prenota{
  position:relative; z-index:2;
  padding: clamp(7rem, 14vw, 9rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 9vw, 6.5rem);
}
.hero-prenota::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,10,9,.9) 0%, rgba(12,10,9,.6) 35%, rgba(12,10,9,.93) 100%);
}
.hero-prenota-head{ position:relative; max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align:center; }
.hero-prenota-head .eyebrow{ color: var(--gold); }
.hero-prenota-head h1{ font-size: clamp(2rem, 5vw, 3.2rem); color: var(--ink); }
.hero-prenota-head p{ color: var(--ink-dim); margin: 1em auto 0; max-width: 30rem; }
.hero-prenota-grid{
  position:relative;
  max-width: 1160px; margin: 0 auto;
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem, 5vw, 3.5rem);
  align-items:stretch;
}
.hero-prenota-photo{ border-radius: 20px; overflow:hidden; margin:0; }
.hero-prenota-photo img{ width:100%; height:100%; object-fit: cover; }

form.prenota-form[hidden]{ display:none; }
form.prenota-form{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  min-width:0; width:100%;
  background: rgba(22,18,16,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--red);
  border-top: 2px solid var(--red);
  border-radius: 20px;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
}
.field{ display:flex; flex-direction:column; gap:.5em; min-width:0; }
.field-full{ grid-column: 1 / -1; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea{ width:100%; max-width:100%; }
.field label{ font-size:.82rem; font-weight:800; letter-spacing:.04em; color: var(--ink); text-transform: uppercase; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea{
  background: rgba(12,10,9,.55);
  border: 1px solid var(--red);
  border-radius: 10px;
  padding: .8em .9em;
  color: var(--ink);
  font-family: var(--body);
  font-size: .98rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--gold); background: rgba(12,10,9,.75);
}
.field textarea{ resize: vertical; min-height: 5em; }
.radio-row{ display:flex; flex-wrap:wrap; row-gap:.6em; column-gap: 1.4em; margin-top:.2em; }
.radio-row label{
  display:flex; align-items:center; gap:.5em;
  font-size:.92rem; font-weight:500; text-transform:none; color: var(--ink);
}
.radio-row input[type="radio"]{
  width:1.05em; height:1.05em; flex:none; margin:0; accent-color: var(--gold);
}
.consent-field{ margin-top:.2em; }
.consent-row{
  display:flex; align-items:flex-start; gap:.7em;
  font-size: .84rem; font-weight:500; text-transform:none;
  color: var(--ink-dim); line-height:1.5; cursor:pointer;
}
.consent-row input[type="checkbox"]{
  width:1.15em; height:1.15em; flex:none; margin:.15em 0 0; accent-color: var(--gold);
}
.consent-row a{ color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }
.consent-row a:hover{ color: var(--red-bright); }
.prenota-submit{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6em;
}
.prenota-hint{
  color: var(--ink-dim); font-size:.84rem; font-weight:500; line-height:1.5;
}
/* ============ RECENSIONI ============ */
.rating-badges{ display:flex; flex-wrap:wrap; gap:.7em; margin-top: 1em; }
.rating-badge{
  display:inline-flex; align-items:center; gap:.4em;
  border:1px solid var(--line); border-radius:999px;
  padding:.5em 1em; font-size:.85rem; color: var(--ink-dim);
}
.rating-badge strong{ color: var(--gold); font-family: var(--display); font-size:1.1rem; }

.reviews-marquee{
  overflow:hidden;
  padding: .5rem 0;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.reviews-track{
  display:flex; gap: 1.2rem;
  width: max-content;
  will-change: transform;
}
.review-card{
  width: min(78vw, 340px);
  flex: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
}
.review-card .stars{ color: var(--gold); letter-spacing:.1em; font-size: .95rem; }
.review-card p{ margin-top: .9em; color: var(--ink); font-size: .96rem; line-height:1.55; }
.review-card .who{ margin-top: 1em; font-size:.82rem; color: var(--ink-dim); font-weight:600; }

/* ============ VIDEO TITOLARE ============ */
.titolare-video{
  background: var(--bg);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 3rem);
  display:flex; justify-content:center;
}
.titolare-video video{
  width:auto; max-width:100%;
  height: min(98vh, 896px);
  max-height: 98vh;
  border-radius: 20px;
  background:#000;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.75);
}
@media (max-width: 700px){
  .titolare-video{ padding:0; }
  .titolare-video video{
    width:100vw; max-width:100vw;
    height:100svh; max-height:none;
    object-fit: cover;
    border-radius:0; box-shadow:none;
  }
}

/* ============ LA NOSTRA SPECIALITÀ ============ */
.specialita-cards{
  display:flex; justify-content:center; align-items:flex-start;
  gap: clamp(1.2rem, 3.4vw, 2.6rem);
  flex-wrap:wrap;
  margin-top: clamp(2rem, 5vw, 3rem);
  position:relative; z-index:1;
}
.spec-card{
  background: var(--bg-3);
  padding: 10px 10px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  width: min(320px, 62vw);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}
.spec-card img{ width:100%; border-radius: 8px; aspect-ratio: 3/4; object-fit:cover; display:block; }
.spec-card figcaption{
  font-family: var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1.15rem;
  text-align:center;
  padding: .75em 0;
  color: var(--gold);
}
.spec-card-center{ margin-top: 34px; }
.spec-card:hover{ transform: scale(1.05) rotate(0deg) !important; box-shadow: 0 26px 60px rgba(0,0,0,.6); z-index:2; }

/* ============ DIVISORE TRATTEGGIATO ============ */
.section-divider{ background: var(--bg-2); padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.section-divider span{
  display:block;
  width: min(1100px, 88%);
  margin: 0 auto;
  border-top: 3px dashed var(--red-bright);
  transform-origin: left center;
}
html.no-js .section-divider span{ transform:none; }

/* ============ FERRUCCHIO GIN ============ */
.ferrucchio{ background: var(--bg-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ferrucchio-grid{
  display:grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.ferrucchio .eyebrow{ color: var(--gold); }
.ferrucchio-copy h2{ font-size: clamp(2.6rem, 7vw, 4.2rem); color: var(--gold); }
.ferrucchio-tagline{ font-family: var(--display); font-size: 1.3rem; margin-top:.4em; color: var(--ink); }
.ferrucchio-copy p{ color: var(--ink-dim); margin-top: 1em; max-width: 30rem; }
.ferrucchio-badges{ display:flex; flex-wrap:wrap; gap:.6em; margin-top: 1.4em; }
.ferrucchio-badges span{
  border: 1px solid var(--gold-dim); color: var(--gold);
  border-radius: 999px; padding: .5em 1em; font-size: .78rem; letter-spacing:.08em; text-transform:uppercase;
}
.ferrucchio-hero{ border-radius: 18px; overflow:hidden; margin:0; }
.ferrucchio-hero img{ width:100%; aspect-ratio: 4/5; max-height: 34rem; object-fit: cover; object-position: 50% 12%; }

.ferrucchio-gallery{
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display:flex; flex-direction:column; gap:.6rem;
}
.ferrucchio-gallery-row{ display:grid; gap:.6rem; }
.ferrucchio-gallery-row--top{ grid-template-columns: repeat(3, 1fr); }
.ferrucchio-gallery-row--bottom{ grid-template-columns: repeat(2, 1fr); }
.ferrucchio-gallery figure{ border-radius: 12px; overflow:hidden; margin:0; }
.ferrucchio-gallery img{ width:100%; height:100%; object-fit:cover; }
.ferrucchio-gallery-row--top figure{ aspect-ratio: 4/5; }
.ferrucchio-gallery-row--bottom figure{ aspect-ratio: 4/3; }

/* ============ SOCIAL LINKS ============ */
.social-link{
  display:flex; align-items:center; gap: .7em;
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
  transition: color .3s var(--ease);
}
.social-link:hover{ color: var(--gold); }
.social-link svg{ width: 26px; height: 26px; fill: currentColor; }

/* ============ DOVE SIAMO ============ */
.dovesiamo-grid{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem);
  align-items:stretch;
}
.dovesiamo-info{ display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.contact-list li{
  display:flex; justify-content:space-between; gap:1em;
  padding: .8em 0; border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.contact-list li span:first-child{ color: var(--ink-dim); }
.contact-list li span:last-child{ font-weight:600; text-align:right; }
.hours-list{ margin-top: 1.6rem; }
.hours-list li{
  display:flex; justify-content:space-between;
  padding: .6em 0; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-dim);
}
.hours-list li.closed span:last-child{ color: var(--red-bright); font-weight:600; }
.dovesiamo-social{ margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.dovesiamo-social-label{
  display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-dim); margin-bottom: 1em;
}
.dovesiamo-social-links{ display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem; }
.dovesiamo-social-links .social-link{ font-size: clamp(1.05rem, 2vw, 1.3rem); }
.dovesiamo-social-links .social-link svg{ width:22px; height:22px; }
.map-shape{
  position: relative;
  display:block;
  border-radius: 20px; overflow:hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3.4;
  cursor: pointer;
}
.map-shape iframe{
  width:100%; height:100%; border:0;
  pointer-events: none;
}

/* ============ FOOTER ============ */
.site-footer{ padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer-grid{
  display:grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items:start;
  padding-bottom: 2rem; border-bottom: 1px solid var(--line);
}
.footer-info{ font-size: .92rem; color: var(--ink-dim); line-height:1.8; }
.footer-info strong{ color: var(--ink); font-family: var(--display); font-size:1.2rem; letter-spacing:.02em; }
.footer-social{ display:flex; flex-direction:column; gap:.6em; text-align:right; font-weight:600; }
.footer-legal{
  display:flex; flex-wrap:wrap; gap:.4em 1.4em;
  padding-top: 1.4rem; font-size:.76rem; color: var(--ink-dim); opacity:.75;
}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5em 1.2em;
  padding-top: .9rem; font-size:.78rem; color: var(--ink-dim);
}
.footer-bottom a{ color: var(--ink-dim); text-decoration: underline; text-underline-offset:.2em; }
.footer-bottom a:hover{ color: var(--gold); }

/* ============ REVEAL UTILITIES ============ */
[data-reveal], [data-reveal-group] > *{
  opacity: 0;
  transform: translateY(28px);
}
html.no-js [data-reveal], html.no-js [data-reveal-group] > *{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--bg-2); flex-direction:column; align-items:flex-start;
    padding: 6rem 2rem 2rem; gap: 1.6rem;
    transform: translateX(100%); transition: transform .4s var(--ease);
  }
  .site-nav.is-open{ transform: translateX(0); }
  .hero-prenota-grid, .ferrucchio-grid, .dovesiamo-grid{ grid-template-columns: minmax(0,1fr); }
  .hero-prenota-photo img{ min-height: 16rem; }
  form.prenota-form{ grid-template-columns: minmax(0,1fr); }
  .radio-row{ flex-direction:column; row-gap:.75em; column-gap:0; }
  .radio-row label{ white-space:nowrap; }
  .footer-grid{ grid-template-columns: 1fr; text-align:left; }
  .footer-social{ text-align:left; }
  .specialita-cards{ gap: 22px; }
  .spec-card-center{ margin-top: 0; }
  .ferrucchio-gallery-row--top,
  .ferrucchio-gallery-row--bottom{ grid-template-columns: repeat(2, 1fr); }
  .ferrucchio-gallery figure{ aspect-ratio: 3/4; }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] > *{ opacity:1 !important; transform:none !important; }
  .spec-card{ transform:none !important; }
  .section-divider span{ transform:none !important; }
}