/* ══════════════════════════════════════════════════════════════════════════
   Grafické prvky a pohyb — všetko odvodené zo znaku

   Znak má dve časti: šikmé pruhy klapky a stĺpce zvukovej stopy. Z nich sú
   odvodené všetky ozdoby nižšie, takže stránka drží jeden vizuálny jazyk.

   Pohyb je viazaný na `prefers-reduced-motion` a na šírku obrazovky —
   na telefóne sa paralaxa vypína, lebo tam iba seká a vybíja batériu.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Šikmé pruhy z klapky ──────────────────────────────────────────────── */
.stripes{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(
    -47deg, var(--acc) 0 3px, transparent 3px 26px);
  opacity:.14;
}
.stripes.soft{opacity:.07}
.stripes.ink{background-image:repeating-linear-gradient(
    -47deg, var(--ink) 0 3px, transparent 3px 26px);opacity:.06}
/* Odrezanie do klinu, aby pruhy nekončili natvrdo hranou */
.stripes.fade{-webkit-mask-image:linear-gradient(180deg,#000,transparent);
              mask-image:linear-gradient(180deg,#000,transparent)}
.stripes.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent);
                mask-image:linear-gradient(90deg,#000 35%,transparent)}

/* ── Stĺpce zvukovej stopy ─────────────────────────────────────────────── */
.eq{display:flex;align-items:flex-end;gap:4px;height:44px;pointer-events:none}
.eq i{flex:1;min-width:3px;background:var(--acc);border-radius:99px;
      transform-origin:bottom;animation:eqb 1.5s ease-in-out infinite}
.eq.ink i{background:var(--ink)}
.eq.slim{height:26px;gap:3px}
@keyframes eqb{
  0%,100%{transform:scaleY(.32)}
  50%    {transform:scaleY(1)}
}

/* Pás stĺpcov ako oddeľovač sekcií — rytmus, nie čiara */
.eqrule{display:flex;align-items:flex-end;gap:5px;height:34px;overflow:hidden;
        opacity:.5;pointer-events:none}
.eqrule i{flex:1;background:var(--acc);border-radius:99px 99px 0 0}

/* ── Paralaxa ──────────────────────────────────────────────────────────── */
/* Vrstvy sa posúvajú len cez transform — nič iné neprekresľuje stránku. */
.px{position:relative;overflow:hidden}
.px-l{position:absolute;inset:-12% -6%;will-change:transform;pointer-events:none}
.px-glow{background:radial-gradient(42% 40% at 50% 45%,
         rgba(200,243,29,.42),transparent 68%)}
.px-photo{background-size:cover;background-position:center;opacity:.30;
          -webkit-mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent);
          mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent)}

/* ── Objavovanie pri rolovaní ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.8,.3,1),
               transform .7s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:.09s} .rv-3{transition-delay:.18s}
.rv-4{transition-delay:.27s} .rv-5{transition-delay:.36s} .rv-6{transition-delay:.45s}

/* ── Bežiaci pás ───────────────────────────────────────────────────────── */
.tick{overflow:hidden;background:var(--ink);color:#fff;padding:15px 0;
      position:relative}
.tick-in{display:flex;gap:0;width:max-content;animation:tickm 26s linear infinite}
.tick span{display:inline-flex;align-items:center;gap:20px;padding-right:20px;
           font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.tick b{color:var(--acc)}
.tick svg{width:17px;height:17px;color:var(--acc);flex:none}
@keyframes tickm{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Rámovanie obsahu ──────────────────────────────────────────────────── */
/* Roh z klapky — šikmý zrez, ktorý sa opakuje na kartách */
.notch{clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),
                         calc(100% - 22px) 100%,0 100%,0 22px)}

/* Veľký vodoznak zo znaku do pozadia sekcie */
.wmark{position:absolute;pointer-events:none;opacity:.045;color:var(--ink);
       width:clamp(230px,34vw,460px)}
.wmark.lime{color:var(--acc);opacity:.1}

/* ── Ohľad na pohyb a malé obrazovky ───────────────────────────────────── */
@media (max-width:820px){
  .px-l{inset:-6% -3%}
  .px-photo{opacity:.2}
}
@media (prefers-reduced-motion:reduce){
  .eq i,.tick-in{animation:none}
  .eq i{transform:scaleY(.7)}
  .rv{opacity:1;transform:none;transition:none}
  .px-l{transform:none!important}
}