/* ═══════════════════════════════════════════════════════════
   Simbioz AV — общая дизайн-система сайта («Cinema»).
   Единый источник цветов/переменных для лендинга и всех
   внутренних страниц (кабинет, кабинет мастера, админка и т.д.).
   Внутренние страницы получают тот же кинематографичный язык,
   что и главная: дисплейный шрифт Unbounded, зерно плёнки,
   виньетку, живое ядро из частиц (bg-fx.js), плавное появление
   карточек и переходы-шторки между страницами.
   ═══════════════════════════════════════════════════════════ */
/* Шрифты подключаются локально: assets/fonts/fonts.css (в <head> каждой страницы) */

:root{
  --void:#05070d; --obsidian:#0b101c; --panel:#10162a; --panel-hi:#182038;
  --hairline:#1f2840; --gold:#c9a86a; --gold-dim:#8a7548; --gold-glow:#e4c98a; --gold-hot:#fff1cf;
  --pearl:#eceff5; --silver:#9aa3b8; --slate:#5a637a;
  --emerald:#4fb286; --amber:#d99a4e; --ruby:#d65a6a;
  --display:'Unbounded','Manrope','Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --metal:linear-gradient(180deg,#fff3d6 0%,#e4c98a 38%,#b38f55 70%,#e9d29c 100%);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(70vmax 50vmax at 80% -10%,rgba(201,168,106,.10),transparent 60%),
    radial-gradient(60vmax 40vmax at -10% 110%,rgba(79,178,134,.05),transparent 60%),
    var(--void);
  background-attachment:fixed;
  color:var(--pearl);
  font-family:'Manrope','Segoe UI',-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--void)}
a{color:var(--gold);transition:color .3s}
a:hover{color:var(--gold-glow)}

/* Клавиатурная навигация — видимый фокус */
:focus-visible{outline:2px solid var(--gold-glow);outline-offset:3px}

/* Заголовки — дисплейный шрифт, плотный трекинг */
h1,h2{font-family:var(--display);letter-spacing:-.035em;line-height:1.12}
/* !important — единая «тонкая» подача заголовков, как на главной,
   поверх локальных стилей страниц */
h1{font-weight:300!important}
h3{letter-spacing:-.01em}

/* Плёночное зерно + виньетка поверх всего, клики не перехватывают */
body::before{
  content:"";position:fixed;inset:-100%;width:300%;height:300%;z-index:150;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:svGrain 1.2s steps(6) infinite;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(2,3,7,.7) 100%);
}
@keyframes svGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* Пульсирующий золотой ромб-логотип — используется во всех шапках сайта */
@keyframes brandPulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(201,168,106,.4))}
  50%{filter:drop-shadow(0 0 14px rgba(228,201,138,.85))}
}
.brand-mark{animation:brandPulse 3s ease-in-out infinite;display:inline-block}
.logo-mark,.auth-mark{animation:brandPulse 3s ease-in-out infinite}

/* Стеклянная карточка — универсальный "премиальный" контейнер. Граница
   с бегущим золотым бликом (conic-gradient + @property). */
@property --sv-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.glass-card{
  position:relative;
  background:
    linear-gradient(175deg,rgba(24,32,56,.82),rgba(10,14,26,.86)) padding-box,
    conic-gradient(from var(--sv-ang),rgba(34,43,66,.9) 0deg,rgba(228,201,138,.75) 50deg,rgba(34,43,66,.9) 120deg,rgba(34,43,66,.9) 360deg) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-radius:24px;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 90px -40px rgba(201,168,106,.35);
  animation:svBorder 7s linear infinite;
}
@keyframes svBorder{to{--sv-ang:360deg}}

/* Кинематографичное появление: карточки и формы «всплывают» из размытия */
@keyframes svRise{
  from{opacity:0;transform:translateY(34px) scale(.97);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.glass-card,.auth,.card,.dash.show,main > section,.doc > h2{
  animation-name:svRise,svBorder;
  animation-duration:1.1s,7s;
  animation-timing-function:var(--ease),linear;
  animation-iteration-count:1,infinite;
  animation-fill-mode:backwards,none;
}
.card,.auth,.dash.show,main > section,.doc > h2{animation-name:svRise;animation-duration:1.1s;animation-iteration-count:1}
.card:nth-child(2){animation-delay:.08s}
.card:nth-child(3){animation-delay:.16s}
.card:nth-child(4){animation-delay:.24s}
.card:nth-child(5){animation-delay:.32s}
.card:nth-child(n+6){animation-delay:.4s}

/* Кнопки: блик-пробег при наведении. Селекторы — общие имена классов страниц. */
.btn,.btn-primary,.modal-submit{position:relative;overflow:hidden;isolation:isolate}
.btn::after,.btn-primary::after,.modal-submit::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
}
.btn:hover::after,.btn-primary:hover::after,.modal-submit:hover::after{left:150%;transition:left .8s var(--ease)}
.btn:hover,.btn-primary:hover{box-shadow:0 12px 40px -12px rgba(228,201,138,.7)}

/* Поля ввода: мягкое золотое свечение фокуса */
input,select,textarea{transition:border-color .3s,box-shadow .3s,background .3s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(201,168,106,.13)}

/* Фоновое живое ядро (bg-fx.js) — на заднем плане, не мешает кликам */
.bg-fx-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.9;
}

/* Шторка перехода между страницами (создаётся bg-fx.js) */
.sv-curtain{position:fixed;inset:0;z-index:500;pointer-events:none}
.sv-curtain i{position:absolute;left:0;right:0;height:50.5%;background:var(--void);transition:transform .9s var(--ease)}
.sv-curtain i:first-child{top:0;transform:translateY(-100%)}
.sv-curtain i:last-child{bottom:0;transform:translateY(100%)}
.sv-curtain b{position:absolute;left:0;right:0;top:50%;height:1px;z-index:1;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent);
  box-shadow:0 0 24px var(--gold-glow);transform:scaleX(0);opacity:0;transition:transform .7s var(--ease),opacity .4s}
.sv-curtain.is-closed{pointer-events:all}
.sv-curtain.is-closed i{transform:none}
.sv-curtain.is-closed b{transform:scaleX(1);opacity:1}
.sv-curtain.is-intro i{transform:none;transition:none}

/* Тонкий скроллбар в цветах бренда */
*{scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  .brand-mark,.logo-mark,.auth-mark,.glass-card,body::before{animation:none}
  .glass-card,.auth,.card,.dash.show,main > section,.doc > h2{animation:none}
  .sv-curtain{display:none}
  html{scroll-behavior:auto}
}