/* ============================================================
   hero-field.css
   The 7N homepage hero: vector-field canvas, compass instrument,
   metallic italics and the section rail the mark flows into.
   Shared by index.html and index-ru.html, loaded after their inline styles.
============================================================ */
:root {
  --vf-lit-rgb: 244,246,248;
  --vf-metal-1: #8A9099;
  --vf-metal-2: #D9DCE0;
  --vf-metal-3: #FFFFFF;
}

/* Field canvas: fixed to the viewport, so the mark can travel to the fixed section rail */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* Metallic italics: the richness the gold gave, in platinum */
.hero-title em {
  color: var(--gold);
  background-image: linear-gradient(100deg, var(--vf-metal-1) 0%, var(--vf-metal-2) 34%, var(--vf-metal-3) 52%, var(--vf-metal-2) 70%, var(--vf-metal-1) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* room for the italic overhang, which background-clip would otherwise cut */
  padding: 0 .06em 0 .02em; margin: 0 -.06em 0 -.02em;
}
/* The destination: dim until the field finds its direction, then a sweep of light settles on it.
   No filter here: a filter on a background-clip:text element breaks the clip in Chromium. */
.hero-title em.dest {
  background-image: linear-gradient(100deg, var(--vf-metal-1) 0%, var(--vf-metal-1) 36%, var(--vf-metal-3) 50%, var(--vf-metal-2) 60%, var(--vf-metal-3) 80%, var(--vf-metal-2) 100%);
  background-size: 280% 100%;
  background-position: 0% 0;
  transition: background-position 2.4s cubic-bezier(0.16,1,0.3,1);
}
:root.vf-locked .hero-title em.dest { background-position: 100% 0; }

/* Compass instrument */
.mark-wrap::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--vf-lit-rgb), .06), transparent 62%);
  opacity: 0; transition: opacity 2.4s cubic-bezier(0.16,1,0.3,1);
}
:root.vf-locked .mark-wrap::before { opacity: 1; }
.mark-3d { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
/* Until the field's first frame the instrument waits; if the script never arrives it appears anyway */
:root.vf-pending .mark-3d { opacity: 0; animation: vf-reveal .6s ease 3.5s forwards; }
@keyframes vf-reveal { to { opacity: 1; } }
.mark-3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.mark-bezel .ring { fill: none; stroke: rgba(var(--vf-lit-rgb), .2); stroke-width: .6; }
.mark-bezel .ring-inner { fill: none; stroke: rgba(var(--vf-lit-rgb), .09); stroke-width: .5; }
.mark-bezel .tick { stroke: rgba(var(--vf-lit-rgb), .36); stroke-width: .45; stroke-linecap: round; }
.mark-bezel .tick.major { stroke: rgba(var(--vf-lit-rgb), .68); stroke-width: .7; }
.mark-bezel .north { fill: rgb(var(--vf-lit-rgb)); }
.mark-bezel .north-halo { fill: rgb(var(--vf-lit-rgb)); opacity: 0; transform-box: fill-box; transform-origin: center; }
:root.vf-locked .mark-bezel .north-halo { animation: vf-halo 2.6s cubic-bezier(0.16,1,0.3,1) 1 both; }
@keyframes vf-halo { 0% { opacity: .45; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.mark-bezel .south { fill: rgba(var(--vf-lit-rgb), .45); }
.mark-bezel .n-label { font-family: 'DM Sans', system-ui, sans-serif; font-size: 7px; font-weight: 500; letter-spacing: .6px; fill: rgba(var(--vf-lit-rgb), .72); }

/* The crisp glyph stands on its own without the field (no JS, reduced motion)
   and becomes a faint core under the vectors when the field runs */
.mark-glyph .m-path { fill: none; stroke: rgb(var(--vf-lit-rgb)); stroke-opacity: .92; stroke-width: 2.2; stroke-linecap: round; }
.mark-glyph .m-path.thin { stroke-width: 1.2; stroke-opacity: .55; }
.mark-glyph .m-node { fill: rgb(var(--vf-lit-rgb)); }
:root.vf-on .mark-glyph .m-path { stroke-opacity: .2; stroke-width: 1.2; }
:root.vf-on .mark-glyph .m-path.thin { stroke-opacity: .16; stroke-width: .8; }

/* Section rail: the dots become nodes on the line the mark flows into */
.section-dots { gap: clamp(2.2rem, 7vh, 4rem); }
.section-dots::before {
  content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--vf-lit-rgb), .12), rgba(var(--vf-lit-rgb), .5) 50%, rgba(var(--vf-lit-rgb), .12));
  opacity: var(--rail-o, 1);
}
.sdot { position: relative; }
/* The dot stays 5px; the click target around it is 25px */
.sdot::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }

/* Single-column hero (≤1024px) keeps the live layout from the page's inline styles:
   the instrument sits to the right of the copy, in the same band (BUG-003). */

/* Phones: the live position lands on the subtitle, so a small instrument closes the
   eyebrow row instead (Max, option B). The row is as tall as the instrument and the
   label wraps before it, so a long RU label never runs under it. Top = hero padding-top,
   less the -20px lift of .hero-left, plus half the row. */
@media (max-width: 600px) {
  .hero-eyebrow { min-height: 52px; padding-right: calc(52px + .75rem); }
  .hero-right {
    top: calc(clamp(2.5rem, 7vw, 4rem) - 20px + 26px);
    right: var(--gutter);
    transform: translateY(-50%);
  }
  .mark-wrap { width: 52px; }
}

/* Narrow screens have no rail: the mark flows into this rule at the foot of the hero */
.hero-rule { display: none; }
@media (max-width: 900px) {
  .hero-rule {
    display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
    height: 1px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--vf-lit-rgb), .55), rgba(var(--vf-lit-rgb), .2) 50%, rgba(var(--vf-lit-rgb), .55));
    opacity: var(--rule-o, 1);
  }
  .hero-rule::before, .hero-rule::after {
    content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: rgb(var(--vf-lit-rgb));
  }
  .hero-rule::before { left: -3.5px; }
  .hero-rule::after { right: -3.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title em.dest, .mark-wrap::before { transition: none; }
  :root.vf-locked .mark-bezel .north-halo { animation: none; }
}