/* ============================================================
   Safe-Nails — Animations & Micro-interactions
   Inspired by top App Store / Play Market apps
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(.8); }
    70%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes ripple {
    from { transform: scale(0); opacity: .5; }
    to   { transform: scale(4); opacity: 0; }
}
@keyframes spinOnce {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    15%       { transform: scale(1.25); }
    30%       { transform: scale(1); }
    45%       { transform: scale(1.15); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes progressFill {
    from { width: 0; }
}
@keyframes headerShadow {
    from { box-shadow: none; }
    to   { box-shadow: 0 4px 24px rgba(28,25,44,.12); }
}
@keyframes badgePop {
    0%  { transform: scale(1); }
    30% { transform: scale(1.3) rotate(-5deg); }
    60% { transform: scale(.95) rotate(3deg); }
    100%{ transform: scale(1) rotate(0); }
}

/* ── Scroll-triggered reveal (Intersection Observer adds .sn-visible) ─── */
.sn-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .55s cubic-bezier(.22,1,.36,1);
}
.sn-reveal.sn-visible {
    opacity: 1;
    transform: translateY(0);
}
.sn-reveal--left  { transform: translateX(-28px); }
.sn-reveal--right { transform: translateX(28px); }
.sn-reveal--scale { transform: scale(.93); }
.sn-reveal--left.sn-visible,
.sn-reveal--right.sn-visible,
.sn-reveal--scale.sn-visible { transform: none; opacity: 1; }

/* Staggered children */
.sn-stagger > *:nth-child(1)  { transition-delay: .05s; }
.sn-stagger > *:nth-child(2)  { transition-delay: .12s; }
.sn-stagger > *:nth-child(3)  { transition-delay: .19s; }
.sn-stagger > *:nth-child(4)  { transition-delay: .26s; }
.sn-stagger > *:nth-child(5)  { transition-delay: .33s; }
.sn-stagger > *:nth-child(6)  { transition-delay: .40s; }

/* ── Page entrance ─────────────────────────────────────────────────────── */
.sn-main { animation: fadeIn .4s ease both; }

.sn-hero__content { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .1s both; }
.sn-hero__badge   { animation: slideInLeft .6s cubic-bezier(.22,1,.36,1) .05s both; }
.sn-hero__title   { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .15s both; }
.sn-hero__subtitle{ animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .25s both; }
.sn-hero__actions { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .35s both; }

/* ── Header ────────────────────────────────────────────────────────────── */
/* Header shadow/scroll styles live in app.css (floating pill) */

/* Logo wordmark: solid dark for contrast (gradient removed) */

/* Nav links: pill hover from app.css, no underline effect */

/* ── Dropdown ──────────────────────────────────────────────────────────── */
.sn-nav__dropdown-menu {
    animation: slideDown .2s cubic-bezier(.22,1,.36,1);
    transform-origin: top center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.sn-btn {
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.sn-btn:active { transform: scale(.97); }
.sn-btn--primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,.18); transform: translateY(-1px); }
.sn-btn--primary:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* Ripple on click */
.sn-btn .sn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    pointer-events: none;
    animation: ripple .55s ease-out forwards;
    transform-origin: center;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.sn-card {
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.sn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.07);
}
.sn-card:active { transform: translateY(-1px); }

/* Image zoom on card hover */
.sn-card__image-wrap { overflow: hidden; }
.sn-card__image-wrap img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.sn-card:hover .sn-card__image-wrap img { transform: scale(1.06); }

/* ── Bento tiles ───────────────────────────────────────────────────────── */
.sn-bento__tile {
    transition: transform .3s cubic-bezier(.22,1,.36,1),
                box-shadow .3s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.sn-bento__tile:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 48px rgba(0,0,0,.09);
}
.sn-bento__tile--wiki:hover {
    box-shadow: 0 16px 48px rgba(85,81,232,.3);
}
.sn-bento__icon {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.sn-bento__tile:hover .sn-bento__icon {
    transform: rotate(-8deg) scale(1.15);
}

/* ── Hero gradient background ──────────────────────────────────────────── */
.sn-hero::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,0,0,.07) 0%, transparent 70%);
    border-radius: 50%;
    top: -200px; right: -100px;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.sn-hero::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(203,12,82,.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -100px; left: 100px;
    animation: float 10s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 0;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */
.sn-tag {
    transition: transform .15s ease, background .2s ease, color .2s ease;
}
.sn-tag:hover { transform: scale(1.05); }

/* ── Action buttons (like, save, share) ────────────────────────────────── */
.sn-action-btn {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                background .2s ease, color .2s ease, border-color .2s ease;
}
.sn-action-btn:hover { transform: scale(1.1); }
.sn-action-btn:active { transform: scale(.92); }
.sn-action-btn--active { animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }

/* Like heartbeat */
#sn-like-btn:active .material-symbols-outlined {
    animation: heartBeat .4s ease;
}

/* ── Save icon pop ─────────────────────────────────────────────────────── */
#sn-save-btn.sn-action-btn--active .material-symbols-outlined {
    animation: badgePop .4s cubic-bezier(.34,1.56,.64,1);
}

/* ── TOC ───────────────────────────────────────────────────────────────── */
.sn-toc { animation: scaleIn .4s cubic-bezier(.22,1,.36,1); }
.sn-toc__nav { transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; max-height: 1000px; }
.sn-toc__nav--hidden { max-height: 0; opacity: 0; overflow: hidden; }

