/**
 * ChinPost Identity & Trust Layer Stylesheet
 * Sections: Identity/E-E-A-T, Live Trust Bar, enhanced motion utilities
 * Built RTL-first, dark + light variants
 */

/* ═══════════════════════════════════════════════
   0. MOTION UTILITIES (used across new sections)
   ═══════════════════════════════════════════════ */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="blur"]  { filter: blur(8px); }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

[data-tilt] {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

[data-magnetic],
[data-magnetic-inner] {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.cp-type-cursor {
    display: inline-block;
    margin-inline-start: 2px;
    color: #facc15;
    animation: cpTypeCursor 0.8s steps(2) infinite;
    font-weight: 100;
}
@keyframes cpTypeCursor { 50% { opacity: 0; } }

/* Scroll progress bar */
.cp-scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D4AF37, #facc15, #fff5e0);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.55);
}
html[dir="rtl"] .cp-scroll-progress { transform-origin: right center; }

/* ═══════════════════════════════════════════════
   1. LIVE TRUST BAR (immediately under hero)
   ═══════════════════════════════════════════════ */

.cp-live-trust {
    position: relative;
    z-index: 45;
    background: linear-gradient(135deg, #0b1424 0%, #0f1a2e 50%, #0b1424 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 1px solid rgba(212, 175, 55, 0.10);
    padding: 28px 0;
    overflow: hidden;
}
.cp-live-trust::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 100% at 20% 50%, rgba(212, 175, 55, 0.08), transparent 70%),
        radial-gradient(ellipse 50% 100% at 80% 50%, rgba(59, 130, 246, 0.06), transparent 70%);
    pointer-events: none;
}
.cp-live-trust-container {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
}
.cp-trust-cell {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.cp-trust-cell:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.28);
    transform: translateY(-2px);
}
.cp-trust-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: #facc15;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cp-trust-icon svg { width: 20px; height: 20px; }
.cp-trust-body { flex: 1; min-width: 0; }
.cp-trust-label {
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    direction: rtl;
}
.cp-trust-value {
    color: #f1f5f9;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    display: flex; align-items: baseline; gap: 6px;
    direction: ltr;
}
.cp-trust-value-fa { direction: rtl; font-family: inherit; }
.cp-trust-suffix {
    color: #facc15;
    font-size: 12px;
    font-weight: 700;
}

/* Live indicator dot */
.cp-trust-live-dot {
    position: relative;
    width: 8px; height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    flex-shrink: 0;
}
.cp-trust-live-dot::after {
    content: ''; position: absolute; inset: -3px;
    border: 1.5px solid #10b981;
    border-radius: 50%;
    animation: cpTrustPing 2s ease-out infinite;
}
@keyframes cpTrustPing {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}
[data-live-pulse].is-pulsing .cp-trust-value {
    animation: cpValuePulse 0.8s ease;
}
@keyframes cpValuePulse {
    0% { color: #f1f5f9; }
    50% { color: #facc15; transform: translateY(-1px); }
    100% { color: #f1f5f9; }
}

@media (max-width: 1024px) {
    .cp-live-trust-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cp-live-trust-container { grid-template-columns: 1fr; gap: 10px; }
    .cp-trust-cell { padding: 12px 14px; }
    .cp-trust-value { font-size: 15px; }
}

/* ═══════════════════════════════════════════════
   2. IDENTITY / E-E-A-T SECTION
   ═══════════════════════════════════════════════ */

.cp-identity {
    position: relative;
    padding: clamp(80px, 9vw, 140px) 0;
    background:
        radial-gradient(ellipse 60% 50% at 80% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
        linear-gradient(180deg, #fbfcfd 0%, #f1f5f9 100%);
    overflow: hidden;
    direction: rtl;
}
.cp-identity::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(15, 26, 46, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 26, 46, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
}

.cp-identity-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.cp-identity-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

/* — Founder card — */
.cp-founder-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 40px 36px 36px;
    box-shadow:
        0 1px 0 rgba(15, 26, 46, 0.04),
        0 30px 80px -20px rgba(15, 26, 46, 0.18);
    border: 1px solid rgba(15, 26, 46, 0.05);
    text-align: center;
    overflow: hidden;
}
.cp-founder-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #D4AF37, #facc15, #D4AF37, transparent);
    opacity: 0.85;
}
.cp-founder-decor {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%);
    pointer-events: none;
}

.cp-founder-portrait-wrap {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0 auto 22px;
}
.cp-founder-portrait {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.5),
        0 18px 50px rgba(15, 26, 46, 0.18);
    background: linear-gradient(135deg, #0f172a, #1e293b);
}
.cp-founder-badge {
    position: absolute;
    bottom: 6px;
    right: -6px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #facc15, #D4AF37);
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.5);
    border: 3px solid #fff;
}
.cp-founder-badge svg { width: 20px; height: 20px; }

.cp-founder-name {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.cp-founder-role {
    font-size: 13.5px;
    color: #64748b;
    font-weight: 600;
    margin: 0 0 18px;
    letter-spacing: 0.2px;
}
.cp-founder-bio {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.85;
    margin: 0 0 20px;
    text-align: justify;
    text-align-last: center;
}

.cp-founder-signature {
    margin: 0 auto 20px;
    max-width: 220px;
    height: 56px;
    background: url('../images/team/founder-signature.svg') center/contain no-repeat;
    opacity: 0.9;
    filter: brightness(0.2);
}
.cp-founder-signature.is-placeholder {
    background: none;
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-size: 38px;
    line-height: 56px;
    color: #0f172a;
    transform: rotate(-4deg);
    letter-spacing: 1px;
}

.cp-founder-meta {
    display: flex; justify-content: center; gap: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}
.cp-founder-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 50px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}
.cp-founder-link:hover {
    background: #fff;
    border-color: rgba(212, 175, 55, 0.4);
    color: #b8941f;
    transform: translateY(-2px);
}
.cp-founder-link svg { width: 14px; height: 14px; }

/* — Identity content (right side) — */
.cp-identity-content { direction: rtl; }
.cp-identity-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(212, 175, 55, 0.10);
    color: #b8941f;
    border: 1px solid rgba(212, 175, 55, 0.22);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 22px;
}
.cp-identity-eyebrow-dot {
    width: 6px; height: 6px;
    background: #D4AF37; border-radius: 50%;
    box-shadow: 0 0 8px #D4AF37;
}

