/* ============================================================
   VABLOG NEWS — Yellow/Orange Neon + Liquid Glass
============================================================ */

/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
  --bg:           #0a0900;
  --bg2:          #0f0e00;
  --surface:      rgba(255,200,0,0.06);
  --surface-hover:rgba(255,200,0,0.10);
  --border:       rgba(255,180,0,0.12);
  --border-light: rgba(255,200,0,0.22);

  --neon:         #ffb800;
  --neon2:        #ff6a00;
  --neon-glow:    0 0 20px rgba(255,184,0,.5), 0 0 40px rgba(255,106,0,.3);
  --neon-glow-sm: 0 0 10px rgba(255,184,0,.4);

  --tg:           #229ed9;
  --online:       #ffb800;
  --text:         #fff8e7;
  --text2:        rgba(255,248,231,0.75);
  --muted:        rgba(255,248,231,0.4);

  --font:         'Inter', system-ui, sans-serif;
  --r:            16px;
  --r-sm:         10px;
  --r-pill:       100px;
  --blur:         saturate(180%) blur(20px);
  --blur-heavy:   saturate(200%) blur(40px);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,200,0,.1);
  --shadow-card:  0 4px 24px rgba(0,0,0,.6);
  --t:            0.28s cubic-bezier(0.4,0,0.2,1);
  --t-spring:     0.45s cubic-bezier(0.34,1.56,0.64,1);
}

