@charset "UTF-8";
/* ============================================================
   premium.css — premium interactions & micro-animations
   Подключается после основных стилей на всех 10 страницах
   ============================================================ */

/* === 1. SCROLL PROGRESS BAR === */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--amagi),var(--scio),var(--althea));
  z-index:9999;transition:width .08s linear;
  box-shadow:0 0 12px var(--amagi);
  pointer-events:none;
}

/* === 2. CUSTOM CURSOR (desktop only) === */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;
  z-index:9998;border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px;height:6px;
  background:#fff;
  transition:width .25s,height .25s,background .25s;
}
.cursor-ring{
  width:36px;height:36px;
  border:1.5px solid rgba(255,255,255,.5);
  transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),border-color .3s,opacity .3s;
}
.cursor-ring.hover{
  width:56px;height:56px;
  border-color:var(--amagi);
  background:rgba(245,166,35,.08);
}
.cursor-dot.hover{
  width:4px;height:4px;
  background:var(--amagi);
}
@media(hover:none),(max-width:1023px){
  .cursor-dot,.cursor-ring{display:none!important}
}
@media(hover:hover) and (min-width:1024px){
  /* body{cursor:none} — ОТКЛЮЧЕНО: курсор должен быть виден */
  /* a,button,[role="button"],.clickable{cursor:none} — ОТКЛЮЧЕНО */
}

/* === 3. PAGE TRANSITION === */
.page-fade{
  position:fixed;inset:0;z-index:9997;
  background:var(--bg);
  pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.page-fade.out{opacity:1}
/* body.is-leaving{pointer-events:none} — ОТКЛЮЧЕНО: блокирует клики */

/* === 4. MAGNETIC BUTTONS === */
.magnetic{
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.magnetic.magnetic-active{transform:translate(var(--mx,0),var(--my,0))}

/* === 5. HERO GRADIENT FLOW === */
.gradient-flow{
  background-size:200% 200%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:gradient-flow 8s ease infinite;
}
@keyframes gradient-flow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* === 6. REVEAL ON SCROLL === */
.reveal{
  opacity:1 !important;
  transform:none !important;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal-stagger.in-view > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.40s}

/* === 7. LIVE STATUS DOT === */
.live-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--althea);
  position:relative;
  flex-shrink:0;
}
.live-dot::before{
  content:"";position:absolute;inset:-4px;
  border-radius:50%;background:var(--althea);
  opacity:.4;
  animation:live-pulse 2s ease-out infinite;
}
@keyframes live-pulse{
  0%{transform:scale(.8);opacity:.6}
  100%{transform:scale(2.2);opacity:0}
}
.live-dot.amagi{background:var(--amagi)}
.live-dot.amagi::before{background:var(--amagi)}
.live-dot.scio{background:var(--scio)}
.live-dot.scio::before{background:var(--scio)}
.live-dot.ctc{background:var(--ctc)}
.live-dot.ctc::before{background:var(--ctc)}

/* === 8. COUNT-UP === */
[data-count]{
  font-variant-numeric:tabular-nums;
}

/* === 9. MARQUEE === */
.marquee{
  display:flex;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;gap:48px;
  animation:marquee 30s linear infinite;
  flex-shrink:0;padding-right:48px;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
.marquee:hover .marquee-track{animation-play-state:paused}

/* === 10. CARD HOVER GLOW === */
.glow-card{
  position:relative;
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s;
}
.glow-card::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),var(--amagi),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.glow-card:hover::before{opacity:1}
.glow-card:hover{transform:translateY(-2px);border-color:var(--line2)}

/* === 11. TYPOGRAPHY SPLIT (char-by-char) === */
.split-text .char{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  transition:opacity .5s,transform .5s;
}
.split-text.in-view .char{
  opacity:1;
  transform:translateY(0);
}

/* === 12. SHIMMER (skeleton) === */
.shimmer{
  background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 50%,var(--s1) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* === 13. NAV UNDERLINE GROW + DROPDOWN ARROW === */
.menu a{
  position:relative;
}
.menu a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;
  height:1px;background:var(--scio);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}

