/* KvestZania - магия. Эффекты, которые делают сайт живым, но не грузят телефон:
   анимируем только transform, opacity и зарегистрированные @property, тяжёлое - только на ПК.
   Всё выключается системной настройкой "меньше движения". */

/* ================================================================ кнопка shiny
   Световой луч бежит по контуру, точечная сетка и блик внутри.
   Идея - shiny CTA Райана Маллигана, как на beautybureaui.ru, перекрашена в золото квеста. */
@property --sh-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --sh-offset{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --sh-percent{syntax:"<percentage>";initial-value:5%;inherits:false}
@property --sh-shine{syntax:"<color>";initial-value:#fff;inherits:false}

.shiny{
  --sh-bg:#050a07;
  --sh-bg-subtle:#1b1a14;
  --sh-hl:#F2BE5C;
  --sh-hl-subtle:#3FE09B;
  --sh-dur:3s;
  --sh-anim:sh-angle linear infinite;
  isolation:isolate;position:relative;overflow:hidden;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 34px;border:1px solid transparent;border-radius:999px;
  font:inherit;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:.01em;color:#fff;text-align:center;
  background:
    linear-gradient(var(--sh-bg),var(--sh-bg)) padding-box,
    conic-gradient(from calc(var(--sh-angle) - var(--sh-offset)),
      transparent,var(--sh-hl) var(--sh-percent),var(--sh-shine) calc(var(--sh-percent) * 2),
      var(--sh-hl) calc(var(--sh-percent) * 3),transparent calc(var(--sh-percent) * 4)) border-box;
  box-shadow:inset 0 0 0 1px var(--sh-bg-subtle),0 10px 34px rgba(242,190,92,.16);
  transition:800ms cubic-bezier(.25,1,.5,1);
  transition-property:--sh-offset,--sh-percent,--sh-shine,box-shadow;
}
.shiny::before,.shiny::after,.shiny > span::before{
  content:'';pointer-events:none;position:absolute;
  inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1;
}
.shiny:active{translate:0 1px}
/* точечная сетка, проявляется вслед за лучом */
.shiny::before{
  --size:calc(100% - 6px);--pos:2px;--space:calc(var(--pos) * 2);
  width:var(--size);height:var(--size);
  background:radial-gradient(circle at var(--pos) var(--pos),#fff calc(var(--pos) / 4),transparent 0) padding-box;
  background-size:var(--space) var(--space);background-repeat:space;
  mask-image:conic-gradient(from calc(var(--sh-angle) + 45deg),#000,transparent 10% 90%,#000);
  border-radius:inherit;opacity:.4;
}
/* внутренний блик */
.shiny::after{
  --sh-anim:sh-shimmer linear infinite;
  width:100%;aspect-ratio:1;
  background:linear-gradient(-50deg,transparent,var(--sh-hl),transparent);
  mask-image:radial-gradient(circle at bottom,transparent 40%,#000);
  opacity:.55;
}
.shiny > span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px}
.shiny > span svg{color:var(--sh-hl);flex-shrink:0;stroke-width:1.95}
/* подсветка снизу при наведении - тенью самой кнопки, по её скруглению (подложка у подписи рисовала прямоугольник) */
.shiny > span::before{display:none}
.shiny,.shiny::before,.shiny::after{
  animation:var(--sh-anim) var(--sh-dur),var(--sh-anim) calc(var(--sh-dur) / .4) reverse paused;
  animation-composition:add;
}
.shiny:is(:hover,:focus-visible){
  --sh-percent:20%;--sh-offset:95deg;--sh-shine:var(--sh-hl-subtle);
  box-shadow:inset 0 0 0 1px var(--sh-bg-subtle),inset 0 -14px 26px -10px rgba(242,190,92,.55),0 14px 44px rgba(242,190,92,.3);
}
.shiny:is(:hover,:focus-visible),.shiny:is(:hover,:focus-visible)::before,.shiny:is(:hover,:focus-visible)::after{animation-play-state:running}
.shiny:is(:hover,:focus-visible) > span::before{opacity:1}
/* вне экрана луч останавливаем - не тратим кадры телефона */
.shiny.is-off,.shiny.is-off::before,.shiny.is-off::after,.shiny.is-off > span::before{animation-play-state:paused}
.shiny--wide{width:100%}
.shiny--sm{padding:12px 22px;font-size:15px}
@keyframes sh-angle{to{--sh-angle:360deg}}
@keyframes sh-shimmer{to{rotate:360deg}}
@keyframes sh-breathe{from,to{scale:1}50%{scale:1.2}}

/* ================================================================ обычная кнопка: блик по наведению */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;z-index:1;
}
.btn:hover::after{left:135%}
.btn--ghost::after,.btn--glass::after{background:linear-gradient(100deg,transparent,rgba(242,190,92,.22),transparent)}
.btn > *{position:relative;z-index:2}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:scale(1.12) rotate(-6deg)}

/* ================================================================ свет за курсором на карточках (только мышь) */
@media (hover:hover) and (pointer:fine){
  .fx-spot{--mx:50%;--my:50%}
  .fx-spot::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
    background:radial-gradient(360px circle at var(--mx) var(--my),rgba(242,190,92,.16),transparent 45%);
    opacity:0;transition:opacity .3s;
  }
  .fx-spot:hover::after{opacity:1}
}

/* ================================================================ бегущая рамка у пакета ХИТ */
@property --ring{syntax:"<angle>";initial-value:0deg;inherits:false}
.pc.is-hit::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ring),rgba(242,190,92,.15),var(--gold) 12%,var(--gold-lt) 18%,rgba(242,190,92,.15) 30%,rgba(20,184,119,.5) 62%,rgba(242,190,92,.15) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ring-spin 6s linear infinite;
}
@keyframes ring-spin{to{--ring:360deg}}

