/* =========================================================================
   dizainsweb jaunais stils (v3) · kopīgās kartītes, 30.10.2026
   Ielādējas globāli pēc v3.css (un pēc lapas CSS, sk. inc/v3.php). Lieto: sākumlapa, portfolio,
   projekta lapa, pakalpojumu lapas, blogs, raksti, video.
   - Portfolio kartīte (template-parts/cards/portfolio.php): Figma 2214:1152 / 2267:2642
   - Bloga kartīte (template-parts/cards/blog.php): Figma 2273:6648
   - Video kartīte (template-parts/cards/short.php): Figma komponente 2236:121
   - Video lightbox (template-parts/global/lightbox.php): tikai izskats
   Vecie noteikumi components.css paliek, tāpēc šeit selektori ir ar .pf-card / .short-card / .blog-card priekšā
   (specifiskums 0,2,0+). Lapai savs variants: sadaļas klase + .pf-card ... (0,3,0).
   Kustība: tikai transform un opacity, hover tikai (hover:hover).
   ========================================================================= */

/* ---------- Portfolio kartīte ---------- */
.pf-card{
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  border-radius:28px; background:var(--panel); color:var(--ink); text-decoration:none;
}
.pf-card .pf-card__media{
  position:relative; overflow:hidden; isolation:isolate; flex:none;
  aspect-ratio:487 / 300; border-radius:0; filter:none;
  background:radial-gradient(56% 50% at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) var(--panel);
}
.pf-card .pf-card__media::before,
.pf-card .pf-card__media::after{ content:none; }
.pf-card .pf-card__media .pf-card__browser{
  position:absolute; left:7.4%; top:21.4%; width:77.6%; transform:none;
  border-radius:8px 8px 0 0; overflow:hidden; background:var(--white);
  box-shadow:0 8px 32px rgba(18, 20, 23, 0.10);
  transition:none;
}
.pf-card .pf-card__views{ position:relative; aspect-ratio:16 / 10; overflow:hidden; background:var(--white); }
.pf-card .pf-card__views > img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:0; aspect-ratio:auto; }
.pf-card .pf-card__views > img.is-cover{ object-position:center; }
.pf-card .pf-card__view{ position:absolute; inset:0; opacity:0; transition:opacity 500ms var(--ease-v3); }
.pf-card .pf-card__view.is-on{ opacity:1; }
.pf-card .pf-card__view img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:0; aspect-ratio:auto; }
.pf-card .pf-card__media .pf-card__phone{
  position:absolute; left:74.6%; right:auto; top:28.1%; bottom:auto; width:19.5%; aspect-ratio:auto;
  padding:0; border-radius:12px; overflow:hidden; background:var(--white);
  box-shadow:0 8px 32px rgba(18, 20, 23, 0.16), 0 0 0 1px rgba(17, 19, 21, 0.06);
  transform:translate3d(0, 0, 0);
  transition:transform 500ms var(--ease-v3);
}
.pf-card .pf-card__screen{ position:relative; aspect-ratio:95 / 206; overflow:hidden; border-radius:0; background:var(--white); }
.pf-card .pf-card__screen > img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:0; }
.pf-card .pf-card__info{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--white);
}
.pf-card .pf-card__name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-0.03em; color:var(--ink);
  transition:color 200ms var(--ease-v3);
}
.pf-card .pf-card__meta{
  flex:none; max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:4px 10px; border-radius:var(--r-pill); background:var(--panel);
  font-size:13px; font-weight:500; line-height:1.5; color:var(--muted);
}
.pf-card .pf-card__info > svg,
.pf-card .pf-card__glow,
.pf-card .pf-card__cursor,
.pf-card .pf-card__platform,
.pf-card .pf-card__views-pill,
.pf-card .pf-card__bar{ display:none; }
.pf-card:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
@media (hover: hover) and (pointer: fine){
  .pf-card:hover .pf-card__media .pf-card__browser{ transform:none; }
  .pf-card:hover .pf-card__media .pf-card__phone{ transform:translate3d(0, -6px, 0); }
  .pf-card:hover .pf-card__media{ filter:none; }
  .pf-card:hover .pf-card__name{ color:var(--signal); }
}
@media (max-width: 600px){
  .pf-card{ border-radius:24px; }
  .pf-card .pf-card__info{ padding:14px 16px; }
  .pf-card .pf-card__name{ font-size:18px; }
  .pf-card .pf-card__media .pf-card__phone{ border-radius:9px; }
}

