/* 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. */

/* ── Motion language ─────────────────────────────────────────────────────
   Declared once so the site moves like one product. An audit across index,
   blog, signup, login and dashboard found twelve different cubic-bezier
   spellings for roughly eight actual curves — the same curve written as
   both `.22,1,.36,1` and `0.22, 1, 0.36, 1` — plus durations bunched at
   0.12/0.15/0.16/0.18/0.2s all doing the same job. Individually invisible;
   collectively it is why the UI reads as assembled rather than designed.

   --sm-ease is the house curve: a pure decelerate, no overshoot. Interface
   chrome should arrive and settle, never bounce past its mark. --sm-spring
   keeps the overshoot available, but it is for deliberate accents (the logo
   wiggle), not for anything that carries layout.

   Three durations, matched to what the motion means: tap-feedback must feel
   instant, a state change should be perceptible, an entrance can breathe. */
:root {
    --sm-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --sm-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --sm-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --sm-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --sm-t-tap:   130ms;
    --sm-t-state: 260ms;
    --sm-t-enter: 560ms;
}

/* The sticky site header is 64px (56-60px on phones). Without this, every
   in-page anchor, every find-in-page hit and every keyboard focus jump
   lands its target underneath it and the user has to scroll back up. */
html { scroll-padding-top: 80px; }

/* ── 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 var(--sm-ease), transform 0.65s var(--sm-ease);
    transition-delay: var(--sm-delay, 0ms);
}

/* ── 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%; }

/* ── Footer mascot: gentle bob ── */
.sm-on .mascot-footer img { animation: smBob 6s ease-in-out infinite; }
@keyframes smBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── 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(39,51,217,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, #1f2abf, #2733d9);
    box-shadow: 0 0 10px rgba(39,51,217,0.55);
}

/* ── Human verified chip (first click) ── */
.sm-human {
    position: fixed; transform: translate(-50%, -140%); z-index: 1950; pointer-events: none;
    background: #101410; color: #9daef7; font-family: 'Schibsted 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 var(--sm-ease) 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); }
}

/* ── Hero letter wave ── */
.sm-word { display: inline-block; } /* keeps words unbreakable across lines */
.sm-ch { display: inline-block; }
.sm-waving .sm-ch { animation: smChWave 0.55s var(--sm-spring) 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); }

@keyframes sentiIn { from { opacity: 0; transform: translateY(60px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sentiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes sentiWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }

/* ── 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 var(--sm-ease) 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; }
}

@keyframes sentiAlarm { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@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; }
    .mascot-footer img { animation: none !important; }
    .sm-waving .sm-ch { animation: none !important; }
}