/*
 * ============================================================
 *  SECURELY — ANIMATIONS
 *  All @keyframes and animation utility classes.
 *  Tweak durations via variables.css → --duration-* tokens.
 * ============================================================
 */

/* ── PAGE FADE IN ───────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PULSE DOT (nav badge) ──────────────────────────────── */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── TESTIMONIAL SCROLL ─────────────────────────────────── */
.testimonials-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: scrollLeft var(--duration-testimonials) linear infinite;
    padding: 12px 0;
}
.testimonials-wrapper:hover .testimonials-track { animation-play-state: paused; }

@keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── HOW IT WORKS — TRAVELLING LINE STREAK ──────────────── */
/* Line top/height are set by animations.js at runtime       */
@keyframes linePulse {
    0%   { top: -8px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: calc(100% + 8px); opacity: 0; }
}

.step-line-track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    pointer-events: none;
    z-index: 0;
}

/* Static base line */
.step-line-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(var(--color-accent-1-rgb),0.3),
        rgba(var(--color-accent-2-rgb),0.15),
        rgba(var(--color-accent-1-rgb),0.1));
}

/* Travelling glow streak */
.step-line-track::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 56px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(var(--color-accent-1-rgb),1),
        rgba(var(--color-accent-2-rgb),0.8),
        transparent);
    border-radius: 99px;
    filter: blur(1.5px);
    animation: linePulse var(--duration-line-pulse) linear infinite;
}

/* ── MAP PULSE DOTS ─────────────────────────────────────── */
@keyframes mapPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--color-accent-1-rgb),0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--color-accent-1-rgb),0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-1-rgb),0); }
}

/* ── FAQ ACCORDION ──────────────────────────────────────── */
/* Subpage FAQ */
.faq-item-minimal {
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
}
.faq-item-minimal:hover {
    border-color: rgba(var(--color-accent-1-rgb),0.3);
    background: rgba(255,255,255,0.03);
}
.faq-item-minimal:hover p { color: #ffffff !important; }

.faq-answer-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-normal) cubic-bezier(0.4,0,0.2,1), opacity var(--duration-fast) ease;
    opacity: 0;
}
.faq-item-minimal.open .faq-answer-container { max-height: 300px; opacity: 1; }
.faq-chevron { transition: transform var(--duration-normal) ease; }
.faq-item-minimal.open .faq-chevron { transform: rotate(45deg); color: var(--color-text-accent); }

/* Homepage FAQ */
.faq-new-item {
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
    overflow: hidden;
}
.faq-new-item:hover { border-color: rgba(var(--color-accent-1-rgb),0.3); background: rgba(255,255,255,0.03); }
.faq-new-item:hover .faq-new-q { color: #ffffff !important; }

.faq-new-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-normal) cubic-bezier(0.4,0,0.2,1), opacity var(--duration-fast) ease;
    opacity: 0;
}
.faq-new-item.open .faq-new-answer { max-height: 200px; opacity: 1; }
.faq-new-chevron { transition: transform var(--duration-normal) ease; }
.faq-new-item.open .faq-new-chevron { transform: rotate(45deg); color: var(--color-text-accent); }

/* ── SCROLL-TRIGGERED ANIMATIONS ───────────────────────── */
/* Initial hidden state — applied by JS before observation  */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.reveal-left {
    transform: translateX(-40px);
}

.reveal.reveal-right {
    transform: translateX(40px);
}

.reveal.reveal-scale {
    transform: translateY(20px) scale(0.96);
}

/* Visible state — added by IntersectionObserver */
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for child elements */
/* Stagger only fires during entrance — resets to 0 once visible */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* Once section is revealed, kill all stagger delays so hover is instant */
.reveal.visible .reveal-stagger > *:nth-child(1),
.reveal.visible .reveal-stagger > *:nth-child(2),
.reveal.visible .reveal-stagger > *:nth-child(3),
.reveal.visible .reveal-stagger > *:nth-child(4),
.reveal.visible .reveal-stagger > *:nth-child(5),
.reveal.visible .reveal-stagger > *:nth-child(6) {
    transition-delay: 0s;
}

/* ── MICRO-INTERACTIONS ─────────────────────────────────── */

/* Ripple container — must be on the button */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

/* The ripple element itself — injected by JS */
.ripple-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleExpand 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.22);
}

@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

/* ── FORM FIELD GLOW ────────────────────────────────────── */
.form-input {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.form-input:focus {
    border-color: rgba(13, 148, 136, 0.7) !important;
    box-shadow:
        0 0 0 3px rgba(13, 148, 136, 0.12),
        0 0 16px rgba(13, 148, 136, 0.08);
    background: rgba(255, 255, 255, 0.05) !important;
    outline: none;
}

/* Select dropdown focused state */
select.form-input:focus {
    border-color: rgba(13, 148, 136, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* Textarea focused */
textarea.form-input:focus {
    border-color: rgba(13, 148, 136, 0.7) !important;
    box-shadow:
        0 0 0 3px rgba(13, 148, 136, 0.12),
        0 0 16px rgba(13, 148, 136, 0.06);
}

/* Label lift animation — label brightens when field is focused */
.form-field-wrap:focus-within label {
    color: #2dd4bf;
    transition: color 0.25s ease;
}

/* Nav button ripple — lighter ripple for dark bg buttons */
.ripple-btn.ripple-dark .ripple-wave {
    background: rgba(13, 148, 136, 0.25);
}

/* Category tile ripple */
.category-tile {
    overflow: hidden;
}

/* Submit button success micro-animation */
@keyframes successPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.btn-success-pop {
    animation: successPop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}