/* TOC sidebar link hover */
.sn-toc-sidebar__item a { transition: color .2s ease, padding-left .2s ease, border-color .2s ease; }
.sn-toc-sidebar__item--active a { padding-left: 14px !important; }

/* ── Reading progress bar ──────────────────────────────────────────────── */
/* Thin top progress bar */
.sn-article-progress-top {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    z-index: 999;
    width: 0;
    transition: width .1s linear;
}

/* ── Wiki picks ─────────────────────────────────────────────────────────── */
.sn-wiki-pick {
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s ease;
}
.sn-wiki-pick:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* ── Course cards ──────────────────────────────────────────────────────── */
.sn-course-card {
    transition: transform .3s cubic-bezier(.22,1,.36,1),
                box-shadow .3s ease;
}
.sn-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(28,25,44,.12);
}
.sn-course-card img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.sn-course-card:hover img { transform: scale(1.04); }

/* ── Footer social ─────────────────────────────────────────────────────── */
.sn-footer__social-link {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                border-color .2s ease, color .2s ease, background .2s ease;
}
.sn-footer__social-link:hover { transform: scale(1.15) rotate(-5deg); }

/* ── Float social ──────────────────────────────────────────────────────── */
.sn-float-social__btn {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.sn-float-social__btn:hover { transform: scale(1.15) translateX(4px); }
.sn-float-social { animation: slideInLeft .6s cubic-bezier(.22,1,.36,1) .5s both; }

/* ── PWA popup entrance ────────────────────────────────────────────────── */
.sn-pwa-popup--visible .sn-pwa-popup__inner {
    animation: popIn .45s cubic-bezier(.34,1.56,.64,1);
}

/* ── Bottom navigation ─────────────────────────────────────────────────── */
.sn-bottom-nav__item {
    transition: color .2s ease;
    position: relative;
}
.sn-bottom-nav__item--active::before,
.sn-bottom-nav__item.active::before {
    content: '';
    position: absolute;
    top: 6px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1);
}
.sn-bottom-nav__item .material-symbols-outlined {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sn-bottom-nav__item:active .material-symbols-outlined { transform: scale(.8); }
.sn-bottom-nav__item--active .material-symbols-outlined,
.sn-bottom-nav__item.active .material-symbols-outlined { transform: scale(1.15); }

/* ── Skeleton loading ──────────────────────────────────────────────────── */
.sn-skeleton {
    background: linear-gradient(90deg, var(--color-surface) 25%, #e8e4f8 50%, var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}
.sn-skeleton-text  { height: 16px; margin-bottom: 8px; }
.sn-skeleton-title { height: 28px; width: 70%; margin-bottom: 16px; }
.sn-skeleton-img   { height: 200px; margin-bottom: 16px; }

/* ── Заголовки: сплошной цвет, без градиентов и переливов ────────────────
   Премиальная типографика = чёткий контрастный текст. Градиентные и
   анимированные заливки убраны намеренно. */
.sn-section--dark .sn-section__title { color: #fff; }

/* ── Roadmap steps ─────────────────────────────────────────────────────── */
.sn-roadmap__step {
    transition: transform .3s cubic-bezier(.22,1,.36,1),
                background .3s ease;
}
.sn-roadmap__step:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.18);
}
.sn-roadmap__step .material-symbols-outlined {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.sn-roadmap__step:hover .material-symbols-outlined {
    transform: scale(1.25) rotate(-10deg);
}

/* ── Wiki nav links ────────────────────────────────────────────────────── */
.sn-wiki-nav-link {
    transition: transform .2s cubic-bezier(.22,1,.36,1),
                background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sn-wiki-nav-link:hover { transform: translateX(6px); }

/* ── Search modal ──────────────────────────────────────────────────────── */
.sn-search-modal__box {
    animation: scaleIn .25s cubic-bezier(.22,1,.36,1);
}
.sn-search-result-item {
    transition: background .18s ease, transform .2s ease;
}
.sn-search-result-item:hover { transform: translateX(4px); }

/* ── Flash messages ────────────────────────────────────────────────────── */
.sn-flash { animation: slideDown .35s cubic-bezier(.22,1,.36,1); }

/* ── Input focus ───────────────────────────────────────────────────────── */
.sn-input {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* ── Autolink hover ────────────────────────────────────────────────────── */
.sn-prose a.autolink {
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    border-radius: 2px;
    padding: 0 2px;
}
.sn-prose a.autolink:hover {
    background: rgba(0,0,0,.06);
}

/* ── Share buttons ──────────────────────────────────────────────────────── */
.sn-share-btn {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                border-color .2s ease, color .2s ease;
}
.sn-share-btn:hover { transform: scale(1.06); }
.sn-share-btn:active { transform: scale(.95); }

/* ── Logo image entrance ────────────────────────────────────────────────── */
.sn-header__logo {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.sn-header__logo:hover { transform: scale(1.05); }
.sn-header__logo img { animation: scaleIn .5s cubic-bezier(.22,1,.36,1); }

/* ── Images general ────────────────────────────────────────────────────── */
img {
    transition: opacity .3s ease;
}
img:not([src]) { opacity: 0; }
.sn-img--loaded { opacity: 1; }

/* ── Reduced motion — respect user preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}