/* Финал, третья серия (05.11): компактные варианты I–M с фото в эллипсе — «кратко и по делу». Разметка — _src/site/variants/fin_3.py */
.vf { padding: var(--s7) 0; }
.vf .h2 { margin-top: 0; color: var(--haze); }
.vf-oval { position: relative; display: block; flex: none; overflow: hidden; border-radius: 50%; background: var(--g8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 0 6px var(--ink), 0 0 0 7px color-mix(in srgb, var(--gold) 28%, transparent); }
.vf-oval img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.vf-p { margin-top: var(--s3); max-width: 32em; color: color-mix(in srgb, var(--haze) 78%, transparent); font-size: 1.0625rem; line-height: 1.55; }
.vf-h { margin-top: var(--s3); max-width: 30em; color: color-mix(in srgb, var(--haze) 58%, transparent); font-size: .9375rem; line-height: 1.5; }
.vf-tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem)/1 var(--f-num);
  color: var(--haze); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.vf-tel .i { width: .78em; height: .78em; color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .vf-tel:hover { color: var(--gold); } }
.vf .btn--ghost-l { --bg: transparent; --fg: var(--haze); --bd: color-mix(in srgb, var(--haze) 45%, transparent); }

/* I — эллипс и подпись по кругу (Hero Animations / 16: текст по кругу медленно вращается) */
.vfi__in { display: grid; gap: var(--s5); align-items: center; }
.vfi__ph { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.vfi__o { width: 124px; height: 156px; }
.vfi__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: vfi-spin 48s linear infinite; }
.vfi__ring text { font: 600 9.5px/1 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; fill: color-mix(in srgb, var(--gold) 80%, transparent); }
@keyframes vfi-spin { to { transform: rotate(360deg); } }
.vfi__c { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.vfi__c .vf-h { margin-top: 0; }
@media (min-width: 960px) { .vfi__in { grid-template-columns: 200px minmax(0, 1fr) auto; column-gap: var(--s7); } .vfi__c { padding-left: var(--s6); border-left: 1px solid color-mix(in srgb, var(--haze) 16%, transparent); } }

/* J — строка-визитка (Physics / 3: номер магнитом тянется к курсору) */
.vfj { padding: var(--s6) 0; }
.vfj__in { display: grid; gap: var(--s5); align-items: center; }
.vfj__who { display: flex; align-items: center; gap: var(--s4); }
.vfj__o { width: 72px; height: 90px; }
.vfj__h { font: var(--w-h) calc(clamp(1.5rem, 1.2rem + 1vw, 2rem) * var(--k-h))/1.15 var(--f-serif); color: var(--haze); }
.vfj__who .vf-h { margin-top: 6px; }
.vfj__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.vfj__mag { display: inline-block; will-change: transform; }
@media (min-width: 960px) { .vfj__in { grid-template-columns: minmax(0, 1fr) auto; } }

/* K — карточка по центру (Mouse Effects / 20: строки поднимаются из масок) */
.vfk__card { max-width: 640px; margin-inline: auto; padding: var(--s7) var(--s5); text-align: center; border: 1px solid color-mix(in srgb, var(--haze) 14%, transparent); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--haze) 3%, transparent); display: flex; flex-direction: column; align-items: center; }
.vfk__o { width: 96px; height: 120px; margin-bottom: var(--s5); }
.vfk__h { text-align: center; }
.vfk__p { margin-inline: auto; }
.vfk__tel { margin-top: var(--s5); }
.vfk__b { margin-top: var(--s4); }
.vfk .vf-h { margin-inline: auto; }
.vf-anim [data-vf-lines] > * { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.vf-anim [data-vf-lines].is-in > * { opacity: 1; transform: none; }

/* L — обращение и контакты (Hover Effects / 4: заливка строки от ближнего края) */
.vfl__in { display: grid; gap: var(--s6); align-items: center; }
.vfl__card { padding: var(--s5); border: 1px solid color-mix(in srgb, var(--haze) 14%, transparent); border-radius: var(--r-card); }
.vfl__who { display: flex; align-items: center; gap: var(--s4); padding-bottom: var(--s4); }
.vfl__o { width: 64px; height: 80px; }
.vfl__who b { display: block; font: var(--w-h) calc(1.25rem * var(--k-h))/1.2 var(--f-serif); color: var(--haze); }
.vfl__who span { display: block; margin-top: 4px; color: color-mix(in srgb, var(--haze) 62%, transparent); font-size: .9375rem; }
.vfl__l { list-style: none; margin: 0; padding: 0; }
.vfl__l li { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s2) var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--haze) 14%, transparent); overflow: hidden; }
.vfl__l li::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--gold) 12%, transparent); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.19, 1, .22, 1); pointer-events: none; }
.vfl__l li[data-edge="bottom"]::before { transform-origin: 50% 100%; }
.vfl__l li.is-h::before { transform: scaleY(1); }
.vfl__l li > * { position: relative; }
.vfl__k { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.vfl__tel { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.vfl__v { color: color-mix(in srgb, var(--haze) 70%, transparent); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 960px) { .vfl__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); } }
@media (max-width: 479px) { .vfl__l li { grid-template-columns: 1fr; gap: 4px; padding-block: var(--s3); } }

