/* ============================================================
   basics.rus-vpn.online — styles.css
   Brand colours: RUSVPN (website/assets/css/style.css)
   Animation mechanics: adapted from labels.viplabels.ru
   ============================================================ */

/* ── Brand tokens (verbatim from RUSVPN style.css) ─────────── */
:root {
  --primary:        #00D97E;
  --primary-dark:   #00B368;
  --primary-light:  #00FF94;
  --secondary:      #3B82F6;
  --accent:         #00d97e;

  --bg-primary:     #0F1419;
  --bg-secondary:   #1A1F2E;
  --bg-tertiary:    #252B3B;
  --bg-hover:       #2D3548;

  --text-primary:   #E5E7EB;
  --text-secondary: #9CA3AF;
  --text-muted:     #6B7280;

  /* Typographic brightness ramp for article copy.
     The main palette above only has one "bright" tone, which made
     headings and body text identical. These add the missing steps.
     Contrast vs --bg-primary #0F1419 (WCAG 2.1):
       heading-1 18.5 : heading-2 16.9 : body 12.0 : quote 8.7
     --text-dim is a footnote tone that still clears AA (5.4);
     --text-muted (3.8) fails AA and is reserved for non-essential
     text such as the copyright line. */
  --heading-1:      #FFFFFF;
  --heading-2:      #F3F5F7;
  --body-text:      #C9D1D9;
  --quote-text:     #A8B3BF;
  --text-dim:       #8A94A0;

  --border:         rgba(140,140,140,.30);
  --border-light:   rgba(160,160,160,.20);

  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,.3);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,.4);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.5);
  --shadow-glow:    0 0 20px rgba(0,217,126,.3);

  --accent-ring:    rgba(0,217,126,.30);
  --accent-soft:    rgba(0,217,126,.10);

  --container-width: 1200px;
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-zh:   'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-fa:   'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;

  --radius: 14px;
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* fluid type */
  --t-xs:  clamp(.75rem, 1.5vw, .875rem);
  --t-sm:  clamp(.875rem, 2vw, 1rem);
  --t-md:  clamp(1rem, 2.2vw, 1.125rem);
  --t-lg:  clamp(1.25rem, 3vw, 1.5rem);
  --t-xl:  clamp(1.375rem, 3.2vw, 2.125rem);
  --t-2xl: clamp(1.75rem, 5vw, 3.25rem);

  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;
  --s-4: 2rem;   --s-6: 3rem;  --s-8: 4rem;  --s-12: 6rem;
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--bg-primary);color:var(--text-primary);
  font-family:var(--font-base);font-size:var(--t-md);line-height:1.7;
  min-height:100dvh;-webkit-font-smoothing:antialiased;
}
body.lang-zh{font-family:var(--font-zh)}
body.lang-fa{font-family:var(--font-fa)}
img{display:block;max-width:100%;height:auto}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-light)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Skip link ────────────────────────────────────────────── */
.skip-link{
  position:absolute;inset-inline-start:var(--s-2);top:var(--s-2);z-index:9999;
  padding:var(--s-1) var(--s-2);background:var(--primary);color:var(--bg-primary);
  border-radius:8px;font-weight:700;text-decoration:none;
  transform:translateY(-140%);opacity:0;transition:transform .2s,opacity .2s;
}
.skip-link:focus{transform:translateY(0);opacity:1}

