/* ============================================================
   The Presence Lab — Custom CSS
   All styles that extend or override Tailwind
   ============================================================ */

/* Base */
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* Glass card */
.glass-card {
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.8);
}

/* FAQ details animation */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .3s ease-in-out; }
details[open] summary .caret-icon { transform: rotate(180deg); }

@keyframes sweep {
    0%   { opacity: 0; margin-top: -10px; }
    100% { opacity: 1; margin-top: 0px; }
}

/* Hero grid pattern */
.bg-grid-pattern {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================
   Specialty Pills Marquee
   ============================================================ */
@keyframes marqueeLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-left  { animation: marqueeLeft  28s linear infinite; }
.marquee-right { animation: marqueeRight 36s linear infinite; }
.marquee-left:hover,
.marquee-right:hover { animation-play-state: paused; }

.specialty-pill {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 10px 20px; border-radius: 999px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.875rem; font-weight: 500; color: #e2e8f0;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    cursor: default;
}
.specialty-pill:hover {
    background: rgba(37,99,235,0.2);
    border-color: rgba(37,99,235,0.6);
    box-shadow: 0 4px 24px rgba(37,99,235,0.25);
    transform: translateY(-3px);
    color: #fff;
}
.specialty-pill-alt {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
}
.marquee-track .specialty-pill:hover { position: relative; z-index: 10; }

/* ============================================================
   Glow Blob Animations
   ============================================================ */
@keyframes blobDrift1 {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(60px, -40px) scale(1.1); }
    66%  { transform: translate(-40px, 50px) scale(0.95); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes blobDrift2 {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(-50px, 60px) scale(1.08); }
    66%  { transform: translate(70px, -30px) scale(0.93); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes blobDrift3 {
    0%   { transform: translate(0px, 0px) scale(1); }
    50%  { transform: translate(30px, -60px) scale(1.12); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.glow-blob-1 { animation: blobDrift1 12s ease-in-out infinite; }
.glow-blob-2 { animation: blobDrift2 15s ease-in-out infinite; }
.glow-blob-3 { animation: blobDrift3  9s ease-in-out infinite; }

/* ============================================================
   Scroll Reveal — Hero
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-animate { opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }

/* ============================================================
   Scroll Reveal — Pain Section
   ============================================================ */
.pain-reveal {
    opacity: 0; transform: translateY(32px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.pain-reveal.pain-visible { opacity: 1; transform: translateY(0); }
.pain-card { transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.pain-card:hover { box-shadow: 0 0 40px rgba(37,99,235,0.12); }

/* ============================================================
   Scroll Reveal — Specialty Section
   ============================================================ */
.specialty-reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.specialty-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Scroll Reveal — Transformation Section
   ============================================================ */
.trans-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.trans-reveal.trans-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Flow Animation (Cards)
   ============================================================ */
@keyframes flowUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flow — Step Cards */
.flow-card { opacity: 0; }
.flow-grid.in-view .flow-card { animation: flowUp 0.65s cubic-bezier(0.22,1,0.36,1) forwards; }
.flow-grid.in-view .flow-card:nth-child(2) { animation-delay: 0.15s; }
.flow-grid.in-view .flow-card:nth-child(3) { animation-delay: 0.30s; }
.flow-grid.in-view .flow-card:nth-child(4) { animation-delay: 0.45s; }

/* Flow — Stats Cards */
.stats-card { opacity: 0; }
.stats-grid.in-view .stats-card { animation: flowUp 0.65s cubic-bezier(0.22,1,0.36,1) forwards; }
.stats-grid.in-view .stats-card:nth-child(1) { animation-delay: 0.00s; }
.stats-grid.in-view .stats-card:nth-child(2) { animation-delay: 0.12s; }
.stats-grid.in-view .stats-card:nth-child(3) { animation-delay: 0.24s; }
.stats-grid.in-view .stats-card:nth-child(4) { animation-delay: 0.36s; }

/* Flow — Services Cards */
.svc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.svc-reveal.svc-visible { opacity: 1; transform: translateY(0); }
.svc-card { opacity: 0; }
.svc-grid.in-view .svc-card { animation: flowUp 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
.svc-grid.in-view .svc-card:nth-child(1) { animation-delay: 0.00s; }
.svc-grid.in-view .svc-card:nth-child(2) { animation-delay: 0.10s; }
.svc-grid.in-view .svc-card:nth-child(3) { animation-delay: 0.20s; }
.svc-grid.in-view .svc-card:nth-child(4) { animation-delay: 0.30s; }
.svc-grid.in-view .svc-card:nth-child(5) { animation-delay: 0.40s; }
.svc-grid.in-view .svc-card:nth-child(6) { animation-delay: 0.50s; }

/* Google logo text */
.google-text {
    background: linear-gradient(90deg,#4285F4 0%,#4285F4 16%,#EA4335 16%,#EA4335 33%,#FBBC05 33%,#FBBC05 50%,#4285F4 50%,#4285F4 66%,#34A853 66%,#34A853 83%,#EA4335 83%,#EA4335 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}