:root{
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ background:#F6F1E7; color:#17120F; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:#5C1A22; color:#F6F1E7; }
img,svg{ display:block; max-width:100%; }

.font-display{ font-optical-sizing:auto; }
.eyebrow{ letter-spacing:.28em; text-transform:uppercase; font-weight:600; font-size:.72rem; }

/* ---------- Performance: rendering progressivo delle sezioni off-screen ---------- */
.cv-auto{ content-visibility:auto; }
.cv-700{ contain-intrinsic-size:1px 700px; }
.cv-800{ contain-intrinsic-size:1px 800px; }
.cv-900{ contain-intrinsic-size:1px 900px; }
.cv-1200{ contain-intrinsic-size:1px 1200px; }

/* ---------- Grain ---------- */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s }
.reveal[data-delay="2"]{ transition-delay:.20s }
.reveal[data-delay="3"]{ transition-delay:.30s }
.reveal[data-delay="4"]{ transition-delay:.40s }

/* ---------- Hairline divider ---------- */
.hair{ height:1px; background:linear-gradient(90deg,transparent,rgba(23,18,15,.18),transparent); }
.hair-light{ background:linear-gradient(90deg,transparent,rgba(246,241,231,.22),transparent); }

/* ---------- Underline link ---------- */
.ulink{ position:relative; }
.ulink::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.ulink:hover::after{ transform:scaleX(1); }

/* ---------- Buttons ---------- */
.btn{ position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn-fill::before{ content:""; position:absolute; inset:0; background:#17120F; transform:translateY(101%); transition:transform .5s var(--ease); z-index:0; }
.btn-fill:hover::before{ transform:translateY(0); }
.btn-fill span{ position:relative; z-index:1; transition:color .4s var(--ease); }

/* ---------- Product cards ---------- */
.pcard{ transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.pcard:hover{ transform:translateY(-8px); box-shadow:0 38px 70px -34px rgba(92,26,34,.55); }
.pcard .pimg{ transition:transform .8s var(--ease); }
.pcard:hover .pimg{ transform:scale(1.07) rotate(-1deg); }
.pcard .ptag{ transition:transform .5s var(--ease), opacity .5s var(--ease); }

/* ---------- Navbar ---------- */
#nav{ transition:background-color .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease); }
#nav.scrolled{ background:rgba(246,241,231,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); box-shadow:0 1px 0 rgba(23,18,15,.08), 0 16px 40px -28px rgba(23,18,15,.5); }
.navlink{ position:relative; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:#5C1A22; transform:scaleX(0); transform-origin:center; transition:transform .45s var(--ease); }
.navlink:hover::after, .navlink.active::after{ transform:scaleX(1); }

/* ---------- Hero ---------- */
.hero-bg{ background:
    radial-gradient(120% 90% at 78% 18%, rgba(168,50,63,.42) 0%, transparent 55%),
    radial-gradient(120% 120% at 8% 100%, rgba(196,154,85,.20) 0%, transparent 50%),
    linear-gradient(160deg,#1d1310 0%, #3a161a 48%, #5C1A22 100%);
}

/* ---------- Gallery ---------- */
.gallery-item img{ transition:transform .9s var(--ease), filter .9s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); filter:saturate(1.1); }

/* ---------- Marquee ---------- */
.marquee{ display:flex; gap:4rem; width:max-content; animation:marq 34s linear infinite; }
.marquee.paused{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }

.accent-line{ width:54px; height:3px; background:linear-gradient(90deg,#C49A55,#A8323F); border-radius:3px; }

/* =====================================================
   WhatsApp floating button
   ===================================================== */
#wa-float{
  position:fixed;
  right:max(20px, env(safe-area-inset-right, 20px));
  bottom:max(20px, env(safe-area-inset-bottom, 20px));
  z-index:60;
  width:60px; height:60px;
  display:grid; place-items:center;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.55), 0 6px 14px -6px rgba(0,0,0,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  text-decoration:none;
  will-change:transform;
}
#wa-float:hover{ background:#1ebc59; transform:translateY(-3px) scale(1.04); box-shadow:0 18px 38px -10px rgba(37,211,102,.65), 0 10px 22px -8px rgba(0,0,0,.3); }
#wa-float:active{ transform:translateY(-1px) scale(.98); }
#wa-float:focus-visible{ outline:3px solid #5C1A22; outline-offset:4px; }

.wa-ping{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366;
  animation:wa-pulse 2.4s var(--ease) infinite;
  pointer-events:none;
}
@keyframes wa-pulse{
  0%   { transform:scale(1);   opacity:.7; }
  80%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}

@media (max-width: 640px){
  #wa-float{ width:54px; height:54px; right:16px; bottom:16px; }
  #wa-float svg{ width:26px; height:26px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .wa-ping{ display:none; }
}