/* ============================================================
   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}

/* One highlighted word in the hero title, pulsing green→white.
   The animation sits on the container only: colour and text-shadow are
   inherited properties, so the .char spans that anim.js injects pick the
   values up without losing their own letter-bounce animation. */
.hero__title .glow-word{
  color:var(--primary-light);
  animation:word-glow 3.2s ease-in-out infinite;
}
@keyframes word-glow{
  0%,100%{color:var(--primary-light);
          text-shadow:0 0 12px rgba(0,255,148,.45),0 0 26px rgba(0,255,148,.18)}
  50%    {color:#fff;
          text-shadow:0 0 18px rgba(255,255,255,.65),0 0 38px rgba(0,255,148,.35)}
}

/* 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;
  /* Browser hover UI (Edge "Visual search", Yandex image hints) latches on
     to the <img> itself. Taking the image out of hit-testing suppresses that
     overlay; the hover/scale effect is unaffected because it is driven by
     the .part-image container, which still receives the pointer. */
  pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.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(--primary-light);
}
.article-body blockquote p,.article-body blockquote li{color:var(--primary-light)}
.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,
  .hero__title .glow-word{
    animation:none!important}
  .hero__title .glow-word{color:var(--primary-light)}
  .hero__title .char{transform:none}
  html{scroll-behavior:auto}
}

/* === BEGIN managed: footer mirrors (deploy-basics.py) === */
/* ============================================================
   Footer mirror buttons — basics.rus-vpn.online
   SINGLE SOURCE OF TRUTH. Injected into /assets/styles.css by
   website/basics/deploy-basics.py between the BEGIN/END markers.
   Do not hand-edit styles.css on the server.
   ============================================================ */

.footer__mirrors{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;margin:var(--s-4, 24px) 0 var(--s-3, 18px);
}

@keyframes mirror-pulse{
  0%,100%{
    box-shadow:0 0 6px rgba(0,217,126,.25), inset 0 0 6px rgba(0,217,126,.04);
    border-color:rgba(0,217,126,.45);
  }
  50%{
    box-shadow:0 0 18px rgba(0,217,126,.55), 0 0 32px rgba(0,217,126,.20), inset 0 0 12px rgba(0,217,126,.10);
    border-color:rgba(0,217,126,.90);
  }
}

.footer__mirror{
  display:inline-block;padding:8px 20px;border-radius:6px;
  border:1.5px solid rgba(0,217,126,.45);
  color:#00d97e;background:rgba(0,217,126,.07);
  font-size:13px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
  animation:mirror-pulse 2.8s ease-in-out infinite;
  transition:background .18s ease,color .18s ease;
}
.footer__mirror:nth-child(2){animation-delay:.7s}
.footer__mirror:nth-child(3){animation-delay:1.4s}
.footer__mirror:nth-child(4){animation-delay:2.1s}

.footer__mirror:hover,
.footer__mirror:focus-visible{
  background:rgba(0,217,126,.16);color:#00f090;
  animation:none;
  box-shadow:0 0 22px rgba(0,217,126,.55), inset 0 0 14px rgba(0,217,126,.10);
  border-color:rgba(0,217,126,.95);
}
.footer__mirror:focus-visible{outline:2px solid rgba(0,217,126,.9);outline-offset:2px}

/* the mirrors row replaced the old right-hand link, so centre the copyright */
.footer__bottom{justify-content:center}

@media(max-width:480px){
  .footer__mirror{padding:7px 14px;font-size:12px}
  .footer__mirrors{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .footer__mirror{animation:none!important}
}

/* === END managed: footer mirrors === */

/* === END managed: footer mirrors === */

/* === BEGIN managed: carousel (deploy-basics.py) === */
/* ============================================================
   Part-image carousel — coverflow ring, full-width
   SINGLE SOURCE OF TRUTH. Injected into /assets/styles.css by
   deploy-basics.py between the BEGIN/END carousel markers.
   Do not hand-edit styles.css on the server.

   Approach: transform-based infinite ring (not scroll-snap).
   JS sets data-pos on each slide; CSS reads it. This lets the
   ring truly wrap — no dead ends, no empty left side.
   ============================================================ */

.part-carousel {
  --slide-w: min(74vw, 960px);
  --slide-ratio: calc(672 / 1584);     /* height / width */
  --scale-nb: 0.82;                    /* neighbour scale  */
  --offset: calc(var(--slide-w) * 0.98); /* centre to neighbour centre */

  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: var(--s-3);
  margin-bottom: var(--s-8);
}

/* ── Viewport: height locked to active-slide aspect ratio ── */
.part-carousel__viewport {
  position: relative;
  width: 100%;
  height: calc(var(--slide-w) * var(--slide-ratio));
}

.part-carousel__track {
  position: absolute;
  inset: 0;
}

/* ── Slides ───────────────────────────────────────────────── */
.part-carousel__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slide-w);
  height: 100%;
  /* centre the slide on left:50% */
  margin-left: calc(var(--slide-w) / -2);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;

  /* default = far-right hidden (before JS sets data-pos) */
  transform: translateX(calc(var(--offset) * 2)) scale(0.65);
  filter: saturate(.4) brightness(.55);
  opacity: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .52s var(--ease-out),
              filter .45s ease,
              opacity .42s ease,
              box-shadow .45s ease;
  will-change: transform, filter, opacity;
  cursor: pointer;
}