/* ===== СБРОС ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Фоновая сетка */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,184,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,184,0,.03) 1px, transparent 1px);
  background-size:60px 60px;
}
img{display:block;width:100%;height:auto;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

/* ===== КОНТЕЙНЕР ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ===== LIQUID GLASS ===== */
.glass{
  background:var(--surface);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  box-shadow:var(--shadow-glass);
}

/* ===== КНОПКИ ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:700;letter-spacing:.02em;
  transition:transform var(--t-spring),box-shadow var(--t),background var(--t);
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn:hover{transform:scale(1.05) translateY(-1px)}
.btn:active{transform:scale(0.97)}

.btn--primary{
  background:linear-gradient(135deg,var(--neon),var(--neon2));
  color:#000;font-weight:800;
  box-shadow:var(--neon-glow);
}
.btn--primary:hover{box-shadow:0 0 30px rgba(255,184,0,.7),0 0 60px rgba(255,106,0,.4)}

.btn--glass{
  background:var(--surface);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  color:var(--text);border:1px solid var(--border-light);
  box-shadow:var(--shadow-glass);
}
.btn--glass:hover{background:var(--surface-hover);box-shadow:var(--neon-glow-sm)}

.btn--outline{
  background:transparent;color:var(--neon);
  border:1.5px solid var(--neon);
  box-shadow:var(--neon-glow-sm);
}
.btn--outline:hover{background:rgba(255,184,0,.1);box-shadow:var(--neon-glow)}

.btn--tg{
  background:linear-gradient(135deg,var(--tg),#1a8bbf);
  color:#fff;box-shadow:0 4px 20px rgba(34,158,217,.35);
}

.news-time{font-size:.75rem;color:var(--muted)}
.news-views{font-size:.75rem;color:var(--muted)}
.no-news{color:var(--muted);text-align:center;padding:60px 0;grid-column:1/-1}

/* ===== DYNAMIC ISLAND ХЕДЕР ===== */
.header{position:sticky;top:0;z-index:200;padding:10px 0}
.di-island{position:relative;margin:0 auto;max-width:1200px;padding:0 20px;display:flex;align-items:center;gap:12px}
.di-capsule{
  flex:1;display:flex;align-items:center;gap:16px;padding:10px 20px;
  border-radius:var(--r-pill);
  background:rgba(10,9,0,0.88);
  backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);
  border:1px solid var(--border-light);
  box-shadow:0 8px 32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,200,0,.12);
  transition:box-shadow var(--t);
}
.header.scrolled .di-capsule{box-shadow:0 0 0 1px rgba(255,184,0,.2),0 16px 48px rgba(0,0,0,.8),var(--neon-glow-sm)}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--neon),var(--neon2));
  color:#000;font-size:1rem;font-weight:900;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--neon-glow-sm);animation:logoPulse 3s ease infinite;flex-shrink:0;
}
.logo__text{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.logo__news{color:var(--neon)}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav__link{padding:6px 14px;border-radius:var(--r-pill);font-size:.83rem;font-weight:500;color:var(--muted);transition:color var(--t),background var(--t),box-shadow var(--t);white-space:nowrap}
.nav__link:hover{color:var(--neon);background:rgba(255,184,0,.08)}
.nav__link--active{color:var(--neon);background:rgba(255,184,0,.1);box-shadow:inset 0 0 12px rgba(255,184,0,.1)}
.header__actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.header__date{font-size:.72rem;color:var(--muted);white-space:nowrap}
.online-badge{
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.25);
  font-size:.75rem;font-weight:600;color:var(--neon);white-space:nowrap;
}
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--neon);animation:onlinePulse 2s ease infinite}
.header__tg-link{
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(34,158,217,.1);border:1px solid rgba(34,158,217,.25);
  color:var(--tg);font-size:.75rem;font-weight:600;transition:background var(--t),transform var(--t);
}
.header__tg-link:hover{background:rgba(34,158,217,.2);transform:scale(1.04)}
.search-btn{
  width:36px;height:36px;border-radius:50%;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,184,0,.06);border:1px solid var(--border);
  transition:color var(--t),background var(--t),transform var(--t-spring);
}
.search-btn:hover{color:var(--neon);background:rgba(255,184,0,.12);transform:scale(1.1);box-shadow:var(--neon-glow-sm)}
.burger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,184,0,.06);border:1px solid var(--border)}
.burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav--mobile{display:none;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 8px);left:20px;right:20px;padding:12px;border-radius:var(--r);background:rgba(10,9,0,.97);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border-light);box-shadow:var(--shadow-card);animation:slideDown .2s ease}
.nav--mobile.open{display:flex}
.nav--mobile .nav__link{padding:10px 16px;border-radius:var(--r-sm)}
.search-bar{display:none;position:absolute;top:calc(100% + 8px);left:20px;right:20px;padding:12px 16px;border-radius:var(--r);background:rgba(10,9,0,.97);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border-light);box-shadow:var(--shadow-card);animation:slideDown .2s ease}
.search-bar.open{display:flex;gap:12px;align-items:center}
.search-bar__input{flex:1;background:rgba(255,184,0,.06);border:1px solid var(--border);border-radius:var(--r-pill);padding:9px 18px;color:var(--text);font-size:.9rem;font-family:var(--font);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.search-bar__input:focus{border-color:var(--neon);box-shadow:var(--neon-glow-sm)}
.search-bar__close{color:var(--muted);font-size:1rem;padding:6px;border-radius:50%;transition:color var(--t)}
.search-bar__close:hover{color:var(--neon)}

/* ===== ТИКЕР ===== */
.ticker{display:flex;align-items:center;margin:8px 20px;border-radius:var(--r-pill);overflow:hidden;height:34px;background:rgba(255,184,0,.08);border:1px solid rgba(255,184,0,.2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.ticker__label{flex-shrink:0;background:linear-gradient(135deg,var(--neon),var(--neon2));color:#000;font-size:.68rem;font-weight:800;letter-spacing:.12em;padding:0 16px;height:100%;display:flex;align-items:center;border-radius:var(--r-pill) 0 0 var(--r-pill)}
.ticker__track{flex:1;overflow:hidden}
.ticker__inner{display:flex;gap:80px;white-space:nowrap;animation:ticker 35s linear infinite;color:var(--neon);font-size:.78rem;font-weight:500}
.ticker__inner span::before{content:'●  '}

/* ===== MAIN + HERO ===== */
.main{padding:24px 0 80px;position:relative;z-index:1}
.hero-news{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-bottom:32px}
.hero-news__main{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform var(--t-spring),box-shadow var(--t)}
.hero-news__main:hover{transform:scale(1.01);box-shadow:0 0 40px rgba(255,184,0,.2),0 24px 60px rgba(0,0,0,.7)}
.hero-news__img-wrap{position:relative;height:100%;min-height:420px}
.hero-news__img{height:100%;min-height:420px;transition:transform .6s ease}
.hero-news__main:hover .hero-news__img{transform:scale(1.04)}
.hero-news__img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,0,.95) 0%,rgba(10,9,0,.5) 50%,transparent 100%)}
.hero-news__category{position:absolute;top:16px;left:16px;z-index:2;padding:4px 12px;border-radius:var(--r-pill);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#000;background:linear-gradient(135deg,var(--neon),var(--neon2));box-shadow:var(--neon-glow-sm)}
.hero-news__body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:28px}
.hero-news__meta{display:flex;gap:12px;margin-bottom:10px}
.hero-news__title{font-size:1.55rem;font-weight:800;line-height:1.25;margin-bottom:12px;letter-spacing:-.03em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.hero-news__lead{color:var(--text2);font-size:.9rem;margin-bottom:20px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-news__side{display:flex;flex-direction:column;gap:12px}
.side-card{position:relative;border-radius:var(--r);overflow:hidden;flex:1;cursor:pointer;min-height:120px;transition:transform var(--t-spring),box-shadow var(--t)}
.side-card:hover{transform:scale(1.02) translateX(4px);box-shadow:0 0 20px rgba(255,184,0,.15),0 12px 32px rgba(0,0,0,.6)}
.side-card__img{height:100%;min-height:120px;transition:transform .5s ease}
.side-card:hover .side-card__img{transform:scale(1.06)}
.side-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,0,.9) 0%,rgba(10,9,0,.3) 60%,transparent 100%)}
.side-card__body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:12px 14px}
.side-card__cat{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;display:block;color:var(--neon)}
.side-card__title{font-size:.85rem;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== ФИЛЬТРЫ ===== */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.filter-btn{padding:7px 18px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--muted);border:1px solid var(--border);background:transparent;transition:all var(--t-spring)}
.filter-btn:hover{color:var(--neon);border-color:rgba(255,184,0,.4);background:rgba(255,184,0,.06);transform:scale(1.04)}
.filter-btn--active{background:rgba(255,184,0,.12);color:var(--neon);border-color:rgba(255,184,0,.35);box-shadow:var(--neon-glow-sm)}

