/* Portfolio carousel — shared by / and /svetainiu-kurimas (one copy; pages link it right before the section,
   so it never blocks the hero). Uses the page tokens: --s2…--s5, --font-head/--font-body, --grad, --*-rgb, --sx-ease, --text, --mute.
   One project per slide: preview left (tilted, glowing browser window), details right; neighbours dim; name pills + progress line. */
.cases { position:relative; }
.cases__view { position:relative; }
.cases__rail { position:relative; z-index:1; display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; outline:none; padding:44px 0 60px; margin-bottom:-30px; }
.cases__rail::-webkit-scrollbar { display:none; }

.case { position:relative; isolation:isolate; flex:0 0 100%; scroll-snap-align:center; display:grid; grid-template-columns:1.3fr 1fr; gap:var(--s5); align-items:stretch;
  padding:0 var(--s4) 0 var(--s5); opacity:.28; transform:scale(.94); transition:opacity .6s, transform .8s var(--sx-ease); }
.case.is-on { opacity:1; transform:none; }
/* the stage glow and the ring under the frame live in a still layer behind the rail: a scroller clips both axes, so glows
   inside it ended in a visible rectangle at the rail's edges. Every slide has the same layout, so they sit under whichever
   frame is shown. The frame's own shadows are sized to fade out inside the rail's padding. */
.cases__glow { position:absolute; inset:0; z-index:0; pointer-events:none; }
.cases__glow::before { content:""; position:absolute; left:3%; top:0; width:58%; height:calc(100% - 30px); border-radius:50%; background:radial-gradient(closest-side, rgba(var(--em-rgb),0.32), rgba(var(--blue-rgb),0.18) 55%, transparent 72%); }
.cases__glow::after { content:""; position:absolute; left:4%; width:52%; bottom:4px; height:70px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(var(--cy-rgb),0.3), 0 0 40px -6px rgba(var(--cy-rgb),0.35); transition:box-shadow .6s, transform .9s var(--sx-ease); }

/* the frame never moves with the page (fixed tilt, nothing on scroll). Mouse hover only: it eases back and settles onto the
   ring under it, and returns on leave. The hover zone is the still .case__stage, so the moving frame can't flicker at its edges. */
.case__stage { display:grid; min-width:0; }
.case__frame { border-radius:16px; overflow:hidden; background:#0d131c; transform:perspective(1600px) rotateY(6deg) rotateX(2deg); transform-origin:100% 50%; transition:transform .9s var(--sx-ease), box-shadow .6s;
  box-shadow:0 0 0 1px rgba(var(--cy-rgb),0.35), 0 26px 40px -24px rgba(0,0,0,0.9), 0 0 56px -22px rgba(var(--em-rgb),0.6); }
.case__frame:has(.is-live) { box-shadow:0 0 0 1px rgba(var(--mint-rgb),0.55), 0 26px 40px -24px rgba(0,0,0,0.9), 0 0 60px -20px rgba(var(--em-rgb),0.75); }
@media (hover:hover) and (pointer:fine){
  .case.is-on .case__stage:hover .case__frame { transform:perspective(1600px) rotateY(0deg) rotateX(7deg) translateY(14px);
    box-shadow:0 0 0 1px rgba(var(--mint-rgb),0.5), 0 18px 30px -20px rgba(0,0,0,0.9), 0 0 60px -20px rgba(var(--em-rgb),0.75); }
  .cases:has(.case.is-on .case__stage:hover) .cases__glow::after { transform:scale(1.04); box-shadow:inset 0 0 0 1px rgba(var(--cy-rgb),0.6), 0 0 60px -4px rgba(var(--cy-rgb),0.55); }
}
.case__bar { display:flex; align-items:center; gap:6px; height:34px; padding:0 14px; background:#121a25; border-bottom:0.5px solid rgba(255,255,255,0.06); }
.case__bar i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.16); }
.case__bar i:first-child { background:rgb(var(--em-rgb)); }
.case__bar span { margin-left:10px; font-size:12px; color:rgba(255,255,255,0.6); }
/* the page never gets hijacked: until the visitor clicks/taps the frame, the preview is still and page scroll passes through;
   after the click it scrolls inside; clicking outside, leaving the frame or changing the slide releases it (mouse and touch alike) */
.case__scroll { position:relative; height:500px; overflow:hidden; cursor:pointer; scrollbar-width:thin; scrollbar-color:rgba(var(--em-rgb),0.4) transparent; }
.case__scroll.is-live { overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; cursor:auto; box-shadow:inset 0 0 0 1.5px rgba(var(--em-rgb),0.55); }
.case__scroll img { display:block; width:100%; height:auto; }
.case__hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:1; font-size:11px; letter-spacing:0.1em; color:#fff; background:rgba(7,7,8,0.82); border:0.5px solid rgba(255,255,255,0.18); border-radius:100px; padding:7px 13px; white-space:nowrap; opacity:0; transition:opacity .3s; pointer-events:none; }
.case.is-on .case__hint { opacity:1; }
.case__scroll.is-live .case__hint { opacity:0; }