/* ── Header ───────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  background:rgba(15,20,25,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border-light);
}
.logo{height:34px;width:auto}

/* ── Language switcher ────────────────────────────────────── */
.lang-switch{display:flex;gap:6px;flex-wrap:wrap}
.lang-switch a{
  padding:.28em .7em;border:1px solid var(--border);border-radius:8px;
  font-size:var(--t-xs);color:var(--text-secondary);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.lang-switch a:hover,
.lang-switch a[aria-current="page"]{
  border-color:var(--primary);color:var(--primary);background:var(--accent-soft);
}

/* ── Matrix rain canvas ───────────────────────────────────── */
/* Sits behind the content of any positioned parent that has one.
   Opacity values mirror the main site (website/assets/css/article.css):
   hero .4, article body .25, CTA .3, footer .3 */
canvas.matrix-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;user-select:none;
  opacity:.4;
}
.article-wrap canvas.matrix-bg{opacity:.25}
.final-cta canvas.matrix-bg,
.site-footer canvas.matrix-bg{opacity:.3}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin:20px 10px 34px;border-radius:26px;
  background:linear-gradient(160deg,var(--bg-secondary) 0%,var(--bg-primary) 70%);
  border:1px solid var(--border-light);
  border-bottom:2px solid var(--primary);
  padding:var(--s-12) var(--s-4) var(--s-8);text-align:center;
}
.hero__inner{position:relative;z-index:3;max-width:820px;margin-inline:auto}
.hero__part-label{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--primary);opacity:.9;margin-bottom:var(--s-2);
}
.hero__title{
  font-size:var(--t-2xl);font-weight:800;line-height:1.12;letter-spacing:-.025em;
  color:#fff;margin-bottom:var(--s-3);
  /* distribute lines evenly instead of leaving a short orphan line */
  text-wrap:balance;
  overflow-wrap:break-word;
  text-shadow:0 0 30px rgba(0,217,126,.2);
}
.hero__subtitle{
  font-size:var(--t-lg);color:var(--body-text);margin-bottom:var(--s-2);
  text-wrap:balance;max-width:34ch;margin-inline:auto;
}
.hero__lead{
  font-size:var(--t-sm);color:var(--text-dim);
  text-wrap:balance;max-width:46ch;margin-inline:auto;
}

/* Keep whole words together: line breaks may only happen at spaces,
   never between two animated .char spans. */
.hero__title .word{display:inline-block;white-space:nowrap}

/* letter-bounce, staggered — viplabels mechanic */
.hero__title .char{
  display:inline-block;
  animation:letter-bounce 2.6s ease-in-out infinite alternate;
  animation-delay:calc(var(--char-i) * .05s);
}
@keyframes letter-bounce{from{transform:translateY(0)}to{transform:translateY(-6px)}}

/* periodic sweeping sheen across the hero — viplabels mechanic */
.hero__sheen{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:2;
  background:linear-gradient(118deg,
    transparent 30%,
    rgba(0,217,126,.16) 48%,
    rgba(0,255,148,.20) 52%,
    transparent 70%);
  transform:translateX(-140%);
  animation:hero-sheen 8s ease-in-out infinite;
}
@keyframes hero-sheen{
  0%,62%  {transform:translateX(-140%);opacity:0}
  63%     {opacity:1}
  80%     {transform:translateX(140%);opacity:.6}
  81%,100%{opacity:0;transform:translateX(140%)}
}

