/* Servizi (giro 27, passo S). Testata, menu e piè comuni da ../lavori/lavori.css e home.css.
   Riferimento: www.antinori.it/it/esperienze/lista-tenute/tenute-antinori/antinori-nel-chianti-classico/ misurato a 1920×959 dpr 1
   e 393×695 dpr 3 (lavoro/g27/S/ref-*.json, tempi-ref.json, hover-ref.json). Solo parametri, scritti a mano.
   Differenze: design/differenze.md, «Giro 27 — Servizi». */
.pagina-servizi main { background: #fff; color: #000; }
/* A. apertura bassa: foto a scala fissa 1,05, marchio sopra il titolo, al centro */
.apertura-v { position: relative; z-index: 1; overflow: hidden; height: 24.01vw; background: #000; }
.apertura-v__fondo { position: absolute; inset: 0; background-color: var(--medio, #000); transform: scale(1.05); }
.apertura-v__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* strato neutro minimo per il contrasto 3:1 del titolo e del marchio sulla foto (accessibilità, differenze.md) */
.apertura-v__fondo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--velo, .3)); }
.apertura-v__testo { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.apertura-v__marchio { display: block; width: auto; height: 127px; }
.pagina-servizi .apertura-v h1 { margin: 25.2px 0 8.4px; font: 300 84px/84px var(--h-serif); letter-spacing: normal; color: #fff; text-align: center; }
/* B. elenco: colonna di testo 60 % su #f7f7f7, foto 40 % alterna; il testo resta allineato a destra */
.voci-v { position: relative; z-index: 1; background: #fff; }
.voce-v { position: relative; overflow: hidden; background: #f7f7f7; transition: opacity .35s ease; }
.voce-v__colonna { box-sizing: border-box; width: 60%; padding: 7.4922vw 7vw; text-align: right; }
.voce-v:nth-child(even) .voce-v__colonna { margin-left: 40%; }
.voce-v__testo { width: 23vw; margin: 0 auto; }
.voce-v__occhiello { margin: 0 0 8px; font: 400 21px/24.15px var(--h-serif); color: #000; }
.voce-v__luogo { margin: 0 0 1.7245vw; font: 900 10px/15px var(--h-sans); letter-spacing: 1px; text-transform: uppercase; color: #6e6e6e; }
.voce-v__luogo strong { font-weight: 900; color: #000; }
.pagina-servizi .voce-v__titolo { margin: 0 0 1.7245vw; font: 400 42px/48.3px var(--h-serif); letter-spacing: normal; color: #000; }
.voce-v__p { margin: 0 0 1.7245vw; font: 400 17px/28.9px var(--h-serif); color: #000; }
.voce-v__p .segnaposto { font-style: italic; }
.voce-v__foto { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; overflow: hidden; transition: width 1.05s ease-in-out; }
.voce-v:nth-child(even) .voce-v__foto { right: auto; left: 0; }
.voce-v__fondo { position: absolute; inset: 0; background-color: var(--medio, #000); transition: transform 3.5s ease-in-out, opacity 2.1s ease; }
.voce-v__fondo img, .voce-v__fondo picture { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 1024px) {
  .voce-v:not(.voce-v--pd) .voce-v__foto:hover { width: 50%; }
  .voce-v:not(.voce-v--pd) .voce-v__foto:hover .voce-v__fondo { transform: scale(1.1); }
}
/* collegamento con segno: a riposo una barra obliqua; col mouse la barra esce in diagonale e si disegna il cerchio */
.link-v { position: relative; display: inline-flex; align-items: center; height: 40px; font: 900 11px/12.65px var(--h-sans); letter-spacing: 2.5px; text-transform: uppercase; color: #000; text-decoration: none; vertical-align: top;
  transition: color .3s ease .84s; }
.link-v__segno { position: relative; flex: none; width: 40px; height: 40px; margin-right: 5px; overflow: hidden; }
.link-v__linea { position: absolute; top: 0; left: 0; width: 40px; height: 40px; box-sizing: border-box; border-left: 1px solid currentColor; transform: skewX(-45deg); transform-origin: 0 100%;
  transition: transform .56s ease-in-out .58s; }
.link-v svg { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; transform: rotate(-90deg); fill: none; stroke: #000; stroke-width: 2; }
.link-v circle { stroke-dasharray: 308; stroke-dashoffset: 308; transition: stroke-dashoffset .47s ease .19s; }
/* croce nel cerchio: tratteggio 100, a riposo nascosta, col mouse a metà (valori letti sul riferimento) */
.link-v line { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .47s ease .19s; }
.link-v:hover, .link-v:focus-visible { color: #6b5a1e; transition: color .3s ease; }
.link-v:hover .link-v__linea, .link-v:focus-visible .link-v__linea { transform: translate(40px, -40px) skewX(-45deg); transition: transform .56s ease-in-out; }
.link-v:hover circle, .link-v:focus-visible circle { stroke-dashoffset: 0; transition: stroke-dashoffset .44s ease .5s; }
.link-v:hover line, .link-v:focus-visible line { stroke-dashoffset: 50; transition: stroke-dashoffset .44s ease .5s; }
.link-v:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
/* stati di partenza del movimento (solo con JavaScript: html.v-js); la voce parte quando entra (servizi.js) */
.v-js .voce-v { opacity: 0; }
.v-js .voce-v.v-visto { opacity: 1; transition-delay: .07s; }
.v-js .voce-v .voce-v__fondo { opacity: 0; }
.v-js .voce-v.v-visto .voce-v__fondo { opacity: 1; transition-delay: 0s, .07s; }
.voce-v__anima { transition: transform .56s ease, opacity .56s ease; }
.v-js .voce-v__anima { opacity: 0; }
.v-js .voce-v__titolo, .v-js .voce-v__p { transform: rotateY(14deg) translateY(-3px); }
.v-js .v-visto .voce-v__anima { opacity: 1; transform: none; }
.v-js .v-visto .voce-v__occhiello { transition-delay: .96s; }
.v-js .v-visto .voce-v__luogo { transition-delay: 1.16s; }
.v-js .v-visto .voce-v__titolo { transition-delay: 1.36s; }
.v-js .v-visto .voce-v__p { transition-delay: 1.56s; }
/* il segno entra dal basso a sinistra, 560 ms dopo il testo; animazione (non transizione) per non toccare i tempi del mouse */
.v-js .voce-v.v-visto .link-v__linea { animation: v-segno .56s ease-in-out 1.76s backwards; }
@keyframes v-segno { from { transform: translate(var(--sx, -40px), var(--sy, 40px)) skewX(-45deg); } to { transform: skewX(-45deg); } }
@media (min-width: 1024px) {
  .v-js .voce-v__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; transition: transform 2.1s ease; pointer-events: none; }
  .v-js .v-visto .voce-v__foto::before { transform: translateX(100%); }
}
@media (max-width: 1023px) {
  .apertura-v { height: 106.1vw; }
  .apertura-v__fondo { background-color: var(--medio-393, var(--medio, #000)); }
  .pagina-servizi .apertura-v h1 { margin: 0; font-size: 50px; line-height: 50px; }
  .voce-v__colonna, .voce-v:nth-child(even) .voce-v__colonna { width: 100%; margin: 0; padding: 8.753vw 10.178vw; text-align: left; }
  .voce-v__testo { width: auto; }
  .voce-v__occhiello { margin-bottom: 12px; font-size: 18px; line-height: 20.7px; }
  .voce-v__luogo, .pagina-servizi .voce-v__titolo, .voce-v__p { margin-bottom: 5.972vw; }
  .pagina-servizi .voce-v__titolo { font-size: 28px; line-height: 30.8px; }
  .voce-v__p { line-height: 24.65px; }
  .voce-v__foto, .voce-v:nth-child(even) .voce-v__foto { position: relative; width: 100%; height: 106.1vw; }
  .voce-v__fondo { background-color: var(--medio-393, var(--medio, #000)); }
  .link-v { height: 24px; font-size: 9px; line-height: 10.35px; letter-spacing: 2px; }
  .link-v__segno { width: 32px; height: 24px; }
  .link-v__linea { width: 32px; height: 24px; }
  .link-v svg { left: 4px; top: 0; }
  .link-v__testo { margin-top: 5px; }
  .link-v { --sx: -32px; --sy: 24px; }
  /* a 393 la voce parte con la sua classe, con 35 ms invece dei 70 che a 1920 la separano dalla tendina (tempi misurati, movimento-bak.txt) */
  .v-js .voce-v.v-visto { transition-delay: .035s; }
  .v-js .voce-v.v-visto .voce-v__fondo { transition-delay: 0s, .035s; }
  .link-v:hover .link-v__linea, .link-v:focus-visible .link-v__linea { transform: translate(32px, -24px) skewX(-45deg); }
}
/* movimento ridotto: solo dissolvenze di 200 ms, niente tendina, rotazione, scorrimento del segno né zoom */
@media (prefers-reduced-motion: reduce) {
  .voce-v, .voce-v__fondo, .voce-v__anima, .v-js .voce-v__anima { transition: opacity 200ms ease !important; transition-delay: 0s !important; transform: none !important; }
  .voce-v__foto { transition: none; }
  .v-js .voce-v__foto::before { display: none; }
  .link-v__linea, .link-v:hover .link-v__linea { transform: skewX(-45deg) !important; transition: none !important; animation: none !important; }
  .link-v circle, .link-v line { transition: none; }
}