/* ============================================
   HERO ENTRANCE ANIMATIONS
   Подключать: <link rel="stylesheet" href="./css/hero-animate.css">
   Зависит от: hero.css
============================================ */

/* ТЕТТА — скрыта до класса .animate */
.hero-title {
    opacity: 0;
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
}

.hero-title.animate { opacity: 1; }

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) skewX(-8deg);
}

.hero-title.animate .letter {
    animation: letterIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title.animate .letter:nth-child(1) { animation-delay: 0.05s; }
.hero-title.animate .letter:nth-child(2) { animation-delay: 0.13s; }
.hero-title.animate .letter:nth-child(3) { animation-delay: 0.21s; }
.hero-title.animate .letter:nth-child(4) { animation-delay: 0.29s; }
.hero-title.animate .letter:nth-child(5) { animation-delay: 0.37s; }

@keyframes letterIn {
    0%   { opacity: 0; transform: translateY(60px) skewX(-8deg); filter: blur(8px); }
    40%  { opacity: 1; filter: blur(0); }
    70%  { transform: translateY(-6px) skewX(1deg); }
    85%  { transform: translateY(3px) skewX(-0.5deg); }
    100% { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); }
}

/* Скан-линия */
.hero-title.animate::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(10, 0, 255, 0.9) 0%,
        rgba(10, 0, 255, 1)   40%,
        rgba(10, 0, 255, 0.7) 70%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(10, 0, 255, 0.9), 0 0 28px rgba(10, 0, 255, 0.5);
    animation: scanLine 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
    opacity: 0;
}

/* Echo */
.hero-title.animate::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(10, 0, 255, 0.3)  0%,
        rgba(10, 0, 255, 0.45) 40%,
        rgba(10, 0, 255, 0.2)  70%,
        transparent 100%);
    animation: scanLine 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.72s forwards;
    opacity: 0;
}

@keyframes scanLine {
    0%   { top: 110%; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: -10%; opacity: 0; }
}

@media (max-width: 768px) {
    .hero-title {
        display: inline-block;
        width: max-content;
        max-width: none;
    }
}

/* СЛОГАН — typewriter */
.hero-slogan {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hero-slogan.animate { opacity: 1; }

.hero-slogan .slogan-text {
    display: inline;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
}

.hero-slogan.animate .slogan-text:nth-child(1) {
    animation: tw1 0.55s steps(9, end) 0.15s forwards;
}

.hero-slogan.animate .slogan-text:nth-child(3) {
    animation: tw2 0.9s steps(18, end) 0.85s forwards;
}

@keyframes tw1 {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

@keyframes tw2 {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

/* Курсор */
.hero-slogan.animate .slogan-text:nth-child(3)::after {
    content: '|';
    color: rgba(10, 0, 255, 0.8);
    animation: caretBlink 0.65s step-end 1.75s 5, caretFade 0.3s ease 5.0s forwards;
    opacity: 1;
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes caretFade { to { opacity: 0; } }


/* КНОПКИ — fade + slide up */
.hero-links {
    opacity: 0;
}

.hero-link {
    opacity: 0;
    transform: translateY(24px);
}

.hero-links.animate { opacity: 1; }

.hero-links.animate .hero-link {
    animation: linkFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-links.animate .hero-link:nth-child(1) { animation-delay: 0.1s; }
.hero-links.animate .hero-link:nth-child(2) { animation-delay: 0.28s; }

@keyframes linkFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* PI — появление */
.hero-slogan .pi-symbol {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
    flex-shrink: 0;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-slogan.animate .pi-symbol {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.62s;
}