/* ---------- Bloga kartīte ---------- */
.blog-card{
  display:flex; flex-direction:column; gap:14px; height:100%;
  padding:16px; border-radius:28px; background:var(--panel); color:var(--ink); text-decoration:none;
}
.blog-card .blog-card__media{
  position:relative; overflow:hidden; flex:none; aspect-ratio:455 / 263;
  border-radius:18px; background:var(--canvas);
}
.blog-card .blog-card__media img{ display:block; width:100%; height:100%; object-fit:cover; transform:none; transition:none; }
.blog-card .blog-card__tag{ display:none; }
.blog-card .blog-card__body{ display:flex; flex-direction:column; gap:8px; flex:1; padding:0 8px 12px; }
.blog-card .blog-card__meta{ margin:0; font-size:13px; font-weight:500; line-height:1.5; color:var(--muted); }
.blog-card .blog-card__title{
  margin:0; min-height:0; max-width:none;
  font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-0.03em; text-wrap:pretty; color:var(--ink);
  transition:color 200ms var(--ease-v3);
}
.blog-card .blog-card__more{
  display:inline-block; align-self:flex-start; margin:auto 0 0; padding:0;
  font-size:13px; font-weight:500; line-height:1.5; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.blog-card .blog-card__more svg{ display:none; }
.blog-card:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
@media (hover: hover) and (pointer: fine){
  .blog-card:hover .blog-card__media img{ transform:none; }
  .blog-card:hover .blog-card__title{ color:var(--ink); }
  .blog-card:hover .blog-card__more{ color:var(--signal); }
}
@media (max-width: 600px){
  .blog-card{ border-radius:24px; padding:12px; gap:12px; }
  .blog-card .blog-card__media{ border-radius:14px; }
  .blog-card .blog-card__body{ padding:0 6px 8px; }
  .blog-card .blog-card__title{ font-size:19px; }
}

/* ---------- Video kartīte (short) ---------- */
.short-card{
  display:flex; flex-direction:column; gap:16px; flex:none; overflow:visible; isolation:auto;
  aspect-ratio:auto; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  color:inherit; text-align:left; font:inherit; cursor:pointer; transform:none;
}
.short-card::after{ content:none; }
.short-card .short-card__media{
  position:relative; display:block; overflow:hidden; isolation:isolate; width:100%;
  aspect-ratio:9 / 16; border-radius:18px; background:#1a1d20;
}
.short-card .short-card__media > img,
.short-card .short-card__media > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; border-radius:0; }
.short-card .short-card__media > video{ z-index:1; opacity:0; transition:opacity 300ms var(--ease-v3); }
.short-card.is-playing .short-card__media > video{ opacity:1; }
.short-card .short-card__play{
  position:absolute; left:18px; top:auto; bottom:18px; z-index:3;
  display:grid; place-items:center; width:52px; height:52px; margin:0; border:0; border-radius:50%;
  background:var(--white); color:var(--ink); box-shadow:none;
  transition:opacity 250ms var(--ease-v3), transform 250ms var(--ease-v3);
}
.short-card .short-card__play svg{ width:20px; height:20px; display:block; margin-left:2px; }
.short-card .short-card__sound{
  position:absolute; left:18px; bottom:18px; z-index:3;
  display:inline-flex; align-items:center; gap:6px; height:37px; padding:0 12px 0 10px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--white); font-size:13px; font-weight:500; line-height:1; white-space:nowrap;
  opacity:0; transform:translate3d(0, 6px, 0);
  transition:opacity 250ms var(--ease-v3), transform 250ms var(--ease-v3);
}
.short-card .short-card__sound svg{ width:16px; height:16px; flex:none; }
.short-card .short-card__progress{
  position:absolute; left:0; right:0; bottom:0; z-index:3; display:block; margin:0;
  height:3px; border-radius:0; background:rgba(255, 255, 255, 0.9); overflow:hidden; opacity:0;
  transition:opacity 250ms var(--ease-v3);
}
.short-card .short-card__progress i{ display:block; height:100%; width:0; background:var(--signal-soft); }
.short-card .short-card__info{ position:static; display:flex; flex-direction:column; gap:6px; width:100%; }
.short-card .short-card__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; font-weight:500; line-height:1.5; }
.short-card .short-card__client{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; }
.short-card .short-card__meta{ flex:none; margin:0; font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; }
.short-card .short-card__row > .short-card__meta:only-child{ flex:1; }
.short-card .short-card__title{ display:block; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-0.03em; color:inherit; text-wrap:pretty; }
.bg-ink .short-card .short-card__meta, .on-dark .short-card .short-card__meta{ color:var(--on-black-muted); }
.short-card.is-active, .short-card.is-playing{ box-shadow:none; border-color:transparent; }
.short-card.is-playing .short-card__play, .short-card.is-preview .short-card__play{ opacity:0; transform:scale(0.85); }
.short-card.is-playing .short-card__sound, .short-card.is-preview .short-card__sound{ opacity:1; transform:none; }
.short-card.is-playing .short-card__progress, .short-card.is-preview .short-card__progress{ opacity:1; }
.short-card:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:18px; }
@media (hover: hover) and (pointer: fine){
  .short-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
  .short-card:hover .short-card__play{ background:var(--white); box-shadow:none; transform:scale(1.04); }
  .short-card:hover .short-card__title{ color:inherit; }
}
@media (max-width: 600px){
  .short-card{ gap:10px; }
  .short-card .short-card__media{ border-radius:14px; }
  .short-card .short-card__play{ left:12px; bottom:12px; width:40px; height:40px; }
  .short-card .short-card__play svg{ width:16px; height:16px; }
  .short-card .short-card__sound{ left:12px; bottom:12px; height:30px; padding:0 10px 0 8px; font-size:12px; }
  .short-card .short-card__row{ flex-direction:column; align-items:flex-start; gap:0; }
  .short-card .short-card__title{ font-size:16px; line-height:1.35; }
}
@media (prefers-reduced-motion: reduce){
  .short-card .short-card__play, .short-card .short-card__sound, .pf-card .pf-card__media .pf-card__phone, .pf-card .pf-card__view{ transition:none; }
}

