/* =========================================================
   ROMANOVA v5 — flowing liquid-silver text, bug fixes, split hero
   ========================================================= */

/* ---------- silver text: the mercury texture flows diagonally, seamlessly, with no inherited-variable animation ---------- */
[data-theme="silver"] .chrome{animation:none !important}
:root{--mercA:linear-gradient(#8c929b,#8c929b);--mercB:linear-gradient(#808080,#808080)}
@keyframes mercflow{
  from{background-position:0 0,calc(0px - var(--ox,0px)) calc(0px - var(--oy,0px)),calc(0px - var(--ox,0px)) calc(0px - var(--oy,0px)),calc(0px - var(--ox,0px)) calc(0px - var(--oy,0px))}
  to  {background-position:0 0,calc(0px - var(--ox,0px)) calc(0px - var(--oy,0px)),calc(1350px * var(--tx,1) - var(--ox,0px)) calc(675px * var(--tx,1) - var(--oy,0px)),calc(-900px * var(--tx,1) - var(--ox,0px)) calc(-450px * var(--tx,1) - var(--oy,0px))}
}
/* four layers: the header slider's translucent white on top (--wh), a rare glint, a grey-veined layer drifting one way (soft-light),
   the steel layer drifting the other way — 18 s per tile. Every heading, including the <em> words, wears it. */
[data-theme="silver"] .chrome:not(.split):not(:has(.w)),
[data-theme="silver"] .chrome .wi:not(:has(.ch)),
[data-theme="silver"] .chrome .ch,
[data-theme="silver"] .chrome em .wi:not(:has(.ch)),
[data-theme="silver"] .chrome em .ch,
[data-theme="silver"] .mq-item > span:not(.o){
  animation:mercflow 48.4s linear infinite !important;
  background-image:linear-gradient(rgba(255,255,255,var(--wh,0)),rgba(255,255,255,var(--wh,0))),linear-gradient(110deg,transparent calc(var(--gl) - 14%),rgba(255,255,255,.98) var(--gl),transparent calc(var(--gl) + 14%)),var(--mercB),var(--mercA) !important;
  background-size:64px 64px,var(--gw,100%) var(--gh,100%),calc(1350px * var(--tx,1)) calc(675px * var(--tx,1)),calc(900px * var(--tx,1)) calc(450px * var(--tx,1)) !important;
  background-repeat:repeat,no-repeat,repeat,repeat !important;
  background-blend-mode:normal,normal,soft-light,normal !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important
}
/* the marquee: outlined words stay hollow, the plain words carry the flowing steel */
html:root:root[data-theme="silver"] .mq-item.chrome{background:none !important;background-image:none !important;animation:none !important}
html:root:root[data-theme="silver"] .mq-item .o{background:none !important;background-image:none !important;animation:none !important;color:transparent !important;-webkit-text-fill-color:transparent !important;-webkit-text-stroke:1.5px #e8eaed}
html:root:root[data-theme="silver"] .mq-item .sep{-webkit-text-fill-color:#c9ced4}
/* a heading whose words/letters are split paints only through its letters */
[data-theme="silver"] .chrome:has(.w){background:none !important;background-image:none !important;animation:none !important}

/* ---------- letters are never clipped: roomy word masks + roomy text-clip boxes ---------- */
.w{padding:.28em .26em .4em !important;margin:-.28em -.26em -.4em !important}
[data-theme="silver"] .chrome .ch,
[data-theme="silver"] .chrome .wi:not(:has(.ch)){padding:.22em .22em .32em;margin:-.22em -.22em -.32em}
[data-anim="scrub"] .w{overflow:visible}
.contact-big.done .w{overflow:visible}

/* ---------- pause decorative animations that are off screen ---------- */
:root:root[data-theme] .is-off,:root:root[data-theme] .is-off *{animation-play-state:paused !important}

/* ---------- "Съёмки": black text on the silver plate ---------- */
@media (min-width:900px) and (hover:hover){
  [data-theme="silver"] .svc-row:hover .svc-name,
  [data-theme="silver"] .svc-row:hover .svc-name .wi,
  [data-theme="silver"] .svc-row:hover .svc-name .ch{
    background:none !important;background-image:none !important;color:#0b0c0e !important;-webkit-text-fill-color:#0b0c0e !important
  }
  [data-theme="silver"] .svc-row:hover .svc-num,
  [data-theme="silver"] .svc-row:hover .svc-desc{color:#0b0c0e !important}
  [data-theme="silver"] .svc-row:hover .svc-arr{border-color:#0b0c0e;color:#0b0c0e}
}

/* ---------- Love Story card: liquid iridescent mercury ---------- */
.pcard.hot{background-image:var(--merc) !important;background-size:620px 310px !important;animation:none !important;isolation:isolate}
.pcard.hot::before{
  content:"";position:absolute;left:-45%;top:-45%;width:190%;height:190%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 34% at 24% 30%,rgba(140,160,255,.95),transparent 72%),
    radial-gradient(30% 30% at 76% 24%,rgba(255,160,210,.9),transparent 72%),
    radial-gradient(36% 36% at 72% 76%,rgba(120,232,212,.92),transparent 72%),
    radial-gradient(30% 34% at 26% 78%,rgba(255,214,140,.9),transparent 72%),
    radial-gradient(22% 22% at 50% 50%,rgba(255,255,255,.9),transparent 70%);
  filter:blur(22px) saturate(0);opacity:.95;mix-blend-mode:normal;
  animation:lsflow 26s linear infinite;will-change:transform
}
@keyframes lsflow{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.12)}to{transform:rotate(360deg) scale(1)}}
.pcard.hot > *:not(.hot-badge){position:relative;z-index:1}
.pcard.hot .hot-badge{z-index:3}
.pcard.hot::after{z-index:2}

/* ---------- "Давай снимем": letters shy away from the cursor ---------- */
.contact-big .ch{transition:none}

/* ---------- HERO (desktop): the name is split around the photo and sits behind it ---------- */
.hero{--hf:clamp(170px,min(17vw,31svh),310px)}
.hero .hero-in{z-index:auto}
.hero .hero-name{position:absolute;left:var(--gut);right:var(--gut);top:0;bottom:0;margin:0;display:block;
  font-size:calc(var(--fk,1) * clamp(70px,min(12.6vw,21svh),250px));z-index:1;pointer-events:none}
.hero .hero-name .l1,.hero .hero-name .l2{position:absolute;display:block;white-space:nowrap;margin:0}
.hero .hero-name .l1{left:0;top:calc(50% - var(--hf) * .6667 - .65em)}
.hero .hero-name .l2{right:0;top:calc(50% + var(--hf) * .6667 - .52em)}
.hero .hero-meta,.hero .hero-bot{position:relative;z-index:6}
.hero .hero-stage{z-index:2}
.hero .hero-frame{top:50%;width:var(--hf);margin:calc(var(--hf) * -0.6667) 0 0 calc(var(--hf) * -0.5)}
.hero .hero-float.f1{left:13%;top:39%}
.hero .hero-float.f2{right:10%;top:15%}
.hero .hero-float.f3{left:3%;bottom:auto;top:64%}
.hero .hero-float.f4{right:4%;bottom:auto;top:37%}

/* ---------- nothing decorative runs behind the loader ---------- */
html:root.is-loading[data-theme] *{animation-play-state:paused !important}
html:root.is-loading .merc-cv{visibility:hidden}

/* ---------- portfolio: «Сетка 2» and «Труба 2» ---------- */
.g2{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:var(--g2-edge,4px) var(--g2-edge,4px) 40px}
.g2-in{width:calc(var(--g2-size,100) * 1%);margin:0 auto}
.g2::-webkit-scrollbar{display:none}
.g2 .ses-grid{padding:8px 0 24px;grid-template-columns:repeat(var(--g2-cols,3),1fr);gap:var(--g2-gap,20px)}
.g2 .ses-b h3{font-size:calc(var(--fk,1) * clamp(24px,2.4vw,42px))}
.g2 .mas{padding:6px 0 24px;gap:var(--g2-gap,20px)}
.g2 .mas-col{gap:var(--g2-gap,20px)}
.g2 .rv{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.g2 .rv.in{opacity:1;transform:none}
.tube2{position:absolute;inset:0;overflow:hidden}
.t2-cam{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 44%}
.t2-world{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d}
.t2{position:absolute;left:0;top:0;cursor:pointer;backface-visibility:hidden;will-change:transform,opacity}
.t2 img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) * .4 + 2px);box-shadow:0 30px 70px -28px rgba(0,0,0,.65);-webkit-user-drag:none;pointer-events:none}
.t2-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;display:grid;gap:4px;justify-items:center}
.t2-cap b{font-size:calc(var(--fk,1) * clamp(24px,3vw,50px));line-height:.95}
.t2-cap span{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- best shots: hovering one frame turns the others grey and dim — via two overlays whose opacity is the only thing that animates ---------- */
.bp{transition:none !important;isolation:isolate}
.best-d.hovering .bp{filter:none !important}
.bp::before,.bp::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.bp::before{background:#7f7f7f;mix-blend-mode:saturation;z-index:1}   /* colour → grey */
.bp::after{background:#000;z-index:2}                                  /* dim */
.best-d.hovering .bp:not(.on)::before{opacity:1}
.best-d.hovering .bp:not(.on)::after{opacity:.5}

/* the flowing steel is slow decorative motion the owner asked for: it keeps its speed even when the OS asks to reduce animations */
@media (prefers-reduced-motion:reduce){
  [data-theme="silver"] .chrome:not(.split):not(:has(.w)),
  [data-theme="silver"] .chrome .wi:not(:has(.ch)),
  [data-theme="silver"] .chrome .ch{animation-duration:48.4s !important}
  [data-theme="silver"] .mq-item > span:not(.o){animation-duration:28.6s !important}
}

/* ---------- header slider: how much translucent white lies over the headings ---------- */
.wsl{display:none;align-items:center;gap:8px;padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent)}
[data-theme="silver"] .wsl{display:inline-flex}
.wsl-i{font-size:12px;line-height:1;color:var(--muted)}
.wsl output{min-width:3ch;text-align:right;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.wsl input{-webkit-appearance:none;appearance:none;width:96px;height:18px;background:transparent;cursor:pointer;margin:0}
.wsl input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.wsl input::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.wsl input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.wsl input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e}
@media (max-width:1179px){[data-theme="silver"] .wsl{display:none}}

/* ---------- text-clip boxes of un-split headings cover the descenders (the line box alone ends at the baseline) ---------- */
[data-theme="silver"] .chrome:not(.split):not(:has(.w)),
[data-theme="silver"] .mq-item > span:not(.o){padding-top:.12em;padding-bottom:.34em;margin-top:-.12em;margin-bottom:-.34em}

/* ---------- best shots: «keep scrolling» note in the corner ---------- */
.best-hint{position:absolute;right:var(--gut);bottom:30px;z-index:6;display:flex;align-items:center;gap:12px;pointer-events:none;
  font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.best-hint svg{width:30px;height:30px;animation:bhint 1.6s ease-in-out infinite}
@keyframes bhint{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}

/* ---------- no white focus outline on the tube frames ---------- */
.tb.on,[data-theme="silver"] .tb.on,.t2,.t2.on{outline:none !important}

/* ---------- header circle: settings panel ---------- */
.cfg{position:relative;display:none}
.cfg-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--ink);transition:border-color .3s,background .3s}
.cfg-btn:hover,.cfg.open .cfg-btn{border-color:var(--acc)}
.cfg-btn svg{width:20px;height:20px}
@media (min-width:1180px){.cfg{display:block}}
.cfg-panel{position:absolute;right:0;top:calc(100% + 14px);width:310px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--bg) 86%,#000);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);z-index:80}
.cfg-panel[hidden]{display:none}
.cfg-sec{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.cfg-sec:last-of-type{border-bottom:0;margin-bottom:6px}
.cfg-sec h4{margin:0 0 10px;font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.cfg-v{display:none}
body[data-pv="grid"] .cfg-grid,body[data-pv="grid2"] .cfg-grid2{display:block}
.cfg-row{margin-bottom:10px}
.cfg-row label{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;margin-bottom:4px}
.cfg-row output{font-family:var(--fm);font-size:11px;color:var(--muted)}
.cfg-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}
.cfg-row input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.cfg-row input::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.cfg-row input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.cfg-row input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e}
.cfg-seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px}
.cfg-seg button{min-width:44px;padding:6px 0;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:background .25s,color .25s}
.cfg-seg button.on{background:var(--ink);color:var(--bg)}
.cfg-reset{width:100%;padding:9px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:border-color .3s,color .3s}
.cfg-reset:hover{border-color:var(--acc);color:var(--ink)}

