/* CY_BORG — картинки и анимации. Движение только через transform/opacity/clip-path; всё отключается при prefers-reduced-motion. */

/* ---------- ГЕРОЙ: скайлайн, дождь, прицел ---------- */
.hero .skyline { position: absolute; right: 0; bottom: 0; width: min(78vw, 980px); height: 78%; pointer-events: none; opacity: .9; mask-image: linear-gradient(90deg, transparent 0, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.hero .skyline svg { width: 100%; height: 100%; display: block; }
.hero .skyline .neon { filter: drop-shadow(0 0 6px currentColor); opacity: .85; }
.hero .rain {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(24,230,255,.5) 14px 15px, transparent 15px 38px);
  background-size: 120px 120px;
}
.hero .xmark { position: absolute; right: 4%; top: 28px; width: clamp(54px, 9vw, 120px); color: #fff; pointer-events: none; }
.hero .xmark svg { width: 100%; display: block; }
.hero .reticle { position: absolute; right: 18%; top: 22%; width: clamp(120px, 20vw, 260px); color: var(--r); pointer-events: none; opacity: .8; }
.hero .reticle svg { width: 100%; display: block; }
.hero .wrap { z-index: 1; }
/* глитч заголовка: два смещённых слоя */
.hero h1 { position: relative; }
.hero h1::before, .hero h1::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.hero h1::before { color: var(--c); text-shadow: none; clip-path: inset(0 0 100% 0); }
.hero h1::after { color: var(--p); text-shadow: none; clip-path: inset(100% 0 0 0); }

/* ---------- БЕГУЩАЯ СТРОКА ---------- */
.ticker { background: #000; color: var(--y); border-block: 3px solid var(--y); overflow: hidden; white-space: nowrap; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 20px; padding: 8px 0; }
.ticker.pink { background: var(--p); color: #000; border-color: #000; }
.ticker-in { display: inline-flex; gap: 34px; padding-left: 34px; }
.ticker-in span::after { content: '✕'; margin-left: 34px; color: var(--p); }
.ticker.pink .ticker-in span::after { color: #fff; }

/* ---------- ДЕКОР ПОЛОС ---------- */
.band::after { content: ''; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain; }
#s-name::after { right: -30px; top: 40px; width: 260px; height: 260px; opacity: .1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M12 12L88 88M88 12L12 88' stroke='white' stroke-width='18'/></svg>"); }
#s-class::after { right: 2%; top: 30px; width: 190px; height: 190px; opacity: .85; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M12 12L88 88M88 12L12 88' stroke='black' stroke-width='14' fill='none'/><circle cx='50' cy='50' r='44' stroke='black' stroke-width='3' fill='none' stroke-dasharray='4 5'/></svg>"); }
#s-abil::after { left: -60px; bottom: -60px; width: 340px; height: 340px; opacity: .22; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='h' width='6' height='6' patternUnits='userSpaceOnUse'><circle cx='3' cy='3' r='2.2'/></pattern></defs><circle cx='50' cy='50' r='48' fill='url(%23h)'/></svg>"); }
#s-gear::after { right: 3%; bottom: 20px; width: 220px; height: 70px; opacity: .55; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70'><g fill='white'><rect x='0' width='6' height='70'/><rect x='10' width='3' height='70'/><rect x='17' width='9' height='70'/><rect x='30' width='3' height='70'/><rect x='38' width='5' height='70'/><rect x='48' width='11' height='70'/><rect x='64' width='3' height='70'/><rect x='72' width='7' height='70'/><rect x='84' width='3' height='70'/><rect x='92' width='10' height='70'/><rect x='108' width='4' height='70'/><rect x='118' width='7' height='70'/><rect x='130' width='3' height='70'/><rect x='138' width='12' height='70'/><rect x='156' width='4' height='70'/><rect x='166' width='8' height='70'/><rect x='180' width='3' height='70'/><rect x='188' width='10' height='70'/><rect x='206' width='14' height='70'/></g></svg>"); }
#s-debt::after { right: 0; top: 0; width: 120px; height: 100%; opacity: .9; background: repeating-linear-gradient(135deg, #000 0 14px, transparent 14px 30px); mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); }
#s-glitch::after { left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, var(--p) 0 20%, var(--c) 20% 45%, var(--y) 45% 60%, var(--r) 60% 100%); }
#s-hp::after { right: 4%; top: 36px; width: 150px; height: 150px; opacity: .55; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%233a4cc4' stroke-width='3'><path d='M50 88C14 62 6 40 18 24c10-12 26-8 32 4 6-12 22-16 32-4 12 16 4 38-32 64z'/><path d='M10 52h26l6-14 10 28 8-14h30' stroke='%23ff3db4'/></svg>"); }
#s-look::after { left: 1%; top: 20px; width: 150px; height: 150px; opacity: .85; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6l12 30 32 2-25 20 9 32-28-18-28 18 9-32L6 38l32-2z' fill='%23ffe600' stroke='black' stroke-width='4'/></svg>"); }
#s-sheet::after { right: -20px; top: 20px; width: 240px; height: 240px; opacity: .08; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M12 12L88 88M88 12L12 88' stroke='white' stroke-width='18'/></svg>"); }
#s-class > .wrap, #s-gear > .wrap { z-index: 1; }

/* ---------- ЭМБЛЕМЫ КЛАССОВ ---------- */
.art { width: 100%; height: 100%; display: block; overflow: visible; }
.ccard .emblem { position: absolute; right: 12px; bottom: 12px; width: 60px; height: 60px; color: var(--y); opacity: .9; }
.ccard[aria-pressed=true] .emblem { color: #000; }
.ccard p { padding-right: 70px; }
.class-detail { position: relative; }
.class-detail .emblem { position: absolute; right: 18px; top: 16px; width: 92px; height: 92px; color: var(--y); opacity: .9; }
.class-detail h3, .class-detail .tagline { padding-right: 110px; }
.sheet-h .cl .emblem { display: inline-block; width: 44px; height: 44px; vertical-align: middle; margin-right: 6px; }
@media (max-width: 520px) { .class-detail .emblem { width: 56px; height: 56px; } .class-detail h3, .class-detail .tagline { padding-right: 66px; } }

/* ---------- АНИМАЦИИ (только если движение разрешено) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .rain { animation: rain 1.1s linear infinite; }
  @keyframes rain { to { background-position: -60px 120px; } }
  .hero .skyline .win.fl { animation: flick 3.2s steps(2, jump-none) infinite; }
  .hero .skyline .win.fl:nth-of-type(3n) { animation-delay: -1.1s; }
  .hero .skyline .neon { animation: neon 2.6s ease-in-out infinite alternate; }
  .hero .skyline .beacon { animation: beacon 1.6s ease-in-out infinite; }
  @keyframes flick { 0%, 40% { opacity: .9; } 45%, 52% { opacity: .1; } 60%, 100% { opacity: .8; } }
  @keyframes neon { 0%, 70% { opacity: .9; } 78% { opacity: .25; } 84%, 100% { opacity: .85; } }
  @keyframes beacon { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
  .hero .reticle svg { animation: spin 18s linear infinite; }
  .hero .reticle { animation: lock 4s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes lock { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
  .hero .xmark { animation: bob 5s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(8px) rotate(4deg); } }
  .hero h1 { animation: skew 6s steps(1) infinite; }
  .hero h1::before { animation: slice-a 5s steps(1) infinite; }
  .hero h1::after { animation: slice-b 5s steps(1) infinite; }
  @keyframes slice-a { 0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 90% { clip-path: inset(12% 0 62% 0); transform: translateX(-8px); } 94% { clip-path: inset(55% 0 20% 0); transform: translateX(6px); } 97% { clip-path: inset(30% 0 45% 0); transform: translateX(-4px); } }
  @keyframes slice-b { 0%, 89%, 100% { clip-path: inset(100% 0 0 0); transform: none; } 91% { clip-path: inset(40% 0 38% 0); transform: translateX(9px); } 95% { clip-path: inset(70% 0 8% 0); transform: translateX(-7px); } }
  @keyframes skew { 0%, 89%, 96%, 100% { transform: scaleY(1.18); } 92% { transform: scaleY(1.18) skewX(-4deg); } }
  .logo { animation: logo 7s steps(1) infinite; }
  @keyframes logo { 0%, 93%, 100% { transform: none; filter: none; } 94% { transform: translateX(-4px); filter: hue-rotate(80deg); } 96% { transform: translateX(5px) skewX(10deg); } }

  .ticker-in { animation: marq 28s linear infinite; will-change: transform; }
  .ticker.pink .ticker-in { animation-direction: reverse; animation-duration: 36s; }
  @keyframes marq { to { transform: translateX(-50%); } }

  /* появление шапок секций */
  .js .sec-h { opacity: 0; transform: translateX(-28px); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .js .sec-h.in { opacity: 1; transform: none; }
  .js .sec-h .tape { transform: rotate(-3deg) scale(.7); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .2s; }
  .js .sec-h.in .tape { transform: rotate(-3deg); }

  /* свежий результат броска */
  .fresh { animation: pop .42s cubic-bezier(.2, .9, .3, 1.2); }
  @keyframes pop {
    0% { opacity: .2; transform: scale(.9) skewX(8deg); filter: hue-rotate(90deg) brightness(1.8); }
    35% { opacity: 1; transform: translateX(-5px) skewX(-5deg); }
    60% { transform: translateX(4px); filter: none; }
    100% { transform: none; }
  }
  .res.fresh { box-shadow: 0 0 0 0 var(--y); animation: pop .42s cubic-bezier(.2, .9, .3, 1.2), ping .7s ease-out; }
  @keyframes ping { from { box-shadow: 0 0 0 0 rgba(255, 230, 0, .8); } to { box-shadow: 0 0 0 14px rgba(255, 230, 0, 0); } }

  /* дайс-трей: тряска, пока кубики «катятся» */
  .tray.rolling .dd i { animation: shake .1s linear infinite; }
  @keyframes shake { 25% { transform: translate(-2px, 2px) rotate(-6deg); } 75% { transform: translate(2px, -2px) rotate(6deg); } }
  .tray.on { animation: drop .25s cubic-bezier(.2, 1.3, .4, 1); }
  @keyframes drop { from { transform: translate(-50%, 24px) scale(.9); } }

  /* карточки классов и кнопки */
  .ccard .emblem { transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
  .ccard:hover .emblem { transform: rotate(-12deg) scale(1.12); }
  .ccard[aria-pressed=true] .emblem { animation: wob 2.8s ease-in-out infinite; }
  @keyframes wob { 50% { transform: rotate(6deg) scale(1.06); } }
  .class-detail .emblem { animation: wob 3.4s ease-in-out infinite; }
  .btn:active .die { transform: rotate(180deg); transition: transform .3s; }
  .btn .die { display: inline-block; transition: transform .3s; }
  .btn:hover .die { transform: rotate(-12deg); }
  .glitch-big { animation: gl 4s steps(1) infinite; }
  @keyframes gl { 0%, 90%, 100% { transform: none; text-shadow: none; } 92% { transform: translateX(-6px); text-shadow: 4px 0 var(--p), -4px 0 var(--c); } 95% { transform: translateX(5px) skewX(-8deg); text-shadow: -4px 0 var(--p), 4px 0 var(--c); } }
  .hp-big { animation: beat 1.4s ease-in-out infinite; transform-origin: left; }
  @keyframes beat { 0%, 100% { transform: scaleY(1.1); } 12% { transform: scaleY(1.18) scaleX(1.04); } 24% { transform: scaleY(1.1); } 36% { transform: scaleY(1.15); } }
  .steps a.on b { animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: .55; } }
  #s-glitch::after { background-size: 200% 100%; animation: bar 3s linear infinite; }
  @keyframes bar { to { background-position: -200% 0; } }
  #s-class::after { animation: spin 40s linear infinite; }
  #s-look::after { animation: bob 6s ease-in-out infinite; }
}
@media (max-width: 860px) {
  .hero .skyline { width: 100%; height: 55%; opacity: .5; }
  .hero .reticle, .hero .xmark { opacity: .5; }
  #s-class::after, #s-look::after, #s-hp::after { opacity: .25; }
  .ticker { font-size: 16px; }
}

@media print { .ticker, .hero .skyline, .band::after { display: none !important; } .js .sec-h { opacity: 1; transform: none; } }