/* =========================================================================
   Smart homes and villas (villas.html) · page-only styles, loaded after home.css.
   home.css tokens only: no hex, rgb or cubic-bezier here. Owner: Kallirroi.
   ========================================================================= */

/* ---- the villa scene (generated, brand palette). One symbol, drawn large in the hero and the day story.
   Its states are custom properties set on the <svg> that uses it, because they inherit into the <use> copy. */
.vart { --vs-win: var(--sky-300); --vs-win2: var(--sky-300); --vs-door: var(--sky-300); --vs-lamp: var(--sky-100);
  --vs-halo-o: 1; --vs-pool-o: 1; --vs-blind-o: 0; --vs-air-o: 0; display: block; }
.vart[data-phase="climate"] { --vs-air-o: 1; }
.vart[data-phase="blinds"] { --vs-blind-o: 1; }
.vart[data-phase="pool"] { --vs-pool-o: 1.7; --vs-halo-o: 1.4; }
.vart[data-phase="arrival"] { --vs-door: var(--sky-100); --vs-halo-o: 1.5; }
.vart[data-phase="night"] { --vs-win: var(--navy-600); --vs-win2: var(--sky-200); --vs-door: var(--navy-600); --vs-pool-o: 0.35; --vs-halo-o: 1.6; }

.vs-sky { fill: var(--navy-950); }
.vs-stars circle { fill: var(--navy-200); }
.vs-moon { fill: var(--navy-100); }
.vs-sea { fill: var(--navy-900); }
.vs-horizon { fill: none; stroke: var(--navy-600); stroke-width: 0.8; }
.vs-glint path { fill: none; stroke: var(--sky-800); stroke-width: 1.2; stroke-linecap: round; }
.vs-bed { fill: var(--navy-800); }
.vs-shrub circle { fill: var(--aqua-800); }
.vs-trunk { fill: none; stroke: var(--navy-400); stroke-width: 1.4; stroke-linecap: round; }
.vs-canopy, .vs-cypress { fill: var(--aqua-800); }
.vs-canopy-hi { fill: var(--aqua-600); }
.vs-poolglow { fill: var(--aqua-200); opacity: calc(0.4 * var(--vs-pool-o)); transition: opacity var(--dur-slow) var(--ease-std); }
.vs-win path { fill: var(--vs-win); transition: fill var(--dur-slow) var(--ease-std); }
.vs-win .vs-keep { fill: var(--vs-win2); }
.vs-win .vs-door { fill: var(--vs-door); }
.vs-blind { opacity: var(--vs-blind-o); transition: opacity var(--dur-slow) var(--ease-std); }
.vs-bl { fill: var(--navy-700); }
.vs-sl { fill: none; stroke: var(--navy-400); stroke-width: 0.8; }
.vs-air path { fill: none; stroke: var(--sky-100); stroke-width: 1.4; stroke-linecap: round; opacity: var(--vs-air-o); transition: opacity var(--dur-slow) var(--ease-std); }
.vs-path { fill: var(--navy-600); }
.vs-halo { fill: var(--sky-300); opacity: calc(0.2 * var(--vs-halo-o)); transition: opacity var(--dur-slow) var(--ease-std); }
.vs-post { fill: none; stroke: var(--navy-300); stroke-width: 0.9; stroke-linecap: round; }
.vs-head { fill: var(--vs-lamp); }

/* ---- hotspot rings that move by transform from a fixed corner (page-villas.js, as on poles and crossings): no layout
   shift while they glide. home.js still positions #hotRing / #dayRing / #vwRing with left/top; those are hidden here */
#hotRing, #dayRing, #vwRing { display: none; }
.tring { left: 0; top: 0; pointer-events: none; will-change: transform;
  transition: transform var(--dur-slow) var(--ease-enter), width var(--dur-slow) var(--ease-enter), height var(--dur-slow) var(--ease-enter), opacity var(--dur-base) var(--ease-std); }

/* ---- 1 · Hero: the scene sits in the shared hotspot frame */
.hot > .vart { position: absolute; inset: 0; width: 100%; height: 100%; }
.vhero__chip { position: absolute; z-index: 3; left: 12px; top: 12px; }

/* ---- 3 · The problem: "a villa without one system" (no sourced figure exists for villas) */
.vprob { display: grid; gap: 14px; align-content: start; padding: 32px; }
.vprob__list { display: grid; }
.vprob__list li, .vprob__one { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 10px; }
.vprob__list li + li { border-top: 1px solid var(--line); }
.vprob__list .ico { color: var(--muted); }
.vprob__t { display: grid; gap: 2px; }
.vprob__t b { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.vprob__t > span { font-size: var(--fs-label); line-height: 1.4; color: var(--body); }
.vprob__one { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-media); border: 1px solid var(--acc-ink); }
.vprob__one .ico { background: var(--acc); border-color: var(--acc); color: var(--navy-900); }

/* ---- 2 · Clients: 50+ private villas and apartments (never named), then the hotels with the same room automation */
.vcl { gap: 4px 16px; }
.vcl__n { font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; letter-spacing: var(--tr-h3); color: var(--ink); }
.vcl .small { flex-basis: 100%; }

/* ---- 5 · Day and 7 · viewer: real home screens, framed at their own ratio (villas 1280×747–755 lose ≤ 3 px;
   the apartment screens, 1280×694 and 702, lose about 4 % at each side), so hotspot regions are the screens' own */
[data-page="villas"] .day__screen, [data-page="villas"] .viewer__frame { aspect-ratio: 1280 / 750; }
/* Russian screen labels stay as on screen (decision 26): no capitals forced on them */
[lang="ru"] .data-label, .data-label[lang="ru"] { text-transform: none; letter-spacing: 0.02em; }
/* which home the viewer is showing: one chip per kind of home, shown for the screen that is on (no layout change) */
.vview__where { position: absolute; z-index: 3; right: 12px; top: 12px; display: grid; justify-items: end; }   /* top right, over the screens' clock, never over a title or a button */
.vview__where > .chip { grid-area: 1 / 1; visibility: hidden; }
#viewer:has(#vwFrame > img.is-on[data-where="villa"]) .vview__where > [data-where="villa"],
#viewer:has(#vwFrame > img.is-on[data-where="apartment"]) .vview__where > [data-where="apartment"] { visibility: visible; }

@media (max-width: 639.98px) {
  .vprob { padding: 24px 20px; }
  .vhero__chip { left: 8px; top: 8px; }
  .vview__where { right: 8px; top: 8px; }
}