/* «Лучшие кадры»: a shorter scroll through the block */
.best-d{height:170vh}

/* the settings circle is hidden for visitors (its code and saved values stay) */
.cfg{display:none !important}

/* ---------- whiteness of every inscription: fixed at 25 % ---------- */
:root{--wh:.25}

/* ---------- Сетка 2: equal gaps both ways — the caption lies over the photo instead of taking room under it ---------- */
.g2 .m-item{position:relative}
.g2 .m-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.6));border-radius:0 0 calc(var(--r) * .5) calc(var(--r) * .5);color:#fff;pointer-events:none}
.g2 .mas-col{min-width:0}

/* headings flow slowly (24 s per tile); the marquee words keep the quicker 14 s */
[data-theme="silver"] .mq-item > span:not(.o){animation-duration:28.6s !important}

/* ---------- header: tile-size slider (only while «Сетка 1» / «Сетка 2» is open) ---------- */
.tsz{display:none;align-items:center;gap:10px;padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--muted)}
.tsz label{display:flex;align-items:center;gap:7px;cursor:pointer}
.tsz svg{width:16px;height:16px;flex:none}
.tsz-sep{width:1px;height:18px;background:var(--line)}
.tsz input{-webkit-appearance:none;appearance:none;width:84px;height:18px;background:transparent;cursor:pointer;margin:0}
.tsz input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.tsz input::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#3a3f48,#f4f6f8)}
.tsz input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.tsz input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e8eaed;border:2px solid #0b0c0e}
@media (min-width:1180px){body[data-pv="grid1"] .tsz,body[data-pv="grid2"] .tsz{display:inline-flex}}