/* M — как подпись письма (SVG Animations / 5: линия под именем прорисовывается) */
.vfm__sig { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid color-mix(in srgb, var(--haze) 14%, transparent); }
.vfm__o { width: 88px; height: 110px; }
.vfm__name { position: relative; padding-bottom: 14px; }
.vfm__name b { display: block; font: italic var(--w-h) calc(1.5rem * var(--k-h))/1.2 var(--f-serif); color: var(--haze); }
.vfm__name span { display: block; margin-top: 4px; color: color-mix(in srgb, var(--haze) 60%, transparent); font-size: .9375rem; }
.vfm__line { position: absolute; left: 0; bottom: 0; width: 100%; height: 12px; overflow: visible; }
.vfm__line path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 0; }
.vf-anim .vfm__line path { stroke-dashoffset: 340; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .2s; }
.vf-anim .vfm__sig.is-in .vfm__line path { stroke-dashoffset: 0; }
.vfm__c { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-left: auto; }
@media (max-width: 767px) { .vfm__c { margin-left: 0; } }

@media (max-width: 599px) { .vf .btn { flex: 1 1 100%; } .vfi__c, .vfj__act { width: 100%; } .vfk__card { padding: var(--s6) var(--s4); } }
@media (prefers-reduced-motion: reduce) { .vfi__ring { animation: none; } }
/* L на телефоне: кнопка и номер не шире строки */
.vfl__l li > * { min-width: 0; }
@media (max-width: 599px) { .vfl__card { padding: var(--s4); } .vfl__l .btn { width: 100%; justify-content: center; white-space: normal; } .vfl__tel { font-size: 1.375rem; } }

/* 05.11 — выбран M: фото в квадратике, блок компактнее (было на пол-экрана) */
.vfm { padding: var(--s6) 0; }
.vfm__in { display: grid; gap: var(--s5); align-items: center; }
.vfm .h2 { font-size: calc(clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem) * var(--k-h)); }
.vfm .vf-p { margin-top: var(--s2); }
.vfm__sig { margin-top: 0; padding-top: 0; border-top: 0; gap: var(--s4); flex-wrap: nowrap; }
.vfm__o { width: 64px; height: 64px; border-radius: 10px; }
.vfm__name b { font-size: calc(1.25rem * var(--k-h)); }
.vfm__c { margin: var(--s4) 0 0; }
.vfm__r .vf-h { margin-top: var(--s3); }
@media (min-width: 960px) {
  .vfm__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); }
  .vfm__r { padding-left: var(--s6); border-left: 1px solid color-mix(in srgb, var(--haze) 14%, transparent); }
}