.cp-identity-title {
    font-size: clamp(28px, 3.6vw, 44px);
    color: #0f172a;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
}
.cp-identity-title .cp-gold-accent {
    background: linear-gradient(135deg, #b8941f, #D4AF37 50%, #facc15);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cp-identity-lead {
    font-size: clamp(15.5px, 1.4vw, 17.5px);
    color: #475569;
    line-height: 1.85;
    margin: 0 0 28px;
    max-width: 620px;
}

/* Pillars (E-E-A-T) */
.cp-identity-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
.cp-pillar {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 16px;
    transition: all 0.3s ease;
}
.cp-pillar:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 14px 32px rgba(15, 26, 46, 0.07);
    transform: translateY(-3px);
}
.cp-pillar-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #D4AF37;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.cp-pillar:hover .cp-pillar-icon {
    background: linear-gradient(135deg, #facc15, #D4AF37);
    color: #0f172a;
    transform: rotate(-6deg) scale(1.06);
}
.cp-pillar-icon svg { width: 20px; height: 20px; }
.cp-pillar h3 {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.cp-pillar p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.7;
    font-weight: 500;
}

/* Certificates strip */
.cp-cert-strip {
    margin-top: 28px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 18px;
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
}
.cp-cert-strip::before {
    content: '';
    position: absolute; top: 0; right: 0; width: 200%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    animation: cpCertScan 4s ease-in-out infinite;
}
@keyframes cpCertScan {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50%); opacity: 0; }
}
.cp-cert-strip-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.cp-cert-strip-header svg { color: #facc15; }

.cp-cert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.cp-cert-badge {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
    transition: all 0.3s ease;
}
.cp-cert-badge:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-2px);
}
.cp-cert-badge-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: #facc15;
    display: flex; align-items: center; justify-content: center;
}
.cp-cert-badge-icon svg { width: 14px; height: 14px; }

@media (max-width: 992px) {
    .cp-identity-grid { grid-template-columns: 1fr; gap: 48px; }
    .cp-founder-card { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .cp-identity-pillars { grid-template-columns: 1fr; }
    .cp-cert-list { grid-template-columns: 1fr 1fr; }
    .cp-founder-portrait-wrap { width: 140px; height: 140px; }
}

/* ═══════════════════════════════════════════════
   3. ENHANCED SERVICE TILT (works with existing grid)
   ═══════════════════════════════════════════════ */

.cp-service-card[data-tilt] {
    --tilt-x: 50%;
    --tilt-y: 50%;
}
.cp-service-card[data-tilt]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        circle 200px at var(--tilt-x) var(--tilt-y),
        rgba(212, 175, 55, 0.18),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5;
}
.cp-service-card[data-tilt]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════
   4. CLIENT LOGO MARQUEE (alternative to existing partners)
   ═══════════════════════════════════════════════ */

.cp-logo-marquee {
    position: relative;
    overflow: hidden;
    padding: 24px 0;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cp-logo-marquee-track {
    display: flex;
    gap: 56px;
    animation: cpMarqueeMove 40s linear infinite;
    width: max-content;
    align-items: center;
}
.cp-logo-marquee:hover .cp-logo-marquee-track { animation-play-state: paused; }
@keyframes cpMarqueeMove {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
html[dir="rtl"] .cp-logo-marquee-track { animation-name: cpMarqueeMoveRTL; }
@keyframes cpMarqueeMoveRTL {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
.cp-logo-marquee-item {
    height: 48px;
    flex-shrink: 0;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.cp-logo-marquee-item:hover {
    opacity: 1;
    filter: grayscale(0);
}
.cp-logo-marquee-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ═══════════════════════════════════════════════
   5. REDUCED MOTION OVERRIDES
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
    [data-tilt], [data-magnetic], [data-magnetic-inner] { transform: none !important; }
    .cp-trust-live-dot::after,
    .cp-cert-strip::before,
    .cp-logo-marquee-track,
    .cp-type-cursor { animation: none !important; }
    .cp-scroll-progress { display: none; }
}