/* ── Part image — card hover + glare (viplabels mechanic) ─── */
.part-image{
  max-width:960px;margin:0 auto var(--s-8);padding-inline:var(--s-4);
}
.part-image figure,
.part-image{position:relative;isolation:isolate}
.part-image img{
  width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  transition:transform .55s var(--ease-out),filter .38s ease;
}
.part-image::after{
  content:"";position:absolute;inset:0 var(--s-4);z-index:2;pointer-events:none;
  border-radius:var(--radius);
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);
  transform:translateX(-130%);opacity:0;transition:opacity .2s ease;
}
@media(hover:hover){
  .part-image:hover::after{opacity:1;animation:card-glare .75s ease-out}
  .part-image:hover img{transform:scale(1.03);filter:saturate(1.12) brightness(1.04)}
}
@keyframes card-glare{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ── Article layout ───────────────────────────────────────── */
.article-wrap{
  position:relative;isolation:isolate;
  max-width:var(--container-width);margin-inline:auto;
  padding:0 var(--s-4) var(--s-12);
  display:grid;grid-template-columns:240px 1fr;gap:var(--s-8);align-items:start;
}
/* keep the columns above the matrix canvas */
.article-wrap > .toc,
.article-wrap > .article-body{position:relative;z-index:1}
@media(max-width:820px){
  .article-wrap{grid-template-columns:1fr;gap:var(--s-4)}
  .toc{display:none}
}

/* ── TOC ──────────────────────────────────────────────────── */
.toc{
  position:sticky;top:84px;
  background:var(--bg-secondary);border:1px solid var(--border-light);
  border-radius:var(--radius);padding:var(--s-3);box-shadow:var(--shadow-sm);
}
.toc__heading{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);font-weight:700;margin-bottom:var(--s-2);
}
.toc ol{list-style:none;padding:0}
.toc li{margin-bottom:6px}
.toc a{
  display:block;font-size:var(--t-sm);color:var(--text-secondary);
  text-decoration:none;padding:.2em 0 .2em var(--s-2);
  border-inline-start:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.toc a:hover{color:var(--text-primary);border-color:var(--border)}
.toc a.active{color:var(--primary);border-color:var(--primary)}

/* ── Article body ─────────────────────────────────────────── */
/* Brightness ramp: h2 brightest, then h3, then body, then quotes.
   h2 and h3 are close in luminance on purpose — they are separated
   by size and weight; pushing h3 darker would make it read as body
   text rather than as a heading. */
.article-body h2{
  font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em;
  color:var(--heading-1);
  margin:var(--s-8) 0 var(--s-3);line-height:1.2;text-wrap:balance;
  text-shadow:0 0 24px rgba(0,217,126,.12);
}
.article-body h3{
  font-size:var(--t-lg);font-weight:700;
  color:var(--heading-2);
  margin:var(--s-6) 0 var(--s-2);line-height:1.3;text-wrap:balance;
}
.article-body h4{
  font-size:var(--t-md);font-weight:600;letter-spacing:.01em;
  color:var(--primary);
  margin:var(--s-4) 0 var(--s-1);
}
.article-body p{margin-bottom:var(--s-3);color:var(--body-text)}
.article-body li{margin-bottom:.4em;color:var(--body-text)}
.article-body strong{color:var(--heading-1);font-weight:700}
.article-body blockquote{
  border-inline-start:3px solid var(--primary);
  padding-inline-start:var(--s-3);margin-block:var(--s-4);
  font-style:italic;color:var(--quote-text);
}
.article-body ul,.article-body ol{margin:0 0 var(--s-3);padding-inline-start:var(--s-3)}

/* ── Scroll reveal — viplabels convention (.sr / .sr--done) ─ */
.sr{opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--sr-delay,0s)}
.sr.sr--up{transform:translateY(48px)}
.sr.sr--left{transform:translateX(clamp(-54px,-4vw,0px))}
.sr.sr--right{transform:translateX(clamp(0px,4vw,54px))}
.sr.sr--pop{transform:scale(.88)}
.sr.sr--flip{transform:perspective(600px) rotateX(18deg);transform-origin:top center}
.sr.sr--done{opacity:1;transform:none}

/* ── Buttons — shimmer sweep (viplabels mechanic) ─────────── */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-block;padding:16px 34px;border-radius:10px;
  font-size:var(--t-sm);font-weight:700;text-decoration:none;cursor:pointer;
  border:2px solid transparent;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;
  user-select:none;
}
.btn::before{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-130%);
}
@media(hover:hover){
  .btn:hover::before{animation:btn-shimmer .55s ease-out forwards}
  .btn:hover{transform:translateY(-2px)}
}
.btn:active::before{animation:btn-shimmer .3s ease-out forwards}
.btn:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@keyframes btn-shimmer{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

.btn--primary{background:var(--primary);color:var(--bg-primary)}
.btn--primary:hover{background:var(--primary-light);box-shadow:var(--shadow-glow);color:var(--bg-primary)}

.btn--ghost{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--primary-light);color:var(--primary-light)}

/* ── Mid CTA ──────────────────────────────────────────────── */
.cta-mid{max-width:660px;margin-inline:auto;padding:var(--s-6) var(--s-4);text-align:center}
.cta-mid__text{font-size:var(--t-lg);font-style:italic;color:var(--text-secondary);margin-bottom:var(--s-4)}

/* ── Pagination ───────────────────────────────────────────── */
.pagination{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:var(--s-3);padding:var(--s-8) var(--s-4);
}
.pagination__dots{display:flex;gap:var(--s-2);list-style:none;padding:0}
.pagination__dots a,.pagination__dots span{
  display:flex;align-items:center;justify-content:center;
  width:2.5em;height:2.5em;border-radius:50%;
  border:1px solid var(--border);font-size:var(--t-sm);
  color:var(--text-secondary);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s,transform .2s;
}
.pagination__dots a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.pagination__dots span[aria-current="page"]{
  background:var(--primary);border-color:var(--primary);
  color:var(--bg-primary);font-weight:800;box-shadow:var(--shadow-glow);
}
.pagination .btn{min-width:130px;text-align:center}