/* ---------- «Сетка 1»: the texts sit on the cover, smaller; hovering shrinks them so the picture can be seen ---------- */
.g2 .ses-ov .ses-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0) 52%);opacity:1;transition:opacity .4s ease;pointer-events:none;z-index:1}
.g2 .ses-ov:hover .ses-img::after{opacity:.25}
.g2 .ses-ov .ses-ov-t{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 16px 14px;transform-origin:0 100%;transition:transform .45s var(--ease),opacity .45s;pointer-events:none}
.g2 .ses-ov .ses-ov-t h3{font-size:calc(var(--fk,1) * clamp(17px,1.5vw,26px));line-height:.95;color:#fff}
.g2 .ses-ov .ses-ov-t .ses-meta{margin-top:5px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.78)}
.g2 .ses-ov .ses-num,.g2 .ses-ov .ses-cnt{transition:transform .45s var(--ease),opacity .45s}
.g2 .ses-ov .ses-num{transform-origin:0 0}.g2 .ses-ov .ses-cnt{top:12px;bottom:auto;right:12px;transform-origin:100% 0;padding:4px 8px;font-size:10px}

/* ---------- best shots, «Сетка 2» hover: title, year · city ---------- */
.g2 .m-cap{flex-direction:column;align-items:flex-start;gap:3px;justify-content:flex-end}
.g2 .m-cap b{font-family:var(--fd);font-weight:var(--fdw);font-size:calc(var(--fk,1) * 22px);letter-spacing:.02em;text-transform:var(--fdt);line-height:1}
.g2 .m-cap span{font-size:11px;letter-spacing:.14em;opacity:.85}