/* ================================================================ появление при прокрутке */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
/* дети с задержкой волной */
.js .stagger > *{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .is-in .stagger > *,.js .stagger.is-in > *{opacity:1;transform:none}
.stagger > *:nth-child(2){transition-delay:.07s}
.stagger > *:nth-child(3){transition-delay:.14s}
.stagger > *:nth-child(4){transition-delay:.21s}
.stagger > *:nth-child(5){transition-delay:.28s}
.stagger > *:nth-child(6){transition-delay:.35s}
.stagger > *:nth-child(7){transition-delay:.42s}
.stagger > *:nth-child(8){transition-delay:.49s}
.stagger > *:nth-child(9){transition-delay:.56s}
.stagger > *:nth-child(10){transition-delay:.63s}

/* ================================================================ искры у заголовка */
.spark{position:absolute;pointer-events:none;color:var(--gold-lt);opacity:0;z-index:2}
.spark svg{display:block;filter:drop-shadow(0 0 8px rgba(255,215,110,.9))}
@keyframes sparkle{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  35%{opacity:1;transform:scale(1) rotate(25deg)}
  70%{opacity:.25;transform:scale(.75) rotate(45deg)}
}
.spark--1{top:-14px;right:30%;animation:sparkle 4.2s ease-in-out infinite .2s}
.spark--2{bottom:4px;right:8%;animation:sparkle 5.1s ease-in-out infinite 1.4s}
.spark--3{top:30%;left:-18px;animation:sparkle 4.6s ease-in-out infinite 2.6s}

/* ================================================================ светлячки */
.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.motes i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,170,1),rgba(255,205,110,0) 70%);
  animation:float-up linear infinite;will-change:transform,opacity;
}
.motes--green i{background:radial-gradient(circle,rgba(120,255,190,1),rgba(20,184,119,0) 70%)}
@keyframes float-up{
  0%{transform:translate3d(0,30px,0) scale(.6);opacity:0}
  15%{opacity:.9}
  50%{transform:translate3d(18px,-140px,0) scale(1)}
  85%{opacity:.5}
  100%{transform:translate3d(-10px,-300px,0) scale(1.1);opacity:0}
}
.motes i:nth-child(1){left:6%;bottom:8%;width:7px;height:7px;animation-duration:15s}
.motes i:nth-child(2){left:18%;bottom:26%;width:4px;height:4px;animation-duration:19s;animation-delay:2.5s}
.motes i:nth-child(3){left:33%;bottom:6%;width:9px;height:9px;animation-duration:17s;animation-delay:5s}
.motes i:nth-child(4){left:52%;bottom:30%;width:5px;height:5px;animation-duration:21s;animation-delay:1.2s}
.motes i:nth-child(5){left:66%;bottom:12%;width:8px;height:8px;animation-duration:16s;animation-delay:6.5s}
.motes i:nth-child(6){left:80%;bottom:34%;width:4px;height:4px;animation-duration:20s;animation-delay:3.7s}
.motes i:nth-child(7){left:91%;bottom:16%;width:7px;height:7px;animation-duration:18s;animation-delay:8s}
.motes i:nth-child(8){left:44%;bottom:44%;width:5px;height:5px;animation-duration:23s;animation-delay:4.4s}
@media (max-width:700px){.motes i:nth-child(n+6){display:none}}