/* Dropdown arrow indicator — shows that menu item is expandable */
.menu-item-dropdown > a::after{
  content:"▾";font-size:9px;margin-left:6px;
  color:var(--faint);
  display:inline-block;
  transition:transform .2s,color .2s;
  /* Override the underline rule above for dropdown parents */
  position:static;left:auto;right:auto;bottom:auto;
  width:auto;height:auto;background:transparent;
  transform:none;
}
.menu-item-dropdown:hover > a::after{
  transform:rotate(180deg);
  color:var(--scio);
}
/* Active page highlight — persistent underline on current page's menu item */
.menu a.active{
  color:var(--text);
  font-weight:600;
}

/* === 14. NAV DROPDOWN HOVER FIX === */
/* Problem: .menu-item-dropdown was position:static, causing .menu-dropdown
   to position relative to <header> instead of the parent <a>. This created
   an 18px gap where :hover was lost, making the dropdown close before the
   user could click a subitem. */
.menu-item-dropdown{
  position:relative;
}

/* Transparent bridge: extends the hoverable area 12px above the dropdown
   to prevent :hover loss when moving the mouse from parent to dropdown. */
.menu-dropdown::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  right:0;
  height:12px;
}

/* Delay visibility:hidden by 150ms so the dropdown stays interactive
   during the opacity fade-out. This gives the user a grace period to
   move the mouse back if they briefly leave the hover area. */
.menu-dropdown{
  transition:opacity .2s, transform .2s, visibility 0s .15s;
}
.menu-item-dropdown:hover .menu-dropdown{
  transition:opacity .2s, transform .2s, visibility 0s;
}

/* === 15. BUTTON RIPPLE === */
.btn{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:scale(0);
  animation:ripple .6s linear;
  pointer-events:none;
}
@keyframes ripple{
  to{transform:scale(4);opacity:0}
}

/* === 15. REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1 !important;transform:none !important}.reveal,.reveal-stagger > *{opacity:1;transform:none}
  .cursor-dot,.cursor-ring{display:none}
  body{cursor:auto}
}

/* === FOOTER STYLES (extracted from consent.html, applied to all pages) === */
footer { background:var(--bg2);border-top:1px solid var(--line);padding:48px 0 24px }
.foot-grid { display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px }
.foot-brand .brand { margin-bottom:14px }
.foot-brand p { font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px }
.foot-col h5 { font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:500 }
.foot-col a { display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:.15s }
.foot-col a:hover { color:var(--amagi) }
.socials { display:flex;gap:6px;flex-wrap:wrap }
.plnk { padding:5px 10px;border:1px solid var(--line2);border-radius:6px;font-size:11px;color:var(--muted);transition:.15s;text-decoration:none;display:inline-block }
.plnk:hover { color:var(--scio);border-color:var(--scio) }
.foot-bottom { padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap }
.foot-legal { font-family:var(--mono);font-size:10px;letter-spacing:.06em }
.foot-legal a { color:var(--scio) }
.foot-legal a:hover { color:var(--amagi) }
/* v91 (27.08): этим правилам возвращена мобильная обёртка — глобальный
   grid-column:1/-1 ломал десктоп (бренд на всю строку, колонки сбиты влево) */
@media (max-width:768px){
  .foot-brand { grid-column:1/-1 }
  .foot-bottom { flex-direction:column;align-items:flex-start }
}
.legal-footer { margin-top:48px;padding:24px;background:var(--s1);border-radius:8px;border-left:3px solid var(--amagi);font-size:13px;color:var(--muted);text-align:center }
/* === v5.4: Universal hover + card effects === */
.card,.news-card,.nc-body,.sf-card,.dom,.tl-card,.sci-item,.faq-item,
.inv-item,.compare-row,.plnk,.biz-name,.contact-item { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }

/* === MOBILE OPTIMIZATION (v8, 2026-08-11) === */
/* User: «Поправь что бы выглядело нормально это вид с мобильного» */
/* Проблема: footer 4 колонки → текст ломается по слогам на мобильном */