/* ---------- Сетка 1 / Сетка 2: identical gaps in both directions — no staggered margins on the tiles ---------- */
.g2 .ses,.g2 .m-item{margin:0 !important}

/* ---------- fixed grid defaults (the header sliders are gone) ---------- */
:root{--g2-size:49;--g2-gap:11px;--g2-edge:4px}
.about-photo .note,.about-photo .stamp{display:none !important}

/* ---------- portfolio: the big intro word stays invisible until it is sized and centred ---------- */
.pfa-intro{visibility:hidden}

/* ---------- loader: white inscriptions become flowing silver as it fills (--pm: 0 → 1) ---------- */
.pre{--wh:calc(1 - var(--pm, 0) * .75)}
.pre .pre-name{mix-blend-mode:normal !important}
html:root.is-loading[data-theme] .pre *{animation-play-state:running !important}

/* ---------- loader: the word stays hidden until its letters are ready (no flash of plain text) ---------- */
.pre .pre-name{visibility:hidden}
.pre.pre-quiet > *{display:none !important}

/* ---------- portfolio intro: the big word is painted once and only moved / scaled (no per-frame repaint of the silver) ---------- */
.pfa-intro{will-change:transform}
/* the pattern of the big word and of the corner title is the same fixed, well-balanced frame (phase 30 s of the loop);
   it stands still through the whole entrance and starts to flow 1.5 s after the title has settled */
:root:root #pfaTitle,:root:root .pfa-intro .ch,:root:root .pfa-intro{animation-delay:-30s !important}
body.pf-flow-hold #pfaTitle,body.pf-flow-hold .pfa-intro .ch,body.pf-flow-hold .pfa-intro{animation-play-state:paused !important}

/* ---------- hero: «Портфолио» / «Цены» in the middle, the scroll cue stays at the right edge ---------- */
.hero .hero-bot{justify-content:center}
.hero .hero-bot .scroll-cue{position:absolute;right:0;bottom:0}

/* ---------- quiet arrival: the cover has the page's own colour, so nothing flashes while the page builds ---------- */
.pre.pre-quiet{background:var(--bg) !important}

/* ---------- lighter: the film grain keeps its look but no longer shimmers (one huge layer less to move) ---------- */
.grain{animation:none !important}



/* ---------- home page, arrival from the portfolio: the big «Romanova» flies into the logo ---------- */
.hi-word{will-change:transform;pointer-events:none}
:root:root:root:root:root .hi-word,:root:root:root:root:root .hdr .logo{animation-delay:-30s !important}
:root:root:root:root:root.hi-hold .hi-word,:root:root:root:root:root.hi-hold .hdr .logo{animation-play-state:paused !important}
.hdr > *:not(.logo){transition:opacity .7s ease}
.hdr.hi-wait > *:not(.logo){opacity:0}
.hdr.hi-wait .logo{visibility:hidden}

/* ---------- arrival from another page of the site: the loader markup is never shown, not even for the first split second ---------- */
html.quiet .pre{background:var(--bg) !important}
html.quiet .pre > *{display:none !important}