/* ================================================================ дымка: два слоя тумана плывут навстречу */
.fog{position:absolute;inset:auto 0 0;height:60%;pointer-events:none;z-index:1;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 50%);mask:linear-gradient(180deg,transparent,#000 50%)}
.fog::before,.fog::after{
  content:'';position:absolute;inset:0 -50% 0 -50%;
  background:
    radial-gradient(30% 45% at 20% 70%,rgba(200,230,215,.10),transparent 70%),
    radial-gradient(25% 40% at 55% 80%,rgba(200,230,215,.08),transparent 70%),
    radial-gradient(35% 50% at 85% 65%,rgba(200,230,215,.09),transparent 70%);
  animation:fog-drift 38s linear infinite alternate;will-change:transform;
}
.fog::after{animation-duration:52s;animation-direction:alternate-reverse;opacity:.8;transform:scaleX(-1)}
@keyframes fog-drift{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(12%,0,0)}}

/* ================================================================ полоса с параллаксом (как на rma63.ru)
   Фон движется медленнее прокрутки под полупрозрачной вуалью. На ПК - background-attachment:fixed,
   на телефоне - сдвиг transform из fx.js (fixed там или не работает, или тормозит). */
.band{position:relative;overflow:hidden;isolation:isolate;color:#f1ece0}
.band__bg{position:absolute;inset:-22% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.band::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(4,14,10,.92),rgba(3,126,78,.45) 55%,rgba(149,23,54,.55));}
.band::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(4,10,7,.55),transparent 75%)}
.band__in{padding-block:clamp(70px,9vw,120px);text-align:center;display:grid;justify-items:center;gap:16px}
.band__in h2{max-width:20em;margin:0}
.band__txt{max-width:40em;font-size:18px;color:rgba(241,236,224,.85);margin:0}
/* медальон стыка перенесён в seam() - assets/css/scenes.css */
@supports (background-attachment:fixed){
  @media (hover:hover) and (min-width:900px){
    .band__bg{inset:0;background-attachment:fixed;will-change:auto}
  }
}

/* ================================================================ медальон: золотая монета с иконкой
   Объёмные значки без картинок: кольцо из градиента, внутренняя тень, блик сверху */
.medal{
  --m:56px;
  position:relative;flex-shrink:0;display:grid;place-items:center;
  width:var(--m);height:var(--m);border-radius:50%;
  color:var(--gold-lt);
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.18),transparent 45%),
    radial-gradient(circle at 50% 60%,#1c3a2b,#07130d 70%);
  box-shadow:
    0 0 0 2px #0a150f,
    0 0 0 3.5px rgba(242,190,92,.9),
    0 0 0 6px rgba(242,190,92,.14),
    inset 0 -6px 12px rgba(0,0,0,.6),
    inset 0 3px 6px rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.5),
    0 0 26px rgba(242,190,92,.18);
}
.medal svg{width:46%;height:46%;stroke-width:1.7;filter:drop-shadow(0 0 6px rgba(255,215,130,.6)) drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.medal--wine{color:#ffd0dc;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.18),transparent 45%),radial-gradient(circle at 50% 60%,#4a1224,#12050a 70%)}
.medal--green{color:#c9ffe6;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.2),transparent 45%),radial-gradient(circle at 50% 60%,#0f6b45,#04160e 70%)}
.medal--lg{--m:78px}
.medal--sm{--m:44px}
/* медальон с картинкой внутри - как значки-предметы в референсе */
.medal--pic{background:#0a150f;overflow:hidden}
.medal--pic img{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.02)}
.medal--pic::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -8px 16px rgba(0,0,0,.55),inset 0 4px 8px rgba(255,255,255,.18)}
@media (hover:hover){
  .medal{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  *:hover > .medal,.medal:hover{transform:translateY(-3px) rotate(-8deg) scale(1.05)}
}

/* ================================================================ бегущая строка */
.marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee.is-off .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ================================================================ бережно к тем, кто просил меньше движения */
@media (prefers-reduced-motion:reduce){
  .motes,.spark,.fog{display:none}
  .shiny,.shiny::before,.shiny::after,.shiny > span::before,.pc.is-hit::before,.marquee__track{animation:none}
  .btn::after{transition:none}
  .js .reveal,.js .stagger > *{opacity:1;transform:none;transition:none}
}