/* Tablet и Mobile: 768px и меньше */
@media (max-width: 768px) {
  /* === FOOTER: 4 колонки → 1 колонка === */
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }
  
  .foot-brand {
    grid-column: 1 !important;
    text-align: center;
  }
  
  .foot-brand .brand {
    justify-content: center;
    margin-bottom: 12px;
  }
  
  .foot-brand p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  
  /* QR-код — центрировать */
  .foot-brand > div[style*="margin-bottom:14px"] {
    margin: 0 auto 16px !important;
    text-align: center;
  }
  
  /* Socials — центрировать */
  .socials {
    justify-content: center;
    gap: 6px;
  }
  
  .plnk {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  /* Колонки меню — центрировать */
  .foot-col {
    text-align: center;
  }
  
  .foot-col h5 {
    font-size: 11px;
    margin-bottom: 10px;
    margin-top: 8px;
  }
  
  .foot-col a {
    font-size: 14px;
    padding: 6px 0;
    white-space: nowrap;
  }
  
  /* Bottom legal — центрировать, увеличить шрифт */
  .foot-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 12px !important;
    padding-top: 20px;
  }
  
  .foot-legal {
    font-size: 11px !important;
    text-align: center;
    line-height: 1.6;
  }
  
  .foot-legal br + span {
    display: block;
    margin-top: 4px;
  }
  
  footer {
    padding: 32px 0 24px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* === НОВОСТИ: обрезать длинные названия источников === */
  .news-item,
  .nc-source,
  .news-source {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  
  .news-item {
    grid-template-columns: 60px 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  
  .nc-source,
  [class*="source"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100% !important;
    display: inline-block;
  }
  
  /* === КАРТОЧКИ НОВОСТЕЙ: адаптивные === */
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .news-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  .nc-thumb {
    height: 160px !important;
  }
  
  .nc-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .nc-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  .nc-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .nc-source {
    max-width: 70% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* === BODY: убрать горизонтальный скролл === */
  body {
    overflow-x: hidden;
  }
  
  .wrap, main, section {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  
  /* === SAFE AREA для iOS (iPhone X+) === */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* === Чат-виджет: не перекрывать контент === */
  .chat-widget,
  [class*="chat-fab"],
  [id*="chat-fab"] {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  
  /* === Кнопки фильтров новостей === */
  .news-filters,
  .news-filter {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .news-filter {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}

/* Очень маленькие экраны: 480px и меньше */
@media (max-width: 480px) {
  .foot-col a {
    font-size: 13px;
    padding: 5px 0;
  }
  
  .plnk {
    font-size: 11px;
    padding: 5px 8px;
  }
  
  .nc-title {
    font-size: 14px !important;
  }
  
  .news-item {
    grid-template-columns: 50px 1fr !important;
    padding: 10px !important;
  }
/* @media(max-width:480px) continues — removed premature close */
  
  /* === index.html .news-item — обрезать длинные источники === */
  .news-item .ni-src {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    font-size: 10px !important;
  }
  
  .news-item .ni-title {
    font-size: 13px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .news-item .ni-summary {
    font-size: 11px !important;
  }
  
  /* === Заголовок страницы новостей === */
  .news-hero h1 {
    font-size: 1.75rem !important;
  }
  
  .news-hero p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  
  /* === Статистика новостей === */
  .news-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .news-stat .num {
    font-size: 1.25rem !important;
  }
  
  /* === Поиск и фильтры === */
  .news-search input {
    width: 100% !important;
    font-size: 14px !important;
  }
  
  .news-controls .wrap {
    flex-direction: column;
    gap: 12px;
  }
  
  /* === legal-footer блок === */
  .legal-footer {
    margin-top: 24px !important;
    padding: 16px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
}

/* Очень маленькие экраны: 380px и меньше */
@media (max-width: 380px) {
  .news-stats {
    grid-template-columns: 1fr !important;
  }
  
  .news-item {
    grid-template-columns: 50px 1fr !important;
    padding: 10px !important;
  }
  
  .news-item .ni-thumb {
    width: 50px !important;
    height: 50px !important;
  }
  
  .foot-col a {
    font-size: 12px;
  }
}