/* ---------- Video lightbox (izskats) ---------- */
.lightbox{ background:rgba(17, 19, 21, 0.9); }
.lightbox .round-btn{ width:48px; height:48px; border:0; background:var(--white); color:var(--ink); }
.lightbox .round-btn--signal{ background:var(--white); color:var(--ink); }
@media (hover: hover) and (pointer: fine){
  .lightbox .round-btn:hover{ background:var(--signal); color:var(--white); }
}
.lightbox .lightbox__stage{ border-radius:24px; border:0; background:var(--ink-2); }
.lightbox .lightbox__stage::after{ inset:60% 0 0; background:linear-gradient(180deg, rgba(17, 19, 21, 0), rgba(17, 19, 21, 0.8)); }
.lightbox .lightbox__mute{ top:16px; right:16px; width:44px; height:44px; background:var(--ink); color:var(--white); }
.lightbox .lightbox__caption{ left:24px; right:24px; bottom:24px; }
.lightbox .lightbox__title{ font-size:24px; font-weight:500; letter-spacing:-0.03em; line-height:1.2; }
.lightbox .lightbox__meta{ margin-top:4px; font-size:14px; font-weight:500; color:var(--on-black-muted); }
.lightbox .lightbox__progress{ margin-top:14px; height:3px; border-radius:0; background:rgba(255, 255, 255, 0.25); }
.lightbox .lightbox__progress i{ background:var(--signal-soft); }
.lightbox .lightbox__count{ font-family:var(--font); font-size:13px; font-weight:500; color:var(--on-black-muted); }
.lightbox .lightbox__info-title{ font-size:26px; font-weight:500; letter-spacing:-0.03em; line-height:1.2; color:var(--white); }
@media (max-width: 1024px){
  .lightbox .lightbox__stage{ border-radius:20px; }
  .lightbox .lightbox__title{ font-size:20px; }
}

/* ==== Kartīšu mazās animētās ikonas (sva), 31.10.2026 ====
   Web dizains: "Kas iekļauts web dizainā". Tikai HTML + CSS cilpas uz transform un opacity (kompozitors),
   apstājas, kamēr sadaļa vēl nav ienākusi, un pie prefers-reduced-motion paliek mierīgs gala stāvoklis. */
