/* === MAGIC-EFFECTS.CSS ===
 * Magic Stack 2026 Tier B - @starting-style + scroll-driven + content-visibility
 * Wow-эффекты на нативных Web API
 */

/* === @starting-style для плавного появления === */
.brain-section {
    opacity: 1;
    transition: opacity 0.6s var(--ease-out-quart);
}

@starting-style {
    .brain-section { opacity: 0; }
}

/* === Triggerquestions cards: cascade появление === */
.trigger-card {
    --reveal-delay: 0s;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.5s var(--ease-out-quart) var(--reveal-delay),
        transform 0.5s var(--ease-out-quart) var(--reveal-delay);
}

.trigger-card.is-revealing {
    opacity: 0;
    transform: translateY(20px);
}

/* === Pain cards: stagger reveal === */
.pain-card {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.5s var(--ease-out-quart) var(--pain-delay, 0s),
        transform 0.5s var(--ease-out-quart) var(--pain-delay, 0s);
}

@starting-style {
    .pain-card { opacity: 0; transform: translateY(24px); }
}

/* === FAQ details native animation === */
.faq-item {
    overflow: hidden;
    transition: background 0.3s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-chevron {
    transition: transform 0.3s var(--ease-out-quart);
}

/* === Final CTA double-glow pulse === */
.brain-cta-button-pulse {
    position: relative;
    overflow: visible;
}

.brain-cta-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    pointer-events: none;
    opacity: 0;
}

.brain-cta-pulse-ring-1 {
    box-shadow: 0 0 0 0 var(--gold);
    animation: cta-pulse-1 1.8s ease-out infinite;
}

.brain-cta-pulse-ring-2 {
    box-shadow: 0 0 0 0 var(--electric);
    animation: cta-pulse-2 2.4s ease-out infinite;
    animation-delay: 0.6s;
}

@keyframes cta-pulse-1 {
    0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); opacity: 1; }
    100% { box-shadow: 0 0 0 22px rgba(255, 215, 0, 0); opacity: 0; }
}

@keyframes cta-pulse-2 {
    0%   { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.5); opacity: 1; }
    100% { box-shadow: 0 0 0 28px rgba(0, 240, 255, 0); opacity: 0; }
}

/* === Hero typewriter cursor === */
.brain-typewriter::after {
    content: "▌";
    color: var(--gold);
    margin-left: 2px;
    animation: tw-blink 0.8s steps(2) infinite;
}

@keyframes tw-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* === Tilt effect (data-tilt="N") - готовим CSS, JS управляет переменными === */
[data-tilt] {
    transition: transform 0.3s var(--ease-out-quart),
                box-shadow 0.3s var(--ease-out-quart);
    transform-style: preserve-3d;
}

[data-tilt]:hover {
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.15);
}

/* === Reduced motion fallback === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}