/* GBpass Custom Styles */

html {
    scroll-behavior: smooth;
}

/* Header scroll effect */
.header-scrolled {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

/* FAQ animation */
.faq-content {
    transition: max-height 0.3s ease-out;
}

.faq-icon-rotated {
    transform: rotate(180deg);
}

/* Mobile menu animation */
#mobile-menu {
    transition: max-height 0.3s ease-out;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}

.ms-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Hero Security Diagram Animations */
@keyframes shieldPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 120, 212, 0.5)); }
    50%       { filter: drop-shadow(0 0 18px rgba(0, 120, 212, 0.9)); }
}

@keyframes dashFlow {
    to { stroke-dashoffset: -24; }
}

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

@keyframes orbitSpin {
    from { transform: rotate(0deg); transform-origin: 230px 192px; }
    to   { transform: rotate(360deg); transform-origin: 230px 192px; }
}

.shield-glow {
    animation: shieldPulse 3s ease-in-out infinite;
}

.dash-flow {
    stroke-dasharray: 6 6;
    animation: dashFlow 1.5s linear infinite;
}

.status-dot {
    animation: statusBlink 2s ease-in-out infinite;
}

/* Hero vault illustration animations */
@keyframes filePreviewIn {
    0%        { opacity: 0; transform: translateY(8px) scale(0.98); }
    15%, 70%  { opacity: 1; transform: translateY(0)   scale(1);    }
    85%, 100% { opacity: 0; transform: translateY(-4px) scale(0.99); }
}

@keyframes rowHighlight {
    0%, 40%   { opacity: 0; }
    50%, 75%  { opacity: 1; }
    90%, 100% { opacity: 0; }
}

@keyframes cursorDrift {
    0%       { transform: translate(0, -64px); opacity: 0; }
    15%      { transform: translate(0, -64px); opacity: 0.9; }
    40%, 55% { transform: translate(0,   0px); opacity: 0.9; }
    80%      { transform: translate(0,  64px); opacity: 0.9; }
    100%     { transform: translate(0,  64px); opacity: 0; }
}

.file-preview-fade {
    animation: filePreviewIn 6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.row-highlight {
    opacity: 0;
    animation: rowHighlight 6s ease-in-out infinite;
}

.cursor-float {
    animation: cursorDrift 6s ease-in-out infinite;
    transform-box: fill-box;
}

/* Click ripple — syncs with cursor landing on Row 2 (40–55% of 6s cycle) */
@keyframes clickRipple {
    0%, 40%   { opacity: 0;    transform: scale(0.2); }
    44%       { opacity: 0.55; transform: scale(0.5); }
    55%       { opacity: 0;    transform: scale(1.8); }
    56%, 100% { opacity: 0;    transform: scale(0.2); }
}

.click-ripple {
    opacity: 0;
    animation: clickRipple 6s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/* Attach wire — dash flow on the file preview ↔ Row 3 connector */
@keyframes attachFlow {
    to { stroke-dashoffset: -20; }
}

.attach-flow {
    animation: attachFlow 2s linear infinite;
}

/* Shield checkmark draw-on (one-shot at page load) */
@keyframes checkDraw {
    from { stroke-dashoffset: 44; }
    to   { stroke-dashoffset: 0; }
}

.check-draw {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: checkDraw 0.9s ease-out 0.4s forwards;
}

/* Very slow spin on the background orbit ring (via stroke-dashoffset) */
@keyframes ringSpin {
    to { stroke-dashoffset: -135; }
}

.ring-spin {
    animation: ringSpin 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .shield-glow,
    .dash-flow,
    .status-dot,
    .file-preview-fade,
    .row-highlight,
    .cursor-float,
    .click-ripple,
    .attach-flow,
    .check-draw,
    .ring-spin {
        animation: none !important;
    }
    .file-preview-fade { opacity: 1; }
    .row-highlight     { opacity: 1; }
    .cursor-float      { opacity: 0.9; }
    .click-ripple      { opacity: 0; }
    .check-draw        { stroke-dashoffset: 0 !important; }
}