.part-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Active */
.part-carousel__slide[data-pos="0"] {
  transform: translateX(0) scale(1);
  filter: none;
  opacity: 1;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,217,126,.18);
  z-index: 2;
  cursor: zoom-in;
}

/* Immediate neighbours */
.part-carousel__slide[data-pos="-1"] {
  transform: translateX(calc(var(--offset) * -1)) scale(var(--scale-nb));
  filter: saturate(.55) brightness(.66);
  opacity: .82;
  z-index: 1;
}
.part-carousel__slide[data-pos="1"] {
  transform: translateX(var(--offset)) scale(var(--scale-nb));
  filter: saturate(.55) brightness(.66);
  opacity: .82;
  z-index: 1;
}

/* Further slides — offscreen, invisible */
.part-carousel__slide[data-pos="hide-l"] {
  transform: translateX(calc(var(--offset) * -2)) scale(.65);
  opacity: 0;
  z-index: 0;
}
.part-carousel__slide[data-pos="hide-r"] {
  transform: translateX(calc(var(--offset) * 2)) scale(.65);
  opacity: 0;
  z-index: 0;
}

/* Glare sweep on active */
.part-carousel__slide[data-pos="0"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-130%);
  opacity: 0;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .part-carousel__slide[data-pos="0"]:hover::after {
    opacity: 1;
    animation: card-glare .75s ease-out;
  }
}

/* ── Arrows ───────────────────────────────────────────────── */
.part-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0,217,126,.45);
  background: rgba(12,16,22,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #00d97e;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.part-carousel__arrow:hover,
.part-carousel__arrow:focus-visible {
  background: rgba(0,217,126,.18);
  border-color: rgba(0,217,126,.9);
  box-shadow: 0 0 18px rgba(0,217,126,.45);
}
.part-carousel__arrow:focus-visible {
  outline: 2px solid rgba(0,217,126,.9);
  outline-offset: 2px;
}
.part-carousel__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.part-carousel__arrow--prev { left: clamp(8px, 2.5vw, 32px); }
.part-carousel__arrow--next { right: clamp(8px, 2.5vw, 32px); }
[dir="rtl"] .part-carousel__arrow svg { transform: scaleX(-1); }

/* ── Dots ─────────────────────────────────────────────────── */
.part-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-3);
}
.part-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,217,126,.45);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.part-carousel__dot:hover { background: rgba(0,217,126,.35); }
.part-carousel__dot[aria-current="true"] {
  background: #00d97e;
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(0,217,126,.7);
}
.part-carousel__dot:focus-visible {
  outline: 2px solid rgba(0,217,126,.9);
  outline-offset: 3px;
}

/* ── Lightbox ─────────────────────────────────────────────── */
.carousel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.93);
  display: none;
  place-items: center;
  padding: clamp(12px, 3vw, 52px);
  cursor: zoom-out;
}
.carousel-lightbox[data-open] {
  display: grid;
}
.carousel-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.7);
  transform: scale(.9);
  opacity: 0;
  transition: transform .28s var(--ease-out), opacity .22s ease;
  pointer-events: none;
  user-select: none;
}
.carousel-lightbox[data-ready] .carousel-lightbox__img {
  transform: scale(1);
  opacity: 1;
}
.carousel-lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.carousel-lightbox__close:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.75);
}
.carousel-lightbox__close:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 3px;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .part-carousel {
    --slide-w: min(84vw, 480px);
    --offset: calc(var(--slide-w) * 0.90);
  }
  .part-carousel__arrow { width: 40px; height: 40px; }
  .part-carousel__arrow svg { width: 18px; height: 18px; }
}

/* ── No-JS fallback: show all slides stacked ─────────────── */
.part-carousel:not([data-ready]) .part-carousel__viewport {
  position: static;
  height: auto;
}
.part-carousel:not([data-ready]) .part-carousel__track {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.part-carousel:not([data-ready]) .part-carousel__slide {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: default;
}
.part-carousel:not([data-ready]) .part-carousel__slide img {
  height: auto;
}
.part-carousel:not([data-ready]) .part-carousel__arrow,
.part-carousel:not([data-ready]) .part-carousel__dots {
  display: none;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .part-carousel__slide { transition: none; }
  .carousel-lightbox__img { transition: none; }
  .part-carousel[data-ready] { --autoplay: 0; }
}

/* === END managed: carousel === */