/* ──────────────────────────────────────────────────────────
 * ThriveX About Us — page-specific styles
 * Scoped under .tx-about (added to body by index.php body_class filter).
 * Mirrors public/home/home-styles.css structure.
 * ────────────────────────────────────────────────────────── */

/* ── Page wrapper ────────────────────────────────────────── */
.tx-about .about-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 32px 80px;
    position: relative;
    z-index: 1;
}

/* ── Hero ────────────────────────────────────────────────── */
.tx-about .about-hero {
    text-align: center;
    margin-bottom: 80px;
}
.tx-about .about-hero-eyebrow {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #1ecbe1;
    border: 1px solid rgba(30,203,225,0.35);
    background: rgba(30,203,225,0.08);
    padding: 5px 16px; border-radius: 20px;
    margin-bottom: 20px;
}
.tx-about .about-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 4.5rem); font-weight: 700;
    color: #eef7f8; margin: 0 0 8px; line-height: 1.08;
}
.tx-about .about-hero h1 em { color: #1ecbe1; font-style: normal; }
.tx-about .about-hero-tagline {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem; font-weight: 500;
    color: #a8bec2; margin: 16px auto 0; max-width: 560px; line-height: 1.65;
}
.tx-about .about-hero-founder {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem; font-style: italic;
    color: rgba(255,255,255,0.3);
    margin: 14px auto 0; max-width: 480px; line-height: 1.6;
}
.tx-about .about-hero-rule {
    width: 60px; height: 2px;
    background: linear-gradient(90deg, #1ecbe1, #e1341e);
    margin: 26px auto 0; border-radius: 2px;
}

/* ── Values intro ────────────────────────────────────────── */
.tx-about .values-section-intro {
    text-align: center; margin-bottom: 20px;
}
.tx-about .values-section-intro h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem; font-weight: 700; color: #eef7f8; margin: 0 0 10px;
}
.tx-about .values-section-intro p {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem; color: #a8bec2; margin: 0; line-height: 1.65;
}

/* ── Scroll reveal ───────────────────────────────────────── */
.tx-about .scroll-card {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.tx-about .scroll-card[data-dir="up"]   { transform: translateY(60px); }
.tx-about .scroll-card[data-dir="left"] { transform: translateX(-70px); }
.tx-about .scroll-card.visible { opacity: 1; transform: none !important; }

/* ── Value section — orbit-around-card ───────────────────── */
.tx-about .values-stack { max-width: 1100px; margin: 0 auto; }

.tx-about .value-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 640px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    margin-bottom: 16px;
}

/* Ambient halo glow behind orbit */
.tx-about .value-section::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
}
.tx-about .value-section.glow-cyan::after {
    background: radial-gradient(ellipse 52% 42% at 50% 50%,
        rgba(30,203,225,0.16) 0%, transparent 68%);
}
.tx-about .value-section.glow-red::after {
    background: radial-gradient(ellipse 52% 42% at 50% 50%,
        rgba(225,52,30,0.16) 0%, transparent 68%);
}
.tx-about .value-section.glow-gold::after {
    background: radial-gradient(ellipse 52% 42% at 50% 50%,
        rgba(245,185,66,0.16) 0%, transparent 68%);
}

/* 3D billboard orbit — globe spin, always face camera, always visible.
   z-index is set per-frame by JS so back-half photos go BEHIND the card. */
.tx-about .orbit-photo {
    position: absolute;
    top: 50%; left: 50%;
    width: 180px; height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 12px; object-fit: cover;
    border: 2px solid rgba(30,203,225,0.55);
    box-shadow: 0 0 28px rgba(30,203,225,0.35), 0 8px 28px rgba(0,0,0,0.7);
    --r: 300px;
    animation: txAboutOrbitFace 26s linear infinite;
}
@keyframes txAboutOrbitFace {
    0%   { transform: rotateY(0deg)   rotateX(-20deg) translateZ(var(--r)) rotateX(20deg) rotateY(0deg)    scale(1.14); }
    25%  { transform: rotateY(90deg)  rotateX(-20deg) translateZ(var(--r)) rotateX(20deg) rotateY(-90deg)  scale(0.95); }
    50%  { transform: rotateY(180deg) rotateX(-20deg) translateZ(var(--r)) rotateX(20deg) rotateY(-180deg) scale(0.70); }
    75%  { transform: rotateY(270deg) rotateX(-20deg) translateZ(var(--r)) rotateX(20deg) rotateY(-270deg) scale(0.95); }
    100% { transform: rotateY(360deg) rotateX(-20deg) translateZ(var(--r)) rotateX(20deg) rotateY(-360deg) scale(1.14); }
}