/* ===== КАРТОЧКИ ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.news-card{border-radius:var(--r);overflow:hidden;background:rgba(255,184,0,.04);border:1px solid var(--border);display:flex;flex-direction:column;cursor:pointer;transition:transform var(--t-spring),box-shadow var(--t),background var(--t)}
.news-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 0 24px rgba(255,184,0,.12),0 16px 40px rgba(0,0,0,.6);background:rgba(255,184,0,.07)}
.news-card__img-link{position:relative;display:block;overflow:hidden}
.news-card__img{height:190px;transition:transform .5s ease}
.news-card:hover .news-card__img{transform:scale(1.06)}
.news-card__cat{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:var(--r-pill);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#000;background:linear-gradient(135deg,var(--neon),var(--neon2));box-shadow:var(--neon-glow-sm)}
.news-card__body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px}
.news-card__title{font-size:.95rem;font-weight:700;line-height:1.4;flex:1;transition:color var(--t);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card:hover .news-card__title{color:var(--neon)}
.news-card__excerpt{font-size:.8rem;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.load-more-wrap{text-align:center;margin-bottom:60px}

/* ===== СКЕЛЕТОНЫ ===== */
@keyframes shimmer{0%{background-position:-800px 0}100%{background-position:800px 0}}
.skeleton{background:linear-gradient(90deg,rgba(255,184,0,.03) 25%,rgba(255,184,0,.07) 50%,rgba(255,184,0,.03) 75%);background-size:1600px 100%;animation:shimmer 1.6s infinite;border-radius:var(--r-sm)}
.skeleton--img{height:420px;border-radius:var(--r) var(--r) 0 0}
.skeleton--img-card{height:190px;border-radius:0}
.skeleton--side{height:100%;min-height:120px;border-radius:var(--r)}
.skeleton--line{height:14px;margin-bottom:10px;border-radius:4px}
.skeleton-card{background:rgba(255,184,0,.03);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.skeleton-card__body{padding:16px}

/* ===== TG БАННЕР ===== */
.tg-banner{padding:56px 0;background:linear-gradient(135deg,rgba(34,158,217,.08) 0%,transparent 60%);border-top:1px solid rgba(34,158,217,.12);border-bottom:1px solid rgba(34,158,217,.12)}
.tg-banner__inner{display:flex;align-items:center;gap:28px;padding:36px 40px;border-radius:var(--r);background:rgba(34,158,217,.06);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(34,158,217,.18);box-shadow:0 8px 32px rgba(34,158,217,.08)}
.tg-banner__icon{color:var(--tg);flex-shrink:0}
.tg-banner__text{flex:1}
.tg-banner__text h2{font-size:1.35rem;font-weight:800;margin-bottom:6px}
.tg-banner__text p{color:var(--muted);font-size:.88rem}

/* ===== ФУТЕР ===== */
.footer{background:rgba(255,184,0,.02);border-top:1px solid var(--border);padding:56px 0 28px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer__brand .logo{margin-bottom:14px}
.footer__desc{font-size:.83rem;color:var(--muted);line-height:1.7}
.footer__col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px}
.footer__col a{display:block;font-size:.85rem;color:var(--muted);margin-bottom:10px;transition:color var(--t),transform var(--t)}
.footer__col a:hover{color:var(--neon);transform:translateX(4px)}
.footer__bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}

/* ===== КНОПКА НАВЕРХ ===== */
.scroll-top{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:rgba(10,9,0,.9);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-light);color:var(--neon);border-radius:50%;font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--neon-glow-sm);opacity:0;pointer-events:none;transform:translateY(16px) scale(0.8);transition:opacity var(--t),transform var(--t-spring);z-index:300}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.scroll-top:hover{transform:translateY(-3px) scale(1.1);box-shadow:var(--neon-glow)}

/* ===== УВЕДОМЛЕНИЕ ===== */
.new-post-notif{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);padding:14px 20px;border-radius:var(--r);background:rgba(10,9,0,.97);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border-light);border-left:3px solid var(--neon);display:flex;align-items:center;gap:12px;font-size:.85rem;box-shadow:var(--shadow-card),var(--neon-glow-sm);opacity:0;transition:opacity .3s,transform .3s;z-index:400;max-width:460px;width:calc(100% - 40px)}
.new-post-notif.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.new-post-notif__dot{width:8px;height:8px;border-radius:50%;background:var(--neon);flex-shrink:0;animation:onlinePulse 1.5s ease infinite}
.new-post-notif button{margin-left:auto;background:linear-gradient(135deg,var(--neon),var(--neon2));color:#000;padding:5px 14px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;flex-shrink:0}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .6s ease calc(var(--delay,0s)),transform .6s cubic-bezier(0.34,1.2,0.64,1) calc(var(--delay,0s))}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== KEYFRAMES ===== */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoPulse{0%,100%{box-shadow:0 0 10px rgba(255,184,0,.5)}50%{box-shadow:0 0 20px rgba(255,184,0,.9),0 0 40px rgba(255,106,0,.4)}}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,184,0,.5)}50%{box-shadow:0 0 0 5px rgba(255,184,0,0)}}
@keyframes floatIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ===== АДАПТИВ ===== */
@media(max-width:1024px){.hero-news{grid-template-columns:1fr}.hero-news__side{flex-direction:row;flex-wrap:wrap}.side-card{flex:1 1 calc(50% - 6px);min-height:160px}.news-grid{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav{display:none}.burger{display:flex}.di-capsule{padding:8px 14px;gap:10px}.hero-news__img-wrap,.hero-news__img{min-height:280px}.hero-news__title{font-size:1.2rem}.news-grid{grid-template-columns:1fr}.tg-banner__inner{flex-direction:column;text-align:center;padding:24px}.footer__grid{grid-template-columns:1fr;gap:24px}.footer__bottom{flex-direction:column;gap:8px;text-align:center}.ticker{margin:6px 12px}.online-badge{display:none}}
@media(max-width:480px){.side-card{flex:1 1 100%}.filter-btn{padding:6px 14px;font-size:.75rem}.header__date{display:none}.hero-news__body{padding:18px}}