.sv-card--anim{ position:relative; }
.sva{
  --sva-ink:#111315; --sva-o:#f4834a; --sva-O:#e95006;
  --sva-io:cubic-bezier(.45,0,.55,1); --sva-out:cubic-bezier(.16,1,.3,1);
  position:absolute; top:22px; right:22px; width:76px; height:52px; border-radius:14px;
  overflow:hidden; pointer-events:none; background:var(--panel, #f4f5f6); contain:layout paint;
}
.sva--t-peach{ background:var(--peach, #ffd8c2); }
.sva--t-sky{ background:var(--sky, #cfe3ff); }
.sva--t-lilac{ background:var(--lilac, #bfb1ff); }
.sva--t-butter{ background:var(--butter, #fff5c7); }
.sva--t-mint{ background:var(--mint, #cbead7); }
.sva span, .sva svg{ position:absolute; display:block; }
.sva svg{ inset:0; width:76px; height:52px; overflow:visible; }
.sva .m, .sva .m::after{ will-change:transform, opacity; transform:translate3d(0,0,0); }

/* Struktūra un lapu karte: koks, apakšlapas parādās pēc kārtas */
.sva--sitemap .root{ left:31px; top:10px; width:14px; height:9px; border-radius:3px; background:var(--sva-ink); }
.sva--sitemap .ln{ background:rgba(17,19,21,.4); }
.sva--sitemap .stem{ left:37.5px; top:19px; width:1px; height:5px; }
.sva--sitemap .bar{ left:15.5px; top:24px; width:45px; height:1px; }
.sva--sitemap .leg{ top:24px; width:1px; height:5px; }
.sva--sitemap .l1{ left:15.5px; } .sva--sitemap .l2{ left:37.5px; } .sva--sitemap .l3{ left:59.5px; }
.sva--sitemap .nd{ top:29px; width:14px; height:12px; border-radius:3px; background:#fff; }
.sva--sitemap .nd::after{ content:""; position:absolute; left:3px; top:3.5px; width:8px; height:1.5px; border-radius:1px; background:rgba(17,19,21,.28); box-shadow:0 3px 0 rgba(17,19,21,.14); }
.sva--sitemap .n1{ left:9px; } .sva--sitemap .n2{ left:31px; background:var(--sva-o); } .sva--sitemap .n3{ left:53px; }
.sva--sitemap .n2::after{ background:rgba(255,255,255,.85); box-shadow:0 3px 0 rgba(255,255,255,.5); }
.sva--sitemap .nd{ animation:sva-pop 5s var(--sva-out) infinite backwards; }
.sva--sitemap .n2{ animation-delay:.25s; } .sva--sitemap .n3{ animation-delay:.5s; }

/* Datora un telefona versija: kolonnas datorā iedegas, telefonā tie paši bloki sakrājas vienā kolonnā */
.sva--devices .mon{ left:7px; top:8px; width:42px; height:29px; border-radius:4px; background:#fff; }
.sva--devices .stand{ left:25px; top:37px; width:6px; height:4px; background:rgba(255,255,255,.8); }
.sva--devices .base{ left:20px; top:41px; width:16px; height:2px; border-radius:1px; background:#fff; }
.sva--devices .mh{ left:11px; top:12px; width:34px; height:3px; border-radius:1.5px; background:rgba(17,19,21,.16); }
.sva--devices .c{ top:18px; width:10px; height:15px; border-radius:2px; background:rgba(17,19,21,.09); }
.sva--devices .c1{ left:11px; } .sva--devices .c2{ left:23px; } .sva--devices .c3{ left:35px; }
.sva--devices .c::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--sva-o); opacity:0; animation:sva-glow 4.2s ease-in-out infinite backwards; }
.sva--devices .ph{ left:55px; top:6px; width:15px; height:40px; border-radius:4px; background:var(--sva-ink); }
.sva--devices .ps{ left:57px; top:9px; width:11px; height:34px; border-radius:2px; background:#fff; }
.sva--devices .p{ left:59px; width:7px; height:8px; border-radius:1.5px; background:var(--sva-o); animation:sva-pop 4.2s var(--sva-out) infinite backwards; }
.sva--devices .p1{ top:12px; } .sva--devices .p2{ top:22px; background:rgba(17,19,21,.16); } .sva--devices .p3{ top:32px; background:rgba(17,19,21,.16); }
.sva--devices .c2::after, .sva--devices .p2{ animation-delay:.4s; }
.sva--devices .c3::after, .sva--devices .p3{ animation-delay:.8s; }

/* Dizaina sistēma: krāsu un komponenšu kartītes atveras vēdeklī */
.sva--system .k{ left:27px; top:9px; width:22px; height:32px; border-radius:4px; transform-origin:50% 100%; animation:4.6s var(--sva-io) infinite; }
.sva--system .k1{ background:#fff; animation-name:sva-fan-l; }
.sva--system .k2{ background:var(--sva-o); animation-name:sva-fan-m; }
.sva--system .k3{ background:var(--sva-ink); animation-name:sva-fan-r; }
.sva--system .k3::before{ content:""; position:absolute; left:4px; top:4px; width:6px; height:6px; border-radius:50%; background:var(--sva-o); }
.sva--system .k3::after{ content:""; position:absolute; left:4px; bottom:5px; width:13px; height:2px; border-radius:1px; background:rgba(255,255,255,.55); box-shadow:0 -4px 0 rgba(255,255,255,.28); }

/* Prototips: kursors klikšķina pogu, signāls aiziet uz nākamo ekrānu */
.sva--proto .s{ top:9px; width:25px; height:34px; border-radius:3px; background:#fff; }
.sva--proto .s1{ left:7px; } .sva--proto .s2{ left:44px; }
.sva--proto .tx{ left:11px; top:13px; width:13px; height:2px; border-radius:1px; background:rgba(17,19,21,.22); box-shadow:0 4px 0 rgba(17,19,21,.12); }
.sva--proto .img{ left:48px; top:13px; width:17px; height:9px; border-radius:2px; background:rgba(17,19,21,.1); }
.sva--proto .tx2{ left:48px; top:26px; width:14px; height:2px; border-radius:1px; background:rgba(17,19,21,.22); box-shadow:0 4px 0 rgba(17,19,21,.12); }
.sva--proto .btn{ left:11px; top:33px; width:17px; height:5px; border-radius:2px; background:var(--sva-ink); animation:sva-press 4.4s ease-out infinite; }
.sva--proto .dash{ left:34px; top:25.5px; width:8px; height:0; border-top:1px dashed rgba(17,19,21,.4); }
.sva--proto .dot{ left:32px; top:24px; width:4px; height:4px; border-radius:50%; background:var(--sva-O); opacity:0; animation:sva-send 4.4s var(--sva-io) infinite; }
.sva--proto .hi{ left:44px; top:9px; width:25px; height:34px; border-radius:3px; box-shadow:inset 0 0 0 1.5px var(--sva-O); opacity:0; animation:sva-hi 4.4s ease-out infinite; }
.sva--proto .rp{ left:12.5px; top:28.5px; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--sva-O); opacity:0; animation:sva-ripple 4.4s ease-out infinite; }
.sva--proto .cur{ left:20px; top:35px; width:10px; height:12px; transform-origin:1px 1px; animation:sva-cursor 4.4s var(--sva-io) infinite; }
.sva--proto .cur svg{ width:10px; height:12px; }

/* Īsti teksti dizainā: virsraksts un teksts ieraksta sevi, kursors mirgo */
.sva--copy .pg{ left:9px; top:7px; width:58px; height:38px; border-radius:4px; background:#fff; }
.sva--copy .h{ left:15px; top:12px; width:30px; height:4px; border-radius:2px; background:var(--sva-ink); }
.sva--copy .t{ left:15px; height:2px; border-radius:1px; background:rgba(17,19,21,.24); }
.sva--copy .t1{ top:21px; width:42px; } .sva--copy .t2{ top:26px; width:38px; } .sva--copy .t3{ top:31px; width:26px; }
.sva--copy .b{ left:15px; top:37px; width:15px; height:4px; border-radius:2px; background:var(--sva-o); }
.sva--copy .h, .sva--copy .t, .sva--copy .b{ transform-origin:0 50%; animation:sva-type 5.2s infinite backwards; }
.sva--copy .t1{ animation-delay:.75s; } .sva--copy .t2{ animation-delay:1.1s; } .sva--copy .t3{ animation-delay:1.45s; } .sva--copy .b{ animation-delay:1.8s; }
.sva--copy .cw{ left:46.5px; top:11px; width:1.5px; height:6px; animation:sva-caret 5.2s infinite; }
.sva--copy .cw::after{ content:""; position:absolute; inset:0; border-radius:1px; background:var(--sva-O); animation:sva-blink 1s steps(1) infinite; }

/* Kustība: bumbiņa pa trajektoriju, starpkadri kā sīpolāda */
.sva--motion .gr{ left:10px; top:44px; width:56px; height:1px; background:rgba(17,19,21,.16); }
.sva--motion .gh{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(233,80,6,.45); }
.sva--motion .g1{ left:25px; top:16.5px; } .sva--motion .g2{ left:38px; top:10px; } .sva--motion .g3{ left:51px; top:16.5px; }
.sva--motion .bx{ left:12px; top:36px; width:8px; height:8px; animation:sva-mx 2.8s linear infinite alternate; }
.sva--motion .by{ inset:0; border-radius:50%; background:var(--sva-O); animation:sva-my 2.8s infinite alternate; }

/* ---- Piekļūstamība: "Ko pārbaudām" (31.10.2026). Bāzes stils = mierīgs gala stāvoklis (reduced motion). ---- */

/* Kontrasts: gaišais "Aa" kļūst tumšs, skala piepildās līdz 4,5:1, parādās ķeksis */
.sva--pkcon .pg{ left:8px; top:7px; width:42px; height:38px; border-radius:4px; background:#fff; }
.sva--pkcon .aa{ left:13px; top:11px; font:500 21px/1 var(--font); letter-spacing:-0.04em; color:#c9cdd1; }
.sva--pkcon .aa2{ color:var(--sva-ink); animation:pk-con-in 4.8s var(--sva-io) infinite backwards; }
.sva--pkcon .tr{ left:13px; top:36px; width:32px; height:3px; border-radius:2px; background:rgba(17,19,21,.1); }
.sva--pkcon .fl{ left:13px; top:36px; width:32px; height:3px; border-radius:2px; background:var(--sva-O); transform-origin:0 50%; animation:pk-con-bar 4.8s var(--sva-io) infinite backwards; }
.sva--pkcon .ok{ left:55px; top:18px; width:15px; height:15px; border-radius:50%; background:var(--sva-ink); animation:pk-con-ok 4.8s var(--sva-out) infinite backwards; }
.sva--pkcon .ok::after{ content:""; position:absolute; left:4.5px; top:3.5px; width:4px; height:6.5px; border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }

/* Tastatūra: Tab nospiests, fokusa rāmis pārlec uz nākamo elementu */
.sva--pkkey .e{ top:9px; width:16px; height:10px; border-radius:3px; background:#fff; }
.sva--pkkey .e1{ left:9px; } .sva--pkkey .e2{ left:30px; } .sva--pkkey .e3{ left:51px; }
.sva--pkkey .rg{ left:6.5px; top:6.5px; width:21px; height:15px; border-radius:5px; box-shadow:0 0 0 1.6px var(--sva-O); animation:pk-key-ring 4.5s var(--sva-out) infinite backwards; }
.sva--pkkey .tab{ left:9px; top:28px; width:30px; height:15px; border-radius:4px; background:var(--sva-ink); animation:pk-key-press 4.5s ease-out infinite; }
.sva--pkkey .tab::after{ content:"Tab"; position:absolute; left:5px; top:4px; font:500 7px/1 var(--font); color:#fff; letter-spacing:.02em; }
.sva--pkkey .k{ top:28px; width:12px; height:15px; border-radius:4px; background:#fff; }
.sva--pkkey .k1{ left:42px; } .sva--pkkey .k2{ left:57px; }

/* Ekrāna lasītājs: lasīšanas josla iet pa rindām, skaļrunis "runā" */
.sva--pkread .pg{ left:7px; top:7px; width:36px; height:38px; border-radius:4px; background:#fff; }
.sva--pkread .l{ left:12px; height:3px; border-radius:1.5px; background:rgba(17,19,21,.22); }
.sva--pkread .l1{ top:14px; width:20px; background:var(--sva-ink); } .sva--pkread .l2{ top:22px; width:26px; } .sva--pkread .l3{ top:30px; width:22px; } .sva--pkread .l4{ top:38px; width:16px; }
.sva--pkread .hl{ left:10px; top:11.5px; width:30px; height:8px; border-radius:2px; background:rgba(244,131,74,.38); animation:pk-read-hl 4.8s var(--sva-io) infinite backwards; }
.sva--pkread .spk{ left:48px; top:21px; width:6px; height:10px; border-radius:1.5px; background:var(--sva-ink); }
.sva--pkread .cn{ left:51px; top:16px; width:9px; height:20px; background:var(--sva-ink); clip-path:polygon(0 30%, 100% 0, 100% 100%, 0 70%); }
.sva--pkread .w{ border:1.6px solid var(--sva-ink); border-left:0; }
.sva--pkread .w1{ left:61px; top:19.5px; width:5px; height:13px; border-radius:0 7px 7px 0; animation:pk-read-w 1.2s ease-in-out infinite alternate; }
.sva--pkread .w2{ left:63px; top:14.5px; width:8px; height:23px; border-radius:0 12px 12px 0; animation:pk-read-w 1.2s ease-in-out .3s infinite alternate; }

/* Formas: kļūda ar ikonu un tekstu, tad lauks salabots */
.sva--pkform .lb{ left:10px; top:9px; width:18px; height:3px; border-radius:1.5px; background:rgba(17,19,21,.5); }
.sva--pkform .f{ left:10px; top:15px; width:42px; height:13px; border-radius:3px; background:#fff; }
.sva--pkform .tx{ left:14px; top:20.5px; width:24px; height:2px; border-radius:1px; background:rgba(17,19,21,.55); transform-origin:0 50%; animation:pk-form-tx 5s var(--sva-io) infinite backwards; }
.sva--pkform .er{ left:10px; top:15px; width:42px; height:13px; border-radius:3px; box-shadow:inset 0 0 0 1.6px #e5484d; opacity:0; animation:pk-form-er 5s ease-out infinite backwards; }
.sva--pkform .ei{ left:10px; top:32px; width:6px; height:6px; border-radius:50%; background:#e5484d; opacity:0; animation:pk-form-er 5s ease-out infinite backwards; }
.sva--pkform .em{ left:19px; top:33.5px; width:28px; height:3px; border-radius:1.5px; background:#e5484d; opacity:0; animation:pk-form-er 5s ease-out infinite backwards; }
.sva--pkform .ok{ left:10px; top:15px; width:42px; height:13px; border-radius:3px; box-shadow:inset 0 0 0 1.6px #2f9e63; animation:pk-form-ok 5s ease-out infinite backwards; }
.sva--pkform .ck{ left:43px; top:18px; width:7px; height:7px; border-radius:50%; background:#2f9e63; animation:pk-form-ok 5s ease-out infinite backwards; }
.sva--pkform .b{ left:56px; top:15px; width:12px; height:13px; border-radius:3px; background:var(--sva-ink); }

/* Pirkuma ceļš: prece, grozs, apmaksa iedegas pēc kārtas */
.sva--pkcart .tr{ left:14px; top:22.5px; width:48px; height:2px; border-radius:1px; background:rgba(17,19,21,.15); }
.sva--pkcart .fl{ left:14px; top:22.5px; width:48px; height:2px; border-radius:1px; background:var(--sva-O); transform-origin:0 50%; animation:pk-cart-fill 4.8s var(--sva-io) infinite backwards; }
.sva--pkcart .n{ top:16px; width:15px; height:15px; border-radius:50%; background:#fff; }
.sva--pkcart .n1{ left:6px; } .sva--pkcart .n2{ left:30.5px; } .sva--pkcart .n3{ left:55px; }
.sva--pkcart .n::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--sva-O); }
.sva--pkcart .n1::after{ animation:pk-cart-n1 4.8s var(--sva-out) infinite backwards; }
.sva--pkcart .n2::after{ animation:pk-cart-n2 4.8s var(--sva-out) infinite backwards; }
.sva--pkcart .n3::after{ background:var(--sva-ink); animation:pk-cart-n3 4.8s var(--sva-out) infinite backwards; }
.sva--pkcart .lb{ top:37px; height:2.5px; border-radius:1.5px; background:rgba(17,19,21,.22); }
.sva--pkcart .b1{ left:7px; width:13px; } .sva--pkcart .b2{ left:31px; width:13px; } .sva--pkcart .b3{ left:55px; width:13px; }

/* Video un attēli: kadrs ar subtitriem, kas mainās */
.sva--pkmedia .fr{ left:8px; top:6px; width:60px; height:30px; border-radius:4px; background:var(--sva-ink); overflow:hidden; }
.sva--pkmedia .mt{ left:2px; top:14px; width:32px; height:16px; background:rgba(255,255,255,.22); clip-path:polygon(0 100%, 42% 18%, 100% 100%); }
.sva--pkmedia .sun{ left:44px; top:5px; width:6px; height:6px; border-radius:50%; background:var(--sva-o); }
.sva--pkmedia .pl{ left:26px; top:10px; width:8px; height:10px; background:#fff; clip-path:polygon(0 0, 100% 50%, 0 100%); }
.sva--pkmedia .s{ top:41px; height:3px; border-radius:1.5px; background:var(--sva-ink); transform-origin:50% 50%; }
.sva--pkmedia .s1{ left:16px; width:44px; animation:pk-sub-a 4.4s var(--sva-io) infinite backwards; }
.sva--pkmedia .s2{ left:22px; width:32px; opacity:0; animation:pk-sub-b 4.4s var(--sva-io) infinite backwards; }

@keyframes pk-con-in{ 0%, 20%{ opacity:0; } 38%, 82%{ opacity:1; } 94%, 100%{ opacity:0; } }
@keyframes pk-con-bar{ 0%, 20%{ transform:translate3d(0,0,0) scaleX(.3); } 38%, 82%{ transform:translate3d(0,0,0) scaleX(1); } 94%, 100%{ transform:translate3d(0,0,0) scaleX(.3); } }
@keyframes pk-con-ok{ 0%, 36%{ opacity:0; transform:translate3d(0,0,0) scale(.5); } 46%, 82%{ opacity:1; transform:translate3d(0,0,0) scale(1); } 92%, 100%{ opacity:0; transform:translate3d(0,0,0) scale(.8); } }
@keyframes pk-key-ring{
  0%, 22%{ transform:translate3d(0,0,0); }
  28%, 52%{ transform:translate3d(21px,0,0); }
  58%, 82%{ transform:translate3d(42px,0,0); }
  88%, 100%{ transform:translate3d(0,0,0); }
}
@keyframes pk-key-press{ 0%, 21%, 27%, 51%, 57%, 81%, 87%, 100%{ transform:translate3d(0,0,0) scale(1); } 24%, 54%, 84%{ transform:translate3d(0,1px,0) scale(.92); } }
@keyframes pk-read-hl{
  0%, 18%{ transform:translate3d(0,0,0); }
  25%, 43%{ transform:translate3d(0,8px,0); }
  50%, 68%{ transform:translate3d(0,16px,0); }
  75%, 93%{ transform:translate3d(0,24px,0); }
  100%{ transform:translate3d(0,0,0); }
}
@keyframes pk-read-w{ 0%{ opacity:.25; } 100%{ opacity:1; } }
@keyframes pk-form-tx{ 0%, 46%{ transform:translate3d(0,0,0) scaleX(.42); } 54%, 92%{ transform:translate3d(0,0,0) scaleX(1); } 100%{ transform:translate3d(0,0,0) scaleX(.42); } }
@keyframes pk-form-er{ 0%, 10%{ opacity:0; } 16%, 44%{ opacity:1; } 50%, 100%{ opacity:0; } }
@keyframes pk-form-ok{ 0%, 52%{ opacity:0; } 58%, 88%{ opacity:1; } 96%, 100%{ opacity:0; } }
@keyframes pk-cart-fill{
  0%, 8%{ opacity:1; transform:translate3d(0,0,0) scaleX(0); }
  30%, 40%{ opacity:1; transform:translate3d(0,0,0) scaleX(.5); }
  62%, 88%{ opacity:1; transform:translate3d(0,0,0) scaleX(1); }
  96%, 100%{ opacity:0; transform:translate3d(0,0,0) scaleX(1); }
}
@keyframes pk-cart-n1{ 0%{ opacity:0; transform:scale(.4); } 8%, 88%{ opacity:1; transform:scale(1); } 96%, 100%{ opacity:0; transform:scale(1); } }
@keyframes pk-cart-n2{ 0%, 28%{ opacity:0; transform:scale(.4); } 36%, 88%{ opacity:1; transform:scale(1); } 96%, 100%{ opacity:0; transform:scale(1); } }
@keyframes pk-cart-n3{ 0%, 60%{ opacity:0; transform:scale(.4); } 68%, 88%{ opacity:1; transform:scale(1); } 96%, 100%{ opacity:0; transform:scale(1); } }
@keyframes pk-sub-a{ 0%{ opacity:0; transform:translate3d(0,0,0) scaleX(.6); } 8%, 42%{ opacity:1; transform:translate3d(0,0,0) scaleX(1); } 50%, 100%{ opacity:0; transform:translate3d(0,0,0) scaleX(1); } }
@keyframes pk-sub-b{ 0%, 50%{ opacity:0; transform:translate3d(0,0,0) scaleX(.6); } 58%, 92%{ opacity:1; transform:translate3d(0,0,0) scaleX(1); } 100%{ opacity:0; transform:translate3d(0,0,0) scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .sva--pkform .er, .sva--pkform .ei, .sva--pkform .em, .sva--pkmedia .s2{ opacity:0; }
}

/* Cilpas tikai tad, kad kartītes redzamas */
.js .sv-cards[data-v3-stagger]:not(.is-in) .sva span,
.js .sv-cards[data-v3-stagger]:not(.is-in) .sva span::after{ animation-play-state:paused; }

@keyframes sva-pop{
  0%{ opacity:0; transform:translate3d(0,-4px,0) scale(.86); }
  14%, 78%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
  90%, 100%{ opacity:0; transform:translate3d(0,-2px,0) scale(.94); }
}
@keyframes sva-glow{ 0%, 8%{ opacity:0; } 20%, 42%{ opacity:1; } 62%, 100%{ opacity:0; } }
@keyframes sva-fan-l{ 0%, 14%, 100%{ transform:translate3d(0,0,0) rotate(0deg); } 42%, 72%{ transform:translate3d(-7px,1px,0) rotate(-14deg); } }
@keyframes sva-fan-m{ 0%, 14%, 100%{ transform:translate3d(0,0,0); } 42%, 72%{ transform:translate3d(0,-3px,0); } }
@keyframes sva-fan-r{ 0%, 14%, 100%{ transform:translate3d(0,0,0) rotate(0deg); } 42%, 72%{ transform:translate3d(7px,1px,0) rotate(14deg); } }
@keyframes sva-cursor{
  0%{ opacity:0; transform:translate3d(12px,-16px,0); }
  10%{ opacity:1; transform:translate3d(12px,-16px,0); }
  34%{ transform:translate3d(0,0,0) scale(1); }
  39%{ transform:translate3d(0,0,0) scale(.82); }
  45%, 78%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
  90%, 100%{ opacity:0; transform:translate3d(0,0,0) scale(1); }
}
@keyframes sva-press{ 0%, 36%, 46%, 100%{ transform:translate3d(0,0,0) scale(1); } 40%{ transform:translate3d(0,0,0) scale(.9); } }
@keyframes sva-ripple{ 0%, 38%{ opacity:0; transform:scale(.3); } 42%{ opacity:.9; transform:scale(.45); } 62%, 100%{ opacity:0; transform:scale(1.35); } }
@keyframes sva-send{
  0%, 44%{ opacity:0; transform:translate3d(0,0,0); }
  48%{ opacity:1; transform:translate3d(0,0,0); }
  62%{ opacity:1; transform:translate3d(10px,0,0); }
  66%, 100%{ opacity:0; transform:translate3d(10px,0,0); }
}
@keyframes sva-hi{ 0%, 60%{ opacity:0; } 66%, 84%{ opacity:1; } 94%, 100%{ opacity:0; } }
@keyframes sva-type{
  0%{ opacity:1; transform:translate3d(0,0,0) scaleX(0); animation-timing-function:cubic-bezier(.3,0,.4,1); }
  16%, 80%{ opacity:1; transform:translate3d(0,0,0) scaleX(1); }
  90%, 100%{ opacity:0; transform:translate3d(0,0,0) scaleX(1); }
}
@keyframes sva-caret{
  0%{ opacity:1; transform:translate3d(-31px,0,0); animation-timing-function:cubic-bezier(.3,0,.4,1); }
  16%, 80%{ opacity:1; transform:translate3d(0,0,0); }
  90%, 100%{ opacity:0; transform:translate3d(0,0,0); }
}
@keyframes sva-blink{ 0%{ opacity:1; } 50%{ opacity:0; } }
@keyframes sva-mx{ 0%, 14%{ transform:translate3d(0,0,0); } 86%, 100%{ transform:translate3d(52px,0,0); } }
@keyframes sva-my{
  0%, 14%{ transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(.33,.67,.67,1); }
  50%{ transform:translate3d(0,-26px,0); animation-timing-function:cubic-bezier(.33,0,.67,.33); }
  86%, 100%{ transform:translate3d(0,0,0); }
}

@media (max-width: 700px){
  .sva{ top:18px; right:18px; transform:scale(.84); transform-origin:100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .sva span, .sva span::after{ animation:none !important; }
}

/* ==== Paveiktie darbi pakalpojuma lapā (svw-pf), 31.10.2026 ====
   template-parts/svc/v3-works.php. Pa kreisi liels projekta skats (dators bez pārlūka joslas + telefons),
   pa labi saraksts ar joslu, kas aizpildās un pārslēdz nākamo. Kustība tikai transform un opacity. */
.svw-pf__wrap{ display:grid; grid-template-columns:minmax(0, 1.62fr) minmax(0, 1fr); gap:clamp(32px, 4vw, 72px); align-items:stretch; }
.svw-pf__stage{
  position:relative; display:block; overflow:hidden; isolation:isolate; aspect-ratio:900 / 600;
  border-radius:28px; text-decoration:none;
  background:radial-gradient(60% 55% at 45% 45%, rgba(255,255,255,.95), rgba(255,255,255,0)) var(--panel);
}
.svw-pf.bg-white .svw-pf__stage{ background:radial-gradient(60% 55% at 45% 45%, rgba(255,255,255,.7), rgba(255,255,255,0)) var(--paper); }
.svw-pf__desk{
  position:absolute; left:7%; top:11%; width:74%; aspect-ratio:16 / 10; overflow:hidden;
  border-radius:10px; background:var(--white); box-shadow:0 14px 44px rgba(18,20,23,.12);
}
.svw-pf__phone{
  position:absolute; left:73%; top:27%; width:18.5%; aspect-ratio:95 / 206; overflow:hidden;
  border-radius:16px; background:var(--white);
  box-shadow:0 14px 40px rgba(18,20,23,.18), 0 0 0 1px rgba(17,19,21,.06);
}
.svw-pf__view{ position:absolute; inset:0; display:block; opacity:0; transition:opacity 600ms var(--ease-v3); }
.svw-pf__view.is-on{ opacity:1; }
.svw-pf__view img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:0; aspect-ratio:auto; }
.svw-pf__phone .svw-pf__view{ transform:translate3d(0, 10px, 0); transition:opacity 600ms var(--ease-v3), transform 700ms var(--ease-v3); }
.svw-pf__phone .svw-pf__view.is-on{ transform:translate3d(0, 0, 0); }

.svw-pf__side{ display:flex; flex-direction:column; justify-content:space-between; gap:36px; min-width:0; }
.svw-pf__list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.svw-pf__list > li{ border-bottom:1px solid var(--line); }
.svw-pf__item{
  position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:22px 0 21px; color:var(--muted); text-decoration:none;
}
.svw-pf__name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(20px, .45vw + 16px, 26px); font-weight:500; line-height:1.2; letter-spacing:-0.035em;
  color:inherit; transition:color 220ms var(--ease-v3);
}
.svw-pf__meta{ flex:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:1.5; color:var(--muted); }
.svw-pf__item.is-on{ color:var(--ink); }
.svw-pf__item:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:4px; }
.svw-pf__bar{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none; }
.svw-pf__bar i{
  display:block; width:100%; height:100%; background:var(--signal);
  transform:scaleX(0); transform-origin:0 50%; opacity:0;
}
.svw-pf__item.is-on .svw-pf__bar i{ opacity:1; transform:scaleX(1); }
.svw-pf__wrap.is-auto .svw-pf__item.is-on .svw-pf__bar i{ transform:scaleX(0); animation:svw-pf-fill 5s linear forwards; }
.svw-pf__wrap.is-paused .svw-pf__item.is-on .svw-pf__bar i,
.svw-pf__wrap.is-hold .svw-pf__item.is-on .svw-pf__bar i{ animation-play-state:paused; }
@keyframes svw-pf-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.svw-pf__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.svw-pf__note{ margin:0; max-width:260px; font-size:14px; line-height:1.5; color:var(--muted); }

@media (hover: hover) and (pointer: fine){
  .svw-pf__item:hover{ color:var(--ink); }
  .svw-pf__item:hover .svw-pf__name{ color:var(--signal); }
}
@media (max-width: 1100px){
  .svw-pf__wrap{ grid-template-columns:1fr; }
  .svw-pf__stage{ aspect-ratio:900 / 560; }
}
@media (max-width: 700px){
  .svw-pf__stage{ border-radius:22px; aspect-ratio:900 / 640; }
  .svw-pf__desk{ left:5%; top:12%; width:76%; border-radius:7px; }
  .svw-pf__phone{ left:72%; top:26%; width:22%; border-radius:11px; }
  .svw-pf__item{ flex-direction:column; align-items:flex-start; gap:4px; padding:16px 0 15px; }
  .svw-pf__meta{ max-width:100%; }
  .svw-pf__side{ gap:28px; }
  .svw-pf__cta .btn{ width:100%; justify-content:center; }
  .svw-pf__note{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .svw-pf__view, .svw-pf__phone .svw-pf__view, .svw-pf__name{ transition:none; }
  .svw-pf__phone .svw-pf__view{ transform:none; }
}

.svw-pf__live{ position:absolute; left:7%; bottom:5.5%; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.88); box-shadow:0 4px 16px rgba(18,20,23,.08); font-size:13px; line-height:1; color:var(--ink); }
.svw-pf__live b{ font-weight:500; }
.svw-pf__live i{ position:relative; width:7px; height:7px; border-radius:50%; background:#22a55b; flex:none; }
.svw-pf__live i::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22a55b; will-change:transform, opacity; animation:svw-pf-ping 2.4s ease-out infinite; }
@keyframes svw-pf-ping{ 0%{ opacity:.55; transform:scale(1); } 70%, 100%{ opacity:0; transform:scale(2.6); } }
@media (max-width: 700px){ .svw-pf__live{ left:5%; bottom:5%; height:26px; padding:0 10px; font-size:12px; } }
@media (prefers-reduced-motion: reduce){ .svw-pf__live i::after{ animation:none; opacity:0; } }