/* ============================================================================
   ChinPost — Emil Kowalski Polish Layer (v1.0)
   Designed to sit on top of the existing styles in front-page.php / main.css.
   No overrides, no resets — pure additive refinement.
   Enqueue AFTER chinpost-main-css to ensure proper cascade.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   1. Global motion language
   The Emil signature: a single easing curve used everywhere for cohesion.
   "expo-out" — 0.16, 1, 0.3, 1 — feels like a soft physical settle.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --cp-emil-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cp-emil-ease-fast: cubic-bezier(0.32, 0.72, 0, 1);
    --cp-emil-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --cp-emil-shadow-md: 0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 12px 24px -4px rgba(15, 23, 42, 0.10);
    --cp-emil-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Scroll progress bar (top of viewport)
   Subtle gold filament that fills as you scroll. Pure CSS via @scroll-timeline
   fallback to JS-driven width var.
   ───────────────────────────────────────────────────────────────────────── */
.cp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}
.cp-scroll-progress__bar {
    height: 100%;
    width: var(--cp-scroll, 0%);
    background: linear-gradient(90deg, #facc15 0%, #D4AF37 50%, #b8860b 100%);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    transition: width 80ms linear;
}
body.admin-bar .cp-scroll-progress { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .cp-scroll-progress { top: 46px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Refined focus rings (Emil-style: solid outline + soft halo)
   Replaces the default browser ring while staying WCAG AA contrast.
   ───────────────────────────────────────────────────────────────────────── */
.cp-service-card:focus-within,
.cp-blog-card:focus-within,
.cp-luxe-contact-btn:focus-visible,
.cp-faq-summary:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.12);
    border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Card press feedback (active state polish)
   Scale-down on press is a tiny, expensive-feeling micro-interaction.
   ───────────────────────────────────────────────────────────────────────── */
.cp-service-card,
.cp-blog-card,
.cp-luxe-contact-btn,
.cp-elite-glass-panel {
    transition:
        transform 0.45s var(--cp-emil-ease),
        box-shadow 0.45s var(--cp-emil-ease),
        border-color 0.45s var(--cp-emil-ease);
}
.cp-service-card:active,
.cp-blog-card:active,
.cp-luxe-contact-btn:active {
    transform: scale(0.985) translateY(-2px);
    transition-duration: 0.12s;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Refined button micro-interactions
   Press = subtle compress, release = elastic lift. Classic Linear/Vercel feel.
   ───────────────────────────────────────────────────────────────────────── */
.cp-elite-submit-btn,
.cp-qt-submit-btn,
.cp-btn-gold,
.cp-btn-ghost {
    transition:
        transform 0.4s var(--cp-emil-ease),
        background 0.4s var(--cp-emil-ease),
        box-shadow 0.4s var(--cp-emil-ease),
        color 0.4s var(--cp-emil-ease);
    will-change: transform;
}
.cp-elite-submit-btn:active,
.cp-qt-submit-btn:active,
.cp-btn-gold:active,
.cp-btn-ghost:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. Layered shadow stacking on hover
   Emil's cards don't grow shadows — they accumulate them in layers,
   creating a believable lift-off-the-page sensation.
   ───────────────────────────────────────────────────────────────────────── */
.cp-service-card:hover,
.cp-blog-card:hover {
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 16px -4px rgba(15, 23, 42, 0.08),
        0 24px 48px -12px rgba(15, 23, 42, 0.16);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. Image breathing inside cards (very subtle, NEVER aggressive)
   ───────────────────────────────────────────────────────────────────────── */
.cp-service-card-img img,
.cp-blog-img {
    transition: transform 0.85s var(--cp-emil-ease), filter 0.6s var(--cp-emil-ease);
    will-change: transform;
}
.cp-service-card:hover .cp-service-card-img img,
.cp-blog-card:hover .cp-blog-img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.02);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. Section reveal on scroll (no library — pure IntersectionObserver consumer)
   Adds a soft fade-up that respects prefers-reduced-motion.
   Triggered via a tiny JS helper (see emil-init.js).
   ───────────────────────────────────────────────────────────────────────── */
[data-cp-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s var(--cp-emil-ease),
        transform 0.9s var(--cp-emil-ease);
    will-change: opacity, transform;
}
[data-cp-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-cp-reveal][data-cp-reveal-delay="100"] { transition-delay: 0.08s; }
[data-cp-reveal][data-cp-reveal-delay="200"] { transition-delay: 0.16s; }
[data-cp-reveal][data-cp-reveal-delay="300"] { transition-delay: 0.24s; }
[data-cp-reveal][data-cp-reveal-delay="400"] { transition-delay: 0.32s; }

/* ─────────────────────────────────────────────────────────────────────────
   9. FAQ chevron — refined spring rotation
   The existing 0.35s linear rotate becomes a settling spring.
   ───────────────────────────────────────────────────────────────────────── */
.cp-faq-chevron {
    transition: transform 0.5s var(--cp-emil-ease), color 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. Live trust bar — shimmer on the live dot (Linear-style breathing)
   ───────────────────────────────────────────────────────────────────────── */
.cp-trust-live-dot {
    position: relative;
}
.cp-trust-live-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    animation: cpEmilBreath 2.4s var(--cp-emil-ease) infinite;
    pointer-events: none;
}
@keyframes cpEmilBreath {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50%       { transform: scale(1.6); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. Anchor link underline animation (Vaul/Sonner style)
   Underline grows from left for LTR, from right for RTL.
   ───────────────────────────────────────────────────────────────────────── */
.cp-service-link,
.cp-view-all-link,
.cp-read-more-btn {
    position: relative;
}
.cp-service-link::after,
.cp-view-all-link::after,
.cp-read-more-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    inset-inline-start: 0;
    inset-inline-end: 100%;
    height: 1.5px;
    background: currentColor;
    transition: inset-inline-end 0.5s var(--cp-emil-ease);
    opacity: 0.6;
}
.cp-service-card:hover .cp-service-link::after,
.cp-blog-card:hover .cp-read-more-btn::after,
.cp-view-all-link:hover::after {
    inset-inline-end: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. Selection color — branded gold
   ───────────────────────────────────────────────────────────────────────── */
::selection {
    background: rgba(212, 175, 55, 0.25);
    color: #0f172a;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. Reduced motion — kill it all
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-cp-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .cp-trust-live-dot::before { animation: none; }
    .cp-scroll-progress { display: none; }
}