:root{
  --bg:#05060c; --neon1:#5efcff; --neon2:#9b7cff;
  --text:#eef1ff; --muted:rgba(238,241,255,.82);
  --radar:#2dff9a; --radio:#60a5fa;
  --line:rgba(155,124,255,.38);
}
*{box-sizing:border-box}
html{background:#05060c}
body{
  margin:0;min-height:100vh;font-family:'Inter',system-ui,sans-serif;color:var(--text);
  background:radial-gradient(circle at 50% 100%,#0b0f2a,var(--bg));
}
/* Aura be sunkaus blur filtro */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 28% 38%,rgba(94,252,255,.16),transparent 52%),
    radial-gradient(circle at 72% 62%,rgba(155,124,255,.2),transparent 52%);
}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--neon1);outline-offset:3px}

/* Nostalgiški metai: tik CSS animacija */
.years{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.years-inner{position:absolute;left:50%;top:0;transform:translateX(-50%);will-change:transform;animation:drift 850s linear infinite}
@keyframes drift{from{transform:translate(-50%,0)}to{transform:translate(-50%,-50%)}}
.year{margin:36px 0;font-size:68px;line-height:1.2;font-weight:700;letter-spacing:4px;text-align:center;user-select:none;
  color:rgba(155,124,255,.08);text-shadow:0 0 28px rgba(155,124,255,.3)}

/* LT/EN, atgal, valdikliai */
.language-switch{position:fixed;top:22px;right:24px;display:flex;align-items:center;gap:5px;padding:4px;background:#11192bef;border:1px solid var(--radio);border-radius:12px;z-index:6;color:#a4b4ce}
.language-switch button{font:600 13px 'Inter',system-ui,sans-serif;min-width:44px;min-height:40px;border:0;border-radius:8px;background:transparent;color:#c3d0e6;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:#203b48;color:var(--radar)}
.language-switch button:hover{color:var(--radar)}
.back{
  position:fixed;top:22px;left:24px;z-index:6;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px 0 10px;
  border-radius:12px;text-decoration:none;font-size:14px;font-weight:600;color:#b9c4e6;
  background:#11192bef;border:1px solid var(--line);transition:color .2s,border-color .2s;
}
.back svg{width:18px;height:18px}
.back:hover{color:var(--radar);border-color:var(--radar)}

.fab{position:fixed;bottom:22px;right:22px;z-index:6;display:flex;gap:10px}
.iconBtn{
  position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;cursor:pointer;
  background:rgba(10,12,30,.82);border:1px solid rgba(94,252,255,.6);color:rgba(94,252,255,.95);
  box-shadow:0 0 12px rgba(94,252,255,.35);transition:border-color .2s,color .2s,box-shadow .2s;
}
.iconBtn svg{width:24px;height:24px}
.iconBtn:hover{box-shadow:0 0 18px rgba(94,252,255,.55)}
.iconBtn.is-muted::after{content:"";position:absolute;width:28px;height:2px;background:rgba(155,124,255,.95);transform:rotate(-22deg)}
.icon-play{display:none}
.is-paused .icon-pause{display:none}
.is-paused .icon-play{display:block}
.is-paused .scroll-btn{border-color:rgba(155,124,255,.7);color:rgba(155,124,255,.95)}

/* Kortelė: stovi vietoje */
.stage{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;padding:96px 18px 92px}
.card{
  position:relative;width:min(1040px,100%);display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(20px,3vw,38px);border-radius:28px;
  background:rgba(10,12,30,.64);border:1px solid var(--line);
  box-shadow:0 0 40px rgba(155,124,255,.28),0 0 120px rgba(94,252,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.portrait{position:relative;margin:0}
.portrait::before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(circle,rgba(94,252,255,.22),rgba(155,124,255,.12) 55%,transparent 72%)}
.portrait img{
  position:relative;display:block;width:100%;max-width:340px;height:auto;max-height:min(520px,58vh);margin:0 auto;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(94,252,255,.12)) drop-shadow(0 0 30px rgba(155,124,255,.14));
}
.story{min-width:0}
h1{margin:0 0 14px;font-size:clamp(26px,3vw,32px);font-weight:700;letter-spacing:.4px;color:var(--neon1);
  text-shadow:0 0 6px rgba(94,252,255,.7),0 0 18px rgba(94,252,255,.5)}

/* Skaitymo langas */
.reader{position:relative;height:clamp(300px,54vh,520px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%)}
.track{will-change:transform;counter-reset:chap}
.track>*{counter-increment:chap}
.kicker{display:block;margin-bottom:6px;font:600 12.5px 'JetBrains Mono',monospace;letter-spacing:.4px;color:var(--neon1);text-shadow:0 0 10px rgba(94,252,255,.5)}
.kicker::before{content:counter(chap,decimal-leading-zero) " · "}
.track p{margin:0 0 1.2em;font-size:clamp(16.5px,1.45vw,18.5px);line-height:1.8;color:var(--muted);text-shadow:0 0 12px rgba(155,124,255,.2)}

/* QSL kortelė: istorijos pabaiga */
.qsl{margin:2em 0 0;padding:22px 22px 18px;border-radius:18px;text-align:center;
  border:1px solid rgba(94,252,255,.45);background:linear-gradient(135deg,rgba(94,252,255,.09),rgba(155,124,255,.12));
  box-shadow:inset 0 0 30px rgba(94,252,255,.06),0 0 26px rgba(155,124,255,.18)}
.qsl .kicker{margin-bottom:10px;font-style:italic}
.qsl .kicker::before{content:none}
.qsl-call{font:700 clamp(26px,3vw,38px)/1.1 'JetBrains Mono',monospace;color:var(--radar);text-shadow:0 0 14px rgba(45,255,154,.45)}
.qsl-line{margin-top:6px;font:500 14px 'JetBrains Mono',monospace;color:var(--muted)}
.qsl-73{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.qsl-73 b{font:700 38px/1 'JetBrains Mono',monospace;color:#fff;text-shadow:0 0 12px rgba(94,252,255,.6)}
.morse{display:inline-flex;align-items:center;gap:6px}
.morse i{display:block;height:8px;border-radius:4px;background:var(--neon1);box-shadow:0 0 8px var(--neon1);animation:morse 3.2s ease-in-out infinite}
.m-dot{width:8px}.m-dash{width:24px}.m-gap{width:12px;background:none!important;box-shadow:none!important;animation:none!important}
.morse i:nth-child(1){animation-delay:0.00s}
.morse i:nth-child(2){animation-delay:0.16s}
.morse i:nth-child(3){animation-delay:0.32s}
.morse i:nth-child(4){animation-delay:0.48s}
.morse i:nth-child(5){animation-delay:0.64s}
.morse i:nth-child(6){animation-delay:0.80s}
.morse i:nth-child(7){animation-delay:0.96s}
.morse i:nth-child(8){animation-delay:1.12s}
.morse i:nth-child(9){animation-delay:1.28s}
.morse i:nth-child(10){animation-delay:1.44s}
.morse i:nth-child(11){animation-delay:1.60s}
@keyframes morse{0%,55%,100%{opacity:.3}15%,35%{opacity:1}}
.qsl-note{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* Kilimas į viršų (A ir B) */
.track.run{animation:credits var(--dur,60s) linear infinite both}
@keyframes credits{from{transform:translateY(var(--y0,0px))}to{transform:translateY(var(--y1,-100%))}}
.is-paused .track.run{animation-play-state:paused}


/* B: kino titrai (perspektyva) */
[data-variant="crawl"] .card{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-variant="crawl"] .reader{height:clamp(360px,64vh,600px);perspective:420px;perspective-origin:50% 35%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 86%,transparent 100%)}
[data-variant="crawl"] .track{transform-origin:50% 100%}
[data-variant="crawl"] .track.run{animation-name:crawl}
@keyframes crawl{from{transform:rotateX(24deg) translateY(var(--y0,0px))}to{transform:rotateX(24deg) translateY(var(--y1,-100%))}}
[data-variant="crawl"] .track p{font-size:clamp(18px,1.7vw,21px);color:#e4e9ff;text-shadow:0 0 14px rgba(94,252,255,.25)}

/* C: po vieną ištrauką */
.stepper{display:none}
[data-variant="stanzas"] .reader{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
[data-variant="stanzas"] .track{display:grid;min-height:clamp(220px,34vh,320px);align-items:center}
[data-variant="stanzas"] .track>*{grid-area:1/1;margin:0;opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity .9s ease,transform .9s ease;font-size:clamp(18px,1.75vw,22px);line-height:1.65}
[data-variant="stanzas"] .track>.is-active{opacity:1;transform:none;pointer-events:auto}
[data-variant="stanzas"] .track>.is-past{opacity:0;transform:translateY(-28px)}
[data-variant="stanzas"] .stepper{display:flex;align-items:center;gap:8px;margin-top:20px}
.dial{flex:1;min-width:0}
.dial-readout{margin-bottom:6px;font:600 13px 'JetBrains Mono',monospace;color:var(--neon1);text-shadow:0 0 10px rgba(94,252,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dial-scale{display:flex;align-items:flex-end;height:34px;border-bottom:1px solid rgba(238,241,255,.25)}
.tick{flex:1;min-width:12px;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0;border:0;background:none;cursor:pointer}
.tick::before{content:"";width:2px;height:10px;border-radius:2px;background:rgba(238,241,255,.35);transition:height .3s,background .3s,box-shadow .3s}
.tick:hover::before{background:rgba(238,241,255,.75)}
.tick[aria-current="true"]::before{width:3px;height:28px;background:var(--neon1);box-shadow:0 0 12px var(--neon1)}
.step-btn{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(10,12,30,.8);border:1px solid rgba(94,252,255,.5);color:var(--neon1);transition:border-color .2s,color .2s}
.step-btn svg{width:20px;height:20px}
.step-btn:hover{border-color:var(--radar);color:var(--radar)}

/* Be JS arba "mažiau judesio": visas tekstas statiškas */
.static-text .reader{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none;perspective:none}
.static-text .track{display:block!important;min-height:0!important;animation:none!important;transform:none!important}
.static-text .track>*{opacity:1!important;transform:none!important;pointer-events:auto!important;font-size:clamp(16.5px,1.45vw,18.5px)!important}
.static-text .stepper,.static-text .scroll-btn{display:none!important}

/* Demo juosta (tik su ?demo) */
.demo{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:7;display:flex;gap:6px;padding:5px;border-radius:14px;background:#11192bf2;border:1px solid var(--radio)}
.demo[hidden]{display:none}
.demo button{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#c3d0e6;font:600 13px 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.demo button[aria-pressed="true"]{background:#203b48;color:var(--radar)}

@media(max-width:920px){
  .stage{padding:110px 14px 96px}
  .card{grid-template-columns:1fr}
  .portrait img{max-width:240px;max-height:32vh}
  .reader{height:clamp(280px,46vh,440px)}
  [data-variant="crawl"] .reader{height:clamp(320px,56vh,520px)}
  .year{font-size:52px}
}
@media(max-width:620px){
  .language-switch{top:14px;right:16px}
  .back{top:14px;left:16px}
  .demo{left:12px;right:12px;transform:none;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
  .years-inner{animation:none}
  .morse i{animation:none}
  *,*::before,*::after{transition:none!important}
}

.track{position:relative;display:flow-root}
.track>div[aria-hidden="true"]{display:flow-root}
.demo{display:none!important}

/* Native touch scrolling with a discreet scrollbar. */
.manual-reader .reader{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(94,252,255,.42) transparent;-webkit-overflow-scrolling:touch;padding-right:12px;scroll-behavior:auto}
.manual-reader .track{animation:none!important;transform:none!important;will-change:auto;padding-top:var(--reader-half,160px);padding-bottom:var(--reader-half,160px)}
.reader::-webkit-scrollbar{width:5px}
.reader::-webkit-scrollbar-thumb{background:rgba(94,252,255,.38);border-radius:8px}
.reader::-webkit-scrollbar-track{background:transparent}
.reader:focus-visible{outline:1px solid rgba(94,252,255,.6);outline-offset:6px;border-radius:8px}