/* Accent photo border colors per section */
.tx-about .glow-red  .orbit-photo {
    border-color: rgba(225,52,30,0.65);
    box-shadow: 0 0 32px rgba(225,52,30,0.38), 0 8px 28px rgba(0,0,0,0.7);
}
.tx-about .glow-gold .orbit-photo {
    border-color: rgba(245,185,66,0.65);
    box-shadow: 0 0 32px rgba(245,185,66,0.38), 0 8px 28px rgba(0,0,0,0.7);
}

/* Small center card */
.tx-about .value-card {
    position: relative; z-index: 10;
    width: 280px; text-align: center;
    background: rgba(5,12,16,0.88);
    border: 1px solid rgba(30,203,225,0.16);
    border-radius: 24px;
    padding: 38px 28px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 72px rgba(0,0,0,0.65),
                inset 0 1px 0 rgba(255,255,255,0.05);
}

.tx-about .vc-eyebrow {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 14px;
}
.tx-about .eyebrow-cyan { color: #1ecbe1; }
.tx-about .eyebrow-red  { color: #e1341e; }
.tx-about .eyebrow-gold { color: #f5b942; }

.tx-about .value-card h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem; font-weight: 700;
    color: #eef7f8; margin: 0 0 14px;
    line-height: 1.08; letter-spacing: -0.015em;
}
.tx-about .value-card p {
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem; color: #7a9ba4;
    margin: 0; line-height: 1.78;
}

/* ── Summary row ─────────────────────────────────────────── */
.tx-about .values-summary {
    display: flex; justify-content: center; gap: 0;
    background: rgba(8,16,20,0.88);
    border: 1px solid rgba(30,203,225,0.14);
    border-radius: 20px;
    padding: 36px 28px; margin-top: 24px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.tx-about .sv-item { flex: 1; text-align: center; padding: 0 20px; }
.tx-about .sv-icon { display: block; font-size: 1.8rem; margin-bottom: 10px; }
.tx-about .sv-item h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem; font-weight: 700; color: #eef7f8; margin: 0 0 6px;
}
.tx-about .sv-item p {
    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem; color: #a8bec2; margin: 0; line-height: 1.5;
}
.tx-about .sv-divider { width: 1px; background: rgba(128,176,184,0.18); flex-shrink: 0; }

/* ── Bio ─────────────────────────────────────────────────── */
.tx-about .about-bio {
    text-align: center; margin-top: 72px;
    padding: 48px 40px;
    background: rgba(8,16,20,0.78);
    border: 1px solid rgba(30,203,225,0.14);
    border-radius: 24px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.tx-about .about-bio-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem; font-weight: 700;
    color: #eef7f8; margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.tx-about .about-bio-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem; color: #a8bec2;
    margin: 0 auto 24px; max-width: 640px; line-height: 1.75;
}
.tx-about .about-bio-more {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.88rem; font-weight: 700;
    color: #1ecbe1; text-decoration: none;
    letter-spacing: 0.04em;
    transition: opacity 0.2s;
}
.tx-about .about-bio-more:hover { opacity: 0.75; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
    .tx-about .value-section { min-height: 460px; }
    .tx-about .orbit-photo { width: 130px; height: 130px; margin: -65px 0 0 -65px; --r: 210px; }
    .tx-about .value-card { width: 220px; padding: 28px 18px; }
    .tx-about .value-card h2 { font-size: 1.35rem; }
    .tx-about .values-summary { flex-direction: column; gap: 24px; }
    .tx-about .sv-divider { width: 100%; height: 1px; }
    .tx-about .about-wrapper { padding: 40px 16px 60px; }
}