.case__info { display:flex; flex-direction:column; padding:var(--s2) 0 var(--s2) var(--s2); }
.case__info > * { transition:opacity .6s .15s, transform .7s var(--sx-ease) .15s; }
.case:not(.is-on) .case__info > * { opacity:0; transform:translateX(16px); }
.case__num { font:800 14px var(--font-head); letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--mint-rgb)); }
.case__num span { color:var(--mute); }
.case__name { font-family:var(--font-head); font-weight:800; font-size:clamp(30px,3vw,44px); letter-spacing:-0.02em; margin:12px 0 14px; background:linear-gradient(90deg, #fff 55%, rgb(var(--mint-rgb))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.case__chips { display:flex; flex-wrap:wrap; gap:8px; }
.case__chip { font-size:13px; color:rgba(255,255,255,0.85); border:0.5px solid rgba(255,255,255,0.14); border-radius:100px; padding:6px 12px; }
.case__chip--tag { color:#04241c; background:var(--grad); border-color:transparent; font-weight:600; }
.case__desc { font-size:17px; line-height:1.65; color:rgba(255,255,255,0.8); margin-top:var(--s3); }
.case__label { font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); margin-top:var(--s4); }
.case__list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }
.case__list li { position:relative; padding-left:24px; font-size:15px; color:rgba(255,255,255,0.8); }
.case__list li::before { content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px rgba(var(--mint-rgb),0.6); }
.case__actions { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:auto; padding-top:var(--s4); }
.case__cta { color:rgb(var(--mint-rgb)); font-weight:600; font-size:15px; }

.cases__nav { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:var(--s2); max-width:1060px; margin:var(--s3) auto 0; }
.cases__arrow { flex:none; width:52px; height:52px; border-radius:50%; border:0.5px solid rgba(255,255,255,0.18); background:rgba(10,16,24,0.6); color:var(--text); font-size:20px; cursor:pointer; transition:border-color .25s, background .25s, opacity .25s; }
.cases__arrow:hover { border-color:rgba(var(--em-rgb),0.6); background:rgba(var(--em-rgb),0.1); }
.cases__arrow:disabled { opacity:.3; cursor:default; }
.cases__dots { display:flex; flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:center; gap:8px; }
.cases__dots button { padding:7px 14px; border:none; border-radius:30px; font:600 13px var(--font-body); color:rgba(255,255,255,0.7); background:rgba(10,16,24,0.6); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.16); cursor:pointer; transition:color .3s, background .3s, box-shadow .3s; }
.cases__dots button:hover { color:#fff; box-shadow:inset 0 0 0 0.5px rgba(var(--mint-rgb),0.5); }
.cases__dots button.on { color:#03241b; background:var(--grad); box-shadow:0 0 22px -4px rgba(var(--mint-rgb),0.7); }
.cases__arrow:focus-visible, .cases__dots button:focus-visible, .cases__rail:focus-visible { outline:2px solid rgb(var(--cy-rgb)); outline-offset:3px; }
.cases__prog { max-width:420px; height:2px; margin:var(--s3) auto 0; border-radius:2px; background:rgba(255,255,255,0.1); overflow:hidden; }
/* mouse/trackpad: the rail only moves with the arrows, pills and keys (a sideways trackpad nudge while scrolling the page must not slide it) */
@media (hover:hover) and (pointer:fine){ .cases__rail { overflow-x:hidden; } }
.cases__prog i { display:block; height:100%; background:var(--grad); transform-origin:0 50%; transform:scaleX(var(--p, .111)); transition:transform .6s var(--sx-ease); }

@media (max-width:960px){
  .cases__rail { padding:28px 0 30px; margin-bottom:0; }
  .case { grid-template-columns:minmax(0,1fr); gap:var(--s3); padding:0 4px; }
  .cases__glow::before { left:0; top:0; width:100%; height:470px; }
  .cases__glow::after { left:8%; width:84%; bottom:auto; top:412px; }
  .case__frame { transform:perspective(1400px) rotateX(6deg); transform-origin:50% 100%; }
  .case__scroll { height:380px; }
  .case__info { padding:var(--s2) 0 0; }
  .case__name { margin:8px 0 10px; }
  .cases__dots { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:4px 2px; -webkit-mask:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .cases__dots::-webkit-scrollbar { display:none; }
  .cases__dots button { flex:none; }
}
@media (prefers-reduced-motion:reduce){
  .case, .case__info > * { opacity:1 !important; transform:none !important; }
  .case__frame, .cases__glow::after { transition:none; }
}