/* ============================================
   I font (Outfit + Playfair Display) sono dichiarati una sola volta,
   in fonts.css — caricato in ogni pagina insieme a questo file.
   Qui prima c'era una seconda serie di @font-face duplicata (stessi
   nomi, file diversi, es. outfit-v15-latin-200.woff2): rimossa perche'
   ridondante e perche' bypassava il fallback metric-matched costruito
   in fonts.css per eliminare il Cumulative Layout Shift.
   ============================================ */

:root {
  --site-frame-max: 1440px;
  --accessible-focus: #ffffff;
  --accessible-focus-accent: #f037a5;
  --accessible-footer-magenta: #9b004f;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20000;
  transform: translateY(-140%);
  padding: 12px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #141017 !important;
  font: 700 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accessible-focus-accent);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accessible-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(240,55,165,0.55) !important;
}

.filter-btn:focus-visible,
.portfolio-item:focus-visible,
.wine-label-image:focus-visible,
.nav-drawer a:focus-visible,
.nav-hamburger:focus-visible,
.drawer-close:focus-visible,
.lightbox-close:focus-visible,
.wine-label-lightbox-close:focus-visible,
.wine-label-lightbox-nav:focus-visible {
  border-color: rgba(255,255,255,0.8) !important;
}

.footer-col-title {
  color: var(--accessible-footer-magenta) !important;
}

.footer-bottom p {
  color: rgba(20,16,23,0.68) !important;
  font-weight: 500 !important;
}

.footer-bottom a {
  color: var(--accessible-footer-magenta) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.footer-nav-links a,
.footer-contact a,
.footer-contact .footer-city,
.footer-top-link {
  color: rgba(20,16,23,0.82) !important;
  font-weight: 500 !important;
}

/* The visual atmosphere stays full width; only readable content is framed. */
body > main,
body > section,
#page-wrap > section,
#page-wrap > main {
  width: min(100%, var(--site-frame-max));
  margin-inline: auto;
}

body > main,
#page-wrap {
  margin-inline: auto;
}

.footer-inner {
  max-width: var(--site-frame-max) !important;
}

@media (min-width: 1441px) {
  body > main {
    max-width: var(--site-frame-max) !important;
  }

  .topbar {
    padding-left: max(4rem, calc((100vw - var(--site-frame-max)) / 2 + 4rem)) !important;
    padding-right: max(4rem, calc((100vw - var(--site-frame-max)) / 2 + 4rem)) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --site-frame-max: 100%;
  }
}

/* Shared atmospheric motion for every page. */

.site-motion-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.site-motion-orbs::before,
.site-motion-orbs::after,
.site-motion-orb {
  content: '';
  position: absolute;
  width: clamp(260px, 34vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px) saturate(1.12);
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: site-orb-drift 64s ease-in-out infinite alternate;
  will-change: transform;
}

.site-motion-orbs::before {
  top: 10%;
  right: -12%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.46), rgba(123, 0, 255, 0.18) 42%, transparent 72%);
}

.site-motion-orbs::after {
  bottom: 8%;
  left: -13%;
  background: radial-gradient(circle, rgba(240, 55, 165, 0.5), rgba(205, 246, 100, 0.18) 44%, transparent 72%);
  animation-delay: -27s;
  animation-duration: 72s;
}

.site-motion-orb {
  top: 48%;
  left: 38%;
  width: clamp(180px, 23vw, 380px);
  opacity: 0.08;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.38), rgba(240, 55, 165, 0.14) 42%, transparent 72%);
  animation-delay: -44s;
  animation-duration: 82s;
}

@keyframes site-orb-drift {
  0% { transform: translate3d(-2vw, -1vh, 0) scale(0.98); }
  50% { transform: translate3d(2vw, 2vh, 0) scale(1.04); }
  100% { transform: translate3d(-1vw, 3vh, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-motion-orbs::before,
  .site-motion-orbs::after,
  .site-motion-orb {
    animation: none;
  }
}

/* Rispetta la preferenza di sistema "riduci le animazioni" per tutto il sito:
   orb, drift, fade-in allo scroll, cursore custom, ecc. Le durate vengono
   azzerate invece di rimosse del tutto, cosi' gli elementi con animazioni
   di comparsa (es. fadeUp) arrivano comunque al loro stato finale visibile
   invece di restare bloccati sul fotogramma iniziale (es. opacity:0). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}