/* ===== Clavena: «живой» слой. Вариант A — базовый, вариант B — всё из A плюс акценты ===== */

/* --- общее: появление при прокрутке --- */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv.in{opacity:1; transform:none}

/* --- шапка --- */
header{transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 6px 24px rgba(10,14,20,.28)}

/* --- первый экран --- */
.hero.hero-ink,.hero.small{position:relative; overflow:hidden; isolation:isolate}
.hero.hero-ink::before,.hero.small::before{content:""; position:absolute; z-index:-1; inset:-30%;
  background:
    radial-gradient(40% 45% at 75% 45%, rgba(156,82,64,.22), transparent 70%),
    radial-gradient(35% 40% at 15% 90%, rgba(198,147,130,.10), transparent 70%);
  animation:heroGlow 18s ease-in-out infinite alternate}
@keyframes heroGlow{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-6%,4%,0) scale(1.08)}}

.hero-in{opacity:0; transform:translateY(16px); animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes heroIn{to{opacity:1; transform:none}}

/* эмблема: рисуется линией, затем медленно «дышит» */
.emblem-hero .draw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.8s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.emblem-hero{animation:breathe 7s ease-in-out 2.4s infinite}
@keyframes breathe{0%,100%{transform:scale(1); filter:drop-shadow(0 0 0 rgba(156,82,64,0))}
  50%{transform:scale(1.025); filter:drop-shadow(0 0 18px rgba(156,82,64,.35))}}
.emblem-hero .ring2{transform-origin:100px 100px; animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* гравюры на внутренних страницах: проявляются и медленно «плывут» */
.art-in{opacity:0; animation:artIn 1.6s ease .2s forwards}
@keyframes artIn{to{opacity:1}}
.hero.small .edge-art img,.hero.small .band-art .sheet{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{scale:1} to{scale:1.07}}
.hero.small .mirror-art .sheet{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0} 50%{translate:0 -10px}}

/* полоса фактов и шаги работы */
.fact{border-left-color:transparent; position:relative}
.fact::before{content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px; background:var(--seal);
  transform:scaleY(0); transform-origin:top; transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .2s)}
.fact.in::before,.fact:not(.rv)::before{transform:scaleY(1)}
.rail > li .n{display:inline-block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rail > li:hover .n{transform:translateX(6px)}

/* --- кнопки --- */
.cta,.cta-2{transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(122,59,46,.3)}
.cta-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .35s ease, color .2s}
.cta-link:hover{background-size:100% 1px}

/* --- карточки форматов --- */
.card{position:relative; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:-2px; height:2px; width:100%;
  background:var(--seal-light); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover::before{transform:scaleX(1)}
.card .more{transition:transform .3s ease, background .25s, color .25s}
.card:hover .more{transform:translateX(6px)}
.card:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(35,44,56,.13)}

/* --- плитки на тёмном --- */
.tile{transition:transform .3s ease, box-shadow .3s ease, border-color .3s}
.tile:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25)}

/* --- цифры --- */
.stat b{font-variant-numeric:tabular-nums}
.stat{position:relative}
.stat::after{content:""; display:block; width:28px; height:2px; margin:14px auto 0; background:var(--seal-light);
  transform:scaleX(0); transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .5s)}
.stat.in::after{transform:scaleX(1)}

/* --- список экспертизы --- */
ul.def li{transition:background .3s ease}
ul.def li strong{background:linear-gradient(var(--seal-light),var(--seal-light)) 0 100%/0 2px no-repeat;
  transition:background-size .6s cubic-bezier(.2,.7,.2,1)}
ul.def li:hover strong{background-size:100% 2px}

/* --- контакты --- */
.socials .soc{transition:transform .25s ease, border-color .25s}
.socials .soc:hover{transform:translateY(-3px)}

/* =================== ВАРИАНТ B: ярче =================== */

/* полоса прогресса прокрутки */
html[data-alive] header::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; z-index:2;
  background:linear-gradient(90deg,var(--seal-light),var(--on-ink-accent));
  transform:scaleX(var(--prog,0)); transform-origin:left}

/* свечение, которое следует за курсором */
html[data-alive="b"] .hero.hero-ink::after,html[data-alive="b"] .hero.small::after{content:""; position:absolute; z-index:-1; pointer-events:none;
  width:560px; height:560px; left:var(--mx,70%); top:var(--my,50%); translate:-50% -50%;
  background:radial-gradient(circle, rgba(198,147,130,.16), transparent 65%);
  transition:left .6s ease-out, top .6s ease-out}
/* заголовок по словам */
html[data-alive="b"] .hero h1 .w{display:inline-block; opacity:0; transform:translateY(.5em) rotate(2deg);
  animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
html[data-alive="b"] .emblem-hero .ticks{transform-origin:100px 100px; animation:spin 90s linear infinite reverse}
html[data-alive="b"] .hero-mark svg{transition:translate .5s ease-out}

/* блик на кнопках */
html[data-alive] .cta{position:relative; overflow:hidden}
html[data-alive] .cta::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg)}
html[data-alive] .cta:hover::after{left:130%; transition:left .7s ease}

/* номера и «прожектор» на карточках */
html[data-alive="b"] .card .card-num{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(40px,3.6vw,56px); line-height:1; color:var(--seal-light); opacity:.55; margin-bottom:10px;
  transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1)}
html[data-alive="b"] .card:hover .card-num{opacity:1; transform:translateX(4px)}
html[data-alive] .card{background:
  radial-gradient(260px circle at var(--cx,50%) var(--cy,50%), rgba(156,82,64,.12), transparent 70%), var(--paper-2)}
html[data-alive] .card{transform-style:preserve-3d; will-change:transform}

/* фон тёмной секции — лёгкий параллакс */
html[data-alive="b"] .softbg .bg{will-change:translate}

/* бегущая строка компетенций */
.marquee{display:none}
html[data-alive] .marquee{display:block; overflow:hidden; margin:40px 0 8px; padding:18px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html[data-alive] .marquee-track{display:flex; width:max-content; animation:marq 60s linear infinite}
html[data-alive] .marquee:hover .marquee-track{animation-play-state:paused}
html[data-alive] .marquee span{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(22px,2vw,30px); color:var(--seal); white-space:nowrap; padding:0 22px}
html[data-alive] .marquee span::after{content:"✦"; font-style:normal; font-size:.5em; color:var(--seal-light);
  margin-left:44px; vertical-align:middle; opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* контакты: мягкое свечение фона */
html[data-alive="b"] .contact::before{content:""; position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(35% 45% at 20% 30%, rgba(156,82,64,.18), transparent 70%);
  animation:heroGlow 16s ease-in-out infinite alternate}

/* --- уважение к «уменьшить движение» --- */
@media (prefers-reduced-motion:reduce){
  .rv,.hero-in,html[data-alive="b"] .hero h1 .w{opacity:1!important; transform:none!important; animation:none!important; transition:none!important}
  .art-in,.hero.small .edge-art img,.hero.small .band-art .sheet,.hero.small .mirror-art .sheet,
  .emblem-hero,.emblem-hero *,.hero.hero-ink::before,.contact::before,.marquee-track{animation:none!important}
  .emblem-hero .draw{stroke-dashoffset:0}
}