/* 3004 hero: line drawing of the 3004 classical villa. Bold = main outline, thin = details. 14 s loop.
   Each path carries its real length in --l (no pathLength), which keeps the draw-in smooth in every browser. */
.vw{animation:vfade 14s linear infinite}
@keyframes vfade{0%{opacity:0}2%{opacity:1}88%{opacity:1}97%,100%{opacity:0}}
.vl{fill:none;stroke:#F4F1E8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l) var(--l);stroke-dashoffset:var(--l)}
.vb{stroke-width:2.4}
.vt{stroke-width:0.9;stroke-opacity:0.8}
.vs0{animation:vd0 14s ease-in-out infinite}
@keyframes vd0{0%,0%{stroke-dashoffset:var(--l)}8%,100%{stroke-dashoffset:0}}
.vs1{animation:vd1 14s ease-in-out infinite}
@keyframes vd1{0%,6%{stroke-dashoffset:var(--l)}20%,100%{stroke-dashoffset:0}}
.vs2{animation:vd2 14s ease-in-out infinite}
@keyframes vd2{0%,16%{stroke-dashoffset:var(--l)}32%,100%{stroke-dashoffset:0}}
.vs3{animation:vd3 14s ease-in-out infinite}
@keyframes vd3{0%,28%{stroke-dashoffset:var(--l)}46%,100%{stroke-dashoffset:0}}
.vs4{animation:vd4 14s ease-in-out infinite}
@keyframes vd4{0%,42%{stroke-dashoffset:var(--l)}58%,100%{stroke-dashoffset:0}}
.vs5{animation:vd5 14s ease-in-out infinite}
@keyframes vd5{0%,54%{stroke-dashoffset:var(--l)}68%,100%{stroke-dashoffset:0}}
.vs6{animation:vd6 14s ease-in-out infinite}
@keyframes vd6{0%,64%{stroke-dashoffset:var(--l)}76%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.vw,.vl{animation:none !important}.vl{stroke-dashoffset:0}}
/* phone: thicker strokes because the drawing is scaled down to the screen width */
.vph .vb{stroke-width:5}
.vph .vt{stroke-width:2.2}
/* desktop: slightly thicker strokes so the thin details stay steady while drawing (wrapper class "vdk") */
.vdk .vb{stroke-width:3.4}
.vdk .vt{stroke-width:1.5;stroke-opacity:0.85}