/* ── Final CTA ────────────────────────────────────────────── */
.final-cta{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:760px;margin-inline:auto;padding:var(--s-12) var(--s-4);text-align:center;
  border-radius:26px;border:1px solid var(--border-light);
  background:linear-gradient(160deg,var(--bg-secondary) 0%,var(--bg-primary) 70%);
}
/* keep the copy above the matrix canvas */
.final-cta__inner{position:relative;z-index:1}
.final-cta__headline{
  font-size:var(--t-xl);font-weight:800;line-height:1.15;color:#fff;
  margin-bottom:var(--s-3);text-wrap:balance;
}
.final-cta__headline em{font-style:normal;color:var(--primary)}
.final-cta.sr--done .final-cta__headline em{animation:stat-glow 1.8s ease-out .2s both}
@keyframes stat-glow{
  0%  {text-shadow:0 0 0 transparent}
  35% {text-shadow:0 0 14px rgba(0,217,126,.45),0 0 28px rgba(0,217,126,.20)}
  100%{text-shadow:0 0 0 transparent}
}
.final-cta__sub{
  font-size:var(--t-md);color:var(--text-secondary);
  max-width:540px;margin:0 auto var(--s-6);
}
.final-cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid var(--border-light);
  padding:var(--s-6) var(--s-4);text-align:center;background:var(--bg-secondary);
}
/* translucent wash so the footer text stays readable over the rain,
   mirroring .footer-bg-overlay on the main site */
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(20,25,35,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.footer__inner{position:relative;z-index:2}
.footer__note{font-size:var(--t-sm);font-style:italic;color:var(--quote-text);margin-bottom:var(--s-1)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2)}
.footer__copy{font-size:var(--t-xs);color:var(--text-dim);margin:0}
.footer__basics-link{
  font-size:var(--t-xs);color:var(--text-muted);text-decoration:none;
  opacity:.4;transition:opacity .2s;
}
.footer__basics-link:hover,.footer__basics-link:focus-visible{opacity:.8;text-decoration:underline}

/* ── RTL ──────────────────────────────────────────────────── */
[dir="rtl"] .toc a{
  border-inline-start:none;border-inline-end:2px solid transparent;
  padding:.2em var(--s-2) .2em 0;
}
[dir="rtl"] .toc a:hover{border-inline-end-color:var(--border)}
[dir="rtl"] .toc a.active{border-inline-end-color:var(--primary)}
[dir="rtl"] .article-body blockquote{
  border-inline-start:none;border-inline-end:3px solid var(--primary);
  padding-inline-start:0;padding-inline-end:var(--s-3);
}
[dir="rtl"] .hero__sheen{animation-name:hero-sheen-rtl}
@keyframes hero-sheen-rtl{
  0%,62%  {transform:translateX(140%);opacity:0}
  63%     {opacity:1}
  80%     {transform:translateX(-140%);opacity:.6}
  81%,100%{opacity:0;transform:translateX(-140%)}
}

/* ── Touch devices: press feedback, no sticky hover ────────── */
@media(hover:none){
  .part-image:hover::after{animation:none;opacity:0}
  .part-image:hover img{transform:none;filter:none}
  .part-image:active img{transform:scale(1.02);filter:brightness(1.03);transition-duration:.08s}
  .btn:active{transform:scale(.96);filter:brightness(.94);transition-duration:.08s}
  .btn--ghost:active{background:var(--accent-soft)}
  .pagination__dots a:active{border-color:var(--primary);color:var(--primary)}
}

/* ── Reduced motion ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .sr{opacity:1!important;transform:none!important;transition:none!important}
  .hero__sheen,.hero__title .char,.btn::before,.btn:active::before,
  .part-image:hover::after,.final-cta.sr--done .final-cta__headline em{
    animation:none!important}
  .hero__title .char{transform:none}
  html{scroll-behavior:auto}
}