/* styles.css — tools.manulexe.ru */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --p: #f801fc; --c: #0ff; --g: #3dff7a; --ease: cubic-bezier(.22,1,.36,1); }

html { background: #000; }
html, body {
    height: 100%; overflow: hidden; color: #fff;
    font-family: "Pixelify Sans", sans-serif; user-select: none;
    cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur686.cur), auto;
}
body { background: radial-gradient(ellipse at 50% 42%, rgba(248,1,252,.14), transparent 62%), #000; }
a, button { cursor: inherit; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#rain {
    opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 18%, #000 90%);
            mask-image: radial-gradient(ellipse at center, transparent 18%, #000 90%);
}
#sparks { z-index: 1; }

.crt {
    position: fixed; inset: 0; z-index: 5; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%);
    animation: flicker 4s infinite;
}
@keyframes flicker { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.85} 94%{opacity:1} 97%{opacity:.9} }

/* ===== layout ===== */
.stage {
    position: relative; z-index: 2; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; padding: 0 1rem;
}
.head { text-align: center; padding-top: clamp(1.2rem, 7vh, 4.5rem); animation: drop 1.1s var(--ease) both; }
@keyframes drop { from { opacity: 0; translate: 0 -30px; } }
@keyframes up { from { opacity: 0; translate: 0 30px; } }
@keyframes fadeIn { from { opacity: 0; } }

#logo {
    position: relative; display: inline-block; font-weight: 400;
    font-size: clamp(3.6rem, 12vw, 7.5rem); letter-spacing: 6px; line-height: 1;
    text-shadow: 0 0 20px var(--p), 0 0 50px var(--p);
}
#logo::before, #logo::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
#logo::before { color: #0ff; transform: translate(-3px,0); clip-path: inset(0 0 55% 0); }
#logo::after  { color: #f0f; transform: translate(3px,0);  clip-path: inset(55% 0 0 0); }
#logo.ready::before, #logo.ready::after { animation: glitch 3.2s infinite steps(1); }
@keyframes glitch {
    0%,86%,100% { opacity: 0; }
    87% { opacity: .9; transform: translate(-4px,1px); }
    89% { opacity: .9; transform: translate(4px,-1px); }
    91% { opacity: .9; transform: translate(-2px,0); }
    93% { opacity: 0; }
}

/* tools — переливается как WELCOME на основном сайте, цвет бежит волной по буквам */
.sub { margin-top: .1rem; font-size: clamp(1.6rem, 4.2vw, 2.6rem); letter-spacing: 10px; animation: fadeIn .9s .9s both; }
.sub span {
    display: inline-block;
    animation: wave 1.8s ease-in-out infinite, tint 5s linear infinite;
    animation-delay: calc(var(--i) * .12s), calc(var(--i) * -.45s);
}
.cur {
    display: inline-block; width: .5em; height: .85em; margin-left: .15em; vertical-align: -.05em;
    background: currentColor; box-shadow: 0 0 12px currentColor;
    animation: blink 1s steps(1) infinite, tint 5s linear infinite;
}
@keyframes wave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.28em); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes tint {
    0%,100% { color: #f801fc; text-shadow: 0 0 18px #f801fc; }
    20% { color: #ff3b3b; text-shadow: 0 0 18px #ff0000; }
    40% { color: #ffe14d; text-shadow: 0 0 18px #ffff00; }
    60% { color: #3dff7a; text-shadow: 0 0 18px #00ff00; }
    80% { color: #4db8ff; text-shadow: 0 0 18px #0088ff; }
}

/* ===== карточки ===== */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.8rem, 2.5vw, 2rem); margin: auto 0; }
/* плавание вверх-вниз: у каждой своя фаза */
.fl { animation: float 3.8s ease-in-out calc(var(--n) * -1.3s) infinite alternate; }
@keyframes float { from { transform: translateY(-12px); } to { transform: translateY(12px); } }

.card {
    --a: var(--p);
    position: relative; overflow: hidden; display: grid; place-items: center;
    width: clamp(150px, 19vw, 230px); aspect-ratio: 1; padding: 1rem;
    font: inherit; font-size: clamp(1.2rem, 2vw, 1.7rem); color: #fff;
    background: rgba(10,6,14,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 2px solid var(--a);
    transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
    transition: transform .45s var(--ease), background-color .3s;
    animation:
        rise 1s var(--ease) calc(1.2s + var(--n) * .18s) both,
        glow 2.4s ease-in-out calc(var(--n) * .4s) infinite alternate;
}
.c-cyan  { --a: var(--c); }
.c-green { --a: var(--g); }
.card:hover { --s: 1.06; background-color: color-mix(in srgb, var(--a) 20%, rgba(10,6,14,.85)); }
.card:active { --s: .96; }
.card:focus-visible, .back:focus-visible { outline: 2px dashed #fff; outline-offset: 5px; }

@keyframes rise { from { opacity: 0; translate: 0 60px; scale: .8; filter: blur(8px); } }
@keyframes glow {
    from { box-shadow: 0 0 10px color-mix(in srgb, var(--a) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--a) 18%, transparent); }
    to   { box-shadow: 0 0 28px var(--a), inset 0 0 20px color-mix(in srgb, var(--a) 35%, transparent); }
}

.card::before {
    content: ""; position: absolute; top: 0; left: -70%; width: 35%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg);
}
.card:hover::before { animation: sweep .9s var(--ease); }
@keyframes sweep { to { left: 140%; } }

.label { position: relative; z-index: 1; text-align: center; line-height: 1.1; text-shadow: 0 0 12px var(--a); }
.rainbow {
    text-shadow: none; color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, #f801fc, #ff4d6d, #ffd23f, #3dff7a, #0ff, #8b00ff, #f801fc);
    background-size: 300% 100%; animation: flow 3s linear infinite;
    filter: drop-shadow(0 0 8px rgba(248,1,252,.6));
}
@keyframes flow { to { background-position: -300% 0; } }

/* SOON — плавная шторка сверху, буквы падают по очереди */
.soon {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 42%, #06030a), #06030a 85%);
    border-bottom: 2px solid var(--a);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--a) 60%, transparent);
    transform: translateY(-102%); transition: transform .55s cubic-bezier(.6,0,.4,1);
}
.soon::before {
    content: ""; position: absolute; inset: 0; opacity: .2;
    background: repeating-linear-gradient(135deg, var(--a) 0 2px, transparent 2px 14px);
}
.soon::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-20deg);
    animation: sweep 2.4s ease-in-out infinite;
}
.soon > span { position: relative; z-index: 1; font-size: 1.5em; }
.soon b {
    display: inline-block; margin: 0 .06em; font-weight: 400; text-shadow: 0 0 14px var(--a);
    opacity: 0; transform: translateY(-1.1em); transition: transform .3s, opacity .2s;
}
.card.on .soon { transform: none; transition: transform .8s var(--ease); }
.card.on .soon b {
    opacity: 1; transform: none;
    transition: transform .7s var(--ease) calc(.25s + var(--k) * .07s), opacity .4s ease calc(.25s + var(--k) * .07s);
}

/* ===== кнопка Main ===== */
.back {
    position: relative; overflow: hidden; z-index: 0;
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    width: min(340px, 80vw); padding: .55rem 1rem; margin-bottom: clamp(1rem, 4vh, 2.2rem);
    font-size: 1.35rem; letter-spacing: 5px; color: #fff; text-decoration: none; text-shadow: 0 0 10px var(--p);
    border: 2px solid var(--p); border-radius: 999px; background: rgba(248,1,252,.08);
    box-shadow: 0 0 22px rgba(248,1,252,.4);
    transition: box-shadow .35s, transform .3s var(--ease);
    animation: up 1s var(--ease) 2s both, pulse 2.4s 3s ease-in-out infinite;
}
.back::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--p);
    transform: translateX(-101%); transition: transform .5s var(--ease);
}
.back em { font-style: normal; font-size: .75em; color: var(--g); text-shadow: 0 0 8px var(--g); transition: transform .4s var(--ease); }
.back:hover { box-shadow: 0 0 40px var(--p); transform: scale(1.03); }
.back:hover::before { transform: none; }
.back:hover em { transform: translateX(-7px); }
.back:active { transform: scale(.96); }
@keyframes pulse { 50% { box-shadow: 0 0 34px rgba(248,1,252,.8); } }

.px {
    position: fixed; width: 6px; height: 6px; z-index: 9; pointer-events: none;
    background: var(--c); box-shadow: 0 0 8px var(--c); animation: pop .9s var(--ease) forwards;
}
@keyframes pop { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

/* ===== мобильная версия ===== */
@media (max-width: 720px) {
    .grid { flex-direction: column; align-items: center; flex-wrap: nowrap; gap: .8rem; }
    .card { width: min(78vw, 320px); aspect-ratio: auto; height: clamp(62px, 11vh, 96px); }
    .fl { animation-name: floatS; }
    @keyframes floatS { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
}
@media (max-height: 520px) {
    #logo { font-size: 2.6rem; }
    .sub { font-size: 1.2rem; }
}
/* при «reduce motion» гасим только мерцание и глитч, остальное работает */
@media (prefers-reduced-motion: reduce) {
    .crt, #logo::before, #logo::after { animation: none !important; }
}

/* переход на другую страницу */
.stage { transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); }
body.leaving .stage { opacity: 0; transform: scale(1.06); filter: blur(8px); }