/* ══════════════════════════════════════════════════════════════════════
   MyCareFunds — marketing site custom styles
   Only things Tailwind can't express cleanly go here: keyframes,
   device‑frame, scroll‑reveal, nav scrolled state, reduced motion.
   ══════════════════════════════════════════════════════════════════════ */

html, body {
    scroll-padding-top: 84px;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
    max-width: 100vw;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Navigation: idle + scrolled ───────────────────────────────────── */
#nav {
    background: transparent;
    border-bottom: 1px solid transparent;
}
#nav.scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -20px rgba(15, 23, 42, 0.2);
}

/* ── Keyframes ─────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulseSlow {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ── Scroll reveal ─────────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ── Phone frame (pure CSS, no images) ─────────────────────────────── */
.phone-frame {
    filter: drop-shadow(0 30px 60px rgba(15, 23, 42, 0.18));
}

.phone-bezel {
    position: relative;
    border-radius: 40px;
    padding: 10px;
    background: linear-gradient(145deg, #1f2937 0%, #0f172a 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.05),
        inset 0 0 0 3px #0b1220,
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.phone-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background: #0b1220;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}

.phone-screen {
    position: relative;
    background: #f8fafc;
    border-radius: 30px;
    overflow: hidden;
    padding-top: 38px;
    padding-bottom: 20px;
}

/* ── Gradient text underline (hero headline) ───────────────────────── */
.gradient-underline {
    background-image: linear-gradient(90deg, #2563eb, #60a5fa);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.22em;
}

/* ── FAQ details marker polish ─────────────────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }

details[open] > summary .faq-icon {
    background-color: #2563eb;
    color: #fff;
    transform: rotate(45deg);
}
details > summary .faq-icon {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

details > div {
    animation: fadeIn 0.4s ease-out both;
}

/* ── Store badge hover lift ────────────────────────────────────────── */
.store-badge {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.store-badge:hover {
    transform: translateY(-2px);
}

/* ── Body scroll lock when mobile menu open ────────────────────────── */
body.menu-open {
    overflow: hidden;
}

/* ── Selection polish ──────────────────────────────────────────────── */
::selection {
    background: #bfdbfe;
    color: #1e3a8a;
}

/* ── Focus rings (consistent across interactive elements) ──────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    border-radius: 12px;
}

/* ── Thin horizontal rule utility (used inside footer areas) ───────── */
.hr-soft {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent);
    border: 0;
}

/* ── Reduced motion: kill animations ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Safari: fix backdrop blur on iOS versions that ignore shorthand ─ */
@supports not (backdrop-filter: blur(10px)) {
    #nav.scrolled {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* ── Small helper: soft dotted separators (not used in v1 but handy) ─ */
.dotted-separator {
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.15) 1px, transparent 1px);
    background-size: 8px 8px;
    background-repeat: repeat-x;
    background-position: center;
    height: 16px;
}