/* SENTINEL MOTION LAYER v1 — clean, springy, reduced-motion safe.
   Everything is gated behind html.sm-on (added by motion.js only when the
   user does NOT prefer reduced motion), so no-JS and reduced-motion users
   get a fully visible, static page. */

/* ── Scroll reveal (elements tagged .sm-reveal by motion.js) ── */
.sm-on .sm-reveal { opacity: 0; transform: translateY(16px); }
.sm-on .sm-reveal.sm-in {
    opacity: 1; transform: none;
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--sm-delay, 0ms);
}

/* ── Nav entrance: pill drops in softly ── */
.sm-on .nav-inner { animation: smNav 0.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes smNav { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ── Logo mark: playful wiggle on hover ── */
.nav-logo .logo-mark { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.nav-logo:hover .logo-mark { transform: rotate(-10deg) scale(1.12); }

/* ── Lime CTA: shine sweep on hover ── */
.sm-on .btn-bracket-accent, .sm-on .btn-primary, .sm-on .btn-accent, .sm-on .submit-btn {
    position: relative; overflow: hidden;
}
.sm-on .btn-bracket-accent::after, .sm-on .btn-primary::after, .sm-on .btn-accent::after, .sm-on .submit-btn::after {
    content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none;
}
.sm-on .btn-bracket-accent:hover::after, .sm-on .btn-primary:hover::after,
.sm-on .btn-accent:hover::after, .sm-on .submit-btn:hover::after { left: 130%; }

/* ── Nav links: underline slides in ── */
.sm-on .nav-links a { position: relative; }
.sm-on .nav-links a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
    border-radius: 2px; background: #CCFF00; transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.sm-on .nav-links a:hover::after { transform: scaleX(1); }

/* ── Mascots: gentle bob + wave on hover ── */
.sm-on .mascot-band img, .sm-on .mascot-footer img { animation: smBob 6s ease-in-out infinite; }
@keyframes smBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.sm-on .mascot-band img:hover { animation: smWave 0.7s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes smWave { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg) scale(1.02); } 65% { transform: rotate(2deg) scale(1.02); } }

/* ── Card cursor feedback everywhere (only adds where missing) ── */
.sm-on a[class*="card"]:active, .sm-on button:active { transform: scale(0.985); }

/* ── Cursor-tracking lime glow inside cards ── */
.sm-on .sm-glow { position: relative; }
.sm-on .sm-glow::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(204,255,0,0.16), transparent 65%);
    opacity: 0; transition: opacity 0.3s ease; z-index: 0;
}
.sm-on .sm-glow:hover::before { opacity: 1; }
.sm-on .sm-glow > * { position: relative; z-index: 1; }

/* ── Scan progress bar (top of page) ── */
.sm-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1500; pointer-events: none; }
.sm-progress-fill {
    height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, #bff000, #CCFF00);
    box-shadow: 0 0 10px rgba(204,255,0,0.55);
}

/* ── Human verified chip (first click) ── */
.sm-human {
    position: fixed; transform: translate(-50%, -140%); z-index: 1950; pointer-events: none;
    background: #101410; color: #CCFF00; font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(16,20,16,0.3);
    animation: smHuman 1.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes smHuman {
    0% { opacity: 0; transform: translate(-50%, -80%) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -150%) scale(1.05); }
    30% { transform: translate(-50%, -140%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -190%) scale(0.95); }
}

/* ── Live activity toasts ── */
.sm-toast {
    position: fixed; left: 20px; bottom: 20px; z-index: 890; cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
    border: 1px solid rgba(10,20,10,0.12); border-radius: 999px;
    box-shadow: 0 10px 30px rgba(16,20,16,0.14);
    font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; color: #101410;
    padding: 9px 16px 9px 12px;
    animation: smToastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.sm-toast.out { animation: smToastOut 0.4s ease both; }
@keyframes smToastIn { from { opacity: 0; transform: translateY(24px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes smToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(0.95); } }
.sm-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: #CCFF00; box-shadow: 0 0 0 3px rgba(204,255,0,0.25); animation: smToastPulse 1.4s ease-in-out infinite; }
@keyframes smToastPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (max-width: 700px) { .sm-toast { display: none; } }

/* ── Hero letter wave ── */
.sm-ch { display: inline-block; }
.sm-waving .sm-ch { animation: smChWave 0.55s cubic-bezier(0.34,1.56,0.64,1) calc(var(--i, 0) * 26ms) 1 both; }
@keyframes smChWave { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }

/* ── Soft page-exit transition ── */
.sm-on body { transition: opacity 0.17s ease, transform 0.17s ease; }
.sm-exit body { opacity: 0; transform: translateY(8px); }

/* ── Senti drag state ── */
.senti-drag .senti-bot { cursor: grabbing; }
.senti-drag .senti-antenna { animation: sentiAlarm 0.3s ease-in-out infinite; }

/* ── Senti, the mascot buddy ── */
.senti {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    display: flex; flex-direction: column; align-items: flex-end;
    filter: drop-shadow(0 10px 24px rgba(16,20,16,0.18));
    animation: sentiIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 1s both;
}
@keyframes sentiIn { from { opacity: 0; transform: translateY(60px) scale(0.6); } to { opacity: 1; transform: none; } }
.senti-bot { cursor: pointer; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.senti-bot:hover { transform: translateY(-4px) rotate(-3deg); }
.senti-pupil { transition: transform 0.12s ease-out; }
.senti-antenna { animation: sentiPulse 2.4s ease-in-out infinite; transform-origin: 60px 6px; }
@keyframes sentiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.senti-wave .senti-bot { animation: sentiWiggle 0.7s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes sentiWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
.senti-hop { animation: sentiHop 0.45s cubic-bezier(0.34,1.56,0.64,1) 2; }
@keyframes sentiHop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.senti-bubble {
    max-width: 230px; margin-bottom: 10px; padding: 10px 14px;
    background: #ffffff; border: 1px solid rgba(10,20,10,0.12); border-radius: 14px 14px 4px 14px;
    box-shadow: 0 10px 30px rgba(16,20,16,0.14);
    font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; line-height: 1.45; color: #101410;
    opacity: 0; transform: translateY(8px) scale(0.94); transform-origin: bottom right;
    transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.senti-bubble.on { opacity: 1; transform: none; }
.senti-close {
    position: absolute; top: 14px; right: -6px; width: 22px; height: 22px;
    border-radius: 50%; border: 1px solid rgba(10,20,10,0.14); background: #fff; color: #8a908a;
    font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.senti:hover .senti-close { opacity: 1; }
.senti-close:hover { color: #101410; }

/* ── Sonar ping on click ── */
.sm-ping {
    position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border: 2px solid rgba(120,160,10,0.75); border-radius: 50%;
    pointer-events: none; z-index: 1900;
    animation: smPing 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes smPing { from { transform: scale(0.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* ── Confetti particles ── */
.sm-confetti {
    position: fixed; width: 8px; height: 12px; border-radius: 2px;
    pointer-events: none; z-index: 1950;
    animation: smConfetti 0.95s cubic-bezier(0.2,0.6,0.35,1) both;
}
@keyframes smConfetti {
    from { transform: translate(0,0) rotate(0); opacity: 1; }
    to { transform: translate(var(--cx, 0), calc(var(--cy, -80px) + 160px)) rotate(var(--cr, 180deg)); opacity: 0; }
}

/* ── Senti alert state (threat detected) ── */
.senti-alert .senti-antenna { fill: #ff4444; animation: sentiAlarm 0.5s ease-in-out infinite; }
@keyframes sentiAlarm { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.senti-alert .senti-pupil { transform: scale(1.35); transform-origin: center; }
.senti-alert .senti-bot { animation: sentiShiver 0.35s ease-in-out 4; }
@keyframes sentiShiver { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* Reduced motion: belt and braces even if sm-on slipped through */
@media (prefers-reduced-motion: reduce) {
    .sm-reveal { opacity: 1 !important; transform: none !important; }
    .nav-inner { animation: none !important; }
    .mascot-band img, .mascot-footer img { animation: none !important; }
    .senti, .sm-ping, .sm-confetti, .sm-toast, .sm-human, .sm-progress { display: none !important; }
    .sm-waving .sm-ch { animation: none !important; }
}