/* CapeFearIT — shared interactive styles */

/* ---------- Nav ---------- */
#site-nav {
    transition: box-shadow .3s ease, background-color .3s ease;
}
#site-nav.scrolled {
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 10px 30px -15px rgba(15, 23, 42, .18);
}
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ---------- Backgrounds ---------- */
.bg-grid {
    background-image: radial-gradient(rgba(37, 99, 235, .13) 1px, transparent 1px);
    background-size: 26px 26px;
}
.bg-grid-dark {
    background-image: radial-gradient(rgba(96, 165, 250, .18) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* ---------- Cursor spotlight (sections) ---------- */
.spotlight { position: relative; }
.spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 50%),
        rgba(37, 99, 235, .09), transparent 62%);
}
.spotlight:hover::before { opacity: 1; }
.spotlight-dark::before {
    background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 50%),
        rgba(59, 130, 246, .18), transparent 62%);
}

/* ---------- Cursor glow border (cards) ---------- */
.glow-card { position: relative; }
.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
        rgba(37, 99, 235, .12), transparent 65%);
}
.glow-card:hover::before { opacity: 1; }
.glow-card-dark::before {
    background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
        rgba(96, 165, 250, .22), transparent 65%);
}

/* ---------- 3D tilt ---------- */
.tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .18s ease-out;
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ---------- Gradient text ---------- */
.text-gradient {
    background: linear-gradient(110deg, #2563eb 10%, #06b6d4 60%, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Magnetic buttons ---------- */
.magnetic {
    will-change: transform;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Modal entrance ---------- */
.cf-modal:not(.hidden) .modal-panel {
    animation: cfModalIn .4s cubic-bezier(.16, 1, .3, 1);
}
@keyframes cfModalIn {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.modal-active { overflow: hidden; }

/* ---------- Floating hero elements ---------- */
.float-soft { animation: cfFloat 7s ease-in-out infinite; }
.float-soft-alt { animation: cfFloat 8.5s ease-in-out 1.2s infinite; }
@keyframes cfFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

/* ---------- Scrolling marquee ---------- */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: cfMarquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes cfMarquee {
    to { transform: translateX(-50%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .tilt, .magnetic { transition: none; }
    .float-soft, .float-soft-alt { animation: none; }
    .marquee-track { animation: none; }
    .cf-modal:not(.hidden) .modal-panel { animation: none; }
}