/* ================================================================
   NAIDI 2026 — Animations & HCP gate (light theme)
   ================================================================ */

/* ============== Blur Text ============== */
.blur-text { display: inline-block; }
.blur-text .ch {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.3em);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                filter   700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blur-text.is-on .ch {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ============== Reveal ============== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-on { opacity: 1; transform: none; }
.reveal-left  { transform: translateX(-28px); }
.reveal-left.is-on { transform: none; }
.reveal-right { transform: translateX(28px); }
.reveal-right.is-on { transform: none; }
.reveal-scale { transform: scale(0.97); }
.reveal-scale.is-on { transform: scale(1); }

.alist .row.reveal {
    transform: translateX(-12px);
}
.alist .row.reveal.is-on { transform: none; }

/* ============== Counter ============== */
.counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============== Magnetic ============== */
.magnetic {
    will-change: transform;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============== Spotlight (subtle hover only) ============== */
.spotlight {
    position: relative;
    isolation: isolate;
}
.spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
                rgba(26, 70, 125, 0.06), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight.is-hover::before { opacity: 1; }

/* ============== HCP Gate Modal (light) ============== */
.hcp-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 17, 32, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: gate-fade 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hcp-gate.is-on { display: flex; }

@keyframes gate-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hcp-gate-card {
    width: 100%;
    max-width: 580px;
    padding: clamp(28px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-xl);
    box-shadow: 0 32px 80px -8px rgba(11, 17, 32, 0.35);
    animation: gate-rise 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gate-rise {
    from { transform: translateY(20px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.hcp-gate-card .logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 16px;
    color: var(--primary-deep);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}
.hcp-gate-card .logo-mark img { height: 24px; }
.hcp-gate-card .crumb {
    font: 700 11px var(--font-mono);
    letter-spacing: 0.16em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hcp-gate-card h2 {
    font: 800 1.6rem/1.25 var(--font-headline);
    color: var(--on-surface);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.hcp-gate-card .lead {
    font-size: 14px;
    line-height: 1.8;
    color: var(--on-surface-variant);
    margin-bottom: 28px;
}
.hcp-gate-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
@media (max-width: 480px) {
    .hcp-gate-actions { grid-template-columns: 1fr; }
}
.hcp-gate-btn {
    padding: 18px 20px;
    border-radius: var(--r-md);
    font: 600 14px var(--font-headline);
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms, background 180ms;
    border: 1px solid transparent;
    text-align: left;
}
.hcp-gate-btn .yn {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    opacity: 0.85;
}
.hcp-gate-btn .what {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}
.hcp-gate-btn-yes {
    background: var(--primary-deep);
    color: var(--on-primary);
}
.hcp-gate-btn-yes:hover {
    background: var(--primary-darker);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(14, 45, 85, 0.45);
}
.hcp-gate-btn-no {
    background: var(--surface);
    color: var(--on-surface);
    border-color: var(--outline-variant);
}
.hcp-gate-btn-no:hover {
    background: var(--surface-container-low);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.hcp-gate-fineprint {
    font-size: 12px;
    line-height: 1.75;
    color: var(--on-surface-muted);
    padding: 16px;
    background: var(--surface-container-low);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.hcp-gate-fineprint strong {
    display: block;
    color: var(--on-surface);
    margin-bottom: 6px;
    font: 700 11px var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hcp-gate-fineprint p + p { margin-top: 6px; }

/* ============== HCP Status Switcher (header) ============== */
.hcp-switch {
    display: none;
    padding: 5px 6px 5px 10px;
    font: 600 11px var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-full);
    align-items: center;
    gap: 8px;
}
.hcp-switch.is-on { display: inline-flex; }
.hcp-switch.is-verified {
    color: var(--secondary-deep);
    border-color: var(--secondary-pale);
    background: var(--secondary-tint);
}
.hcp-switch button {
    padding: 2px 8px;
    font: inherit;
    font-size: 10.5px;
    color: inherit;
    text-decoration: underline;
    opacity: 0.75;
}
.hcp-switch button:hover { opacity: 1; }