/* ==========================================================================
   ATWAM GROUP — About Page Effects
   Hover states, focus enhancement, accent lines, entrance animation.
   Layout and structure remain in about.css.
   Version 1.6.5
   ========================================================================== */

/* ── Scoped custom properties ─────────────────────────────────────────────── */
/* File loads only on the About page — body scope is safe and reliable. */
body {
    --about-accent:        var(--atwam-gold-primary);
    --about-accent-soft:   rgb(216 161 61 / 10%);
    --about-shadow-soft:   0 12px 30px rgb(1 22 50 / 8%);
    --about-shadow-hover:  0 18px 38px rgb(1 22 50 / 12%);
    --about-motion-fast:   180ms;
    --about-motion-normal: 280ms;
}

/* ── Entrance keyframe ────────────────────────────────────────────────────── */
@keyframes about-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Who We Are — one-time section entrance ──────────────────────────────── */
.atwam-who .atwam-who-grid {
    animation: about-fade-up 400ms ease both;
}

/* ── Feature cards ────────────────────────────────────────────────────────── */
.atwam-feature {
    transition:
        transform    var(--about-motion-normal) ease,
        border-color var(--about-motion-normal) ease,
        box-shadow   var(--about-motion-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-feature:hover {
        transform: translateY(-3px);
        border-color: rgb(216 161 61 / .38);
        box-shadow: var(--about-shadow-hover);
    }
}

/* ── Purpose cards ────────────────────────────────────────────────────────── */
.atwam-purpose-card {
    position: relative;
    transition:
        transform    var(--about-motion-normal) ease,
        border-color var(--about-motion-normal) ease;
}

/* Restrained gold accent line above each card heading */
.atwam-purpose-card::before {
    position: absolute;
    top: 0;
    left: 26px;
    width: 28px;
    height: 2px;
    background: var(--about-accent);
    opacity: .6;
    content: "";
}
.atwam-purpose-card:first-child::before {
    left: 0;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-purpose-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, .30);
    }
    .atwam-purpose-card:hover::before {
        opacity: 1;
    }
}

/* ── Sector cards ─────────────────────────────────────────────────────────── */
.atwam-sector-card img {
    transition: transform var(--about-motion-normal) ease;
}
.atwam-sector-card {
    transition:
        border-color var(--about-motion-normal) ease,
        box-shadow   var(--about-motion-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-sector-card:hover {
        border-color: rgb(216 161 61 / .40);
        box-shadow: var(--about-shadow-hover);
    }
    .atwam-sector-card:hover img {
        transform: scale(1.025);
    }
}

/* ── About services cards ─────────────────────────────────────────────────── */
/* Scope tightly so these overrides don't bleed into global atwam-svc-card rules */
.atwam-about-services .atwam-svc-card {
    position: relative;
    transition:
        transform    var(--about-motion-normal) ease,
        border-color var(--about-motion-normal) ease,
        box-shadow   var(--about-motion-normal) ease;
}

/* Gold accent bar — sweeps left-to-right on hover (same language as Homepage) */
.atwam-about-services .atwam-svc-card::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--about-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--about-motion-normal) ease;
    content: "";
}

/* Link: explicit color beats GeneratePress .site-content a (0,1,1) specificity */
.atwam-about-services .atwam-svc-link a {
    display: inline-block;
    color: var(--atwam-navy-primary);
    transition:
        transform var(--about-motion-fast) ease,
        color     var(--about-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-about-services .atwam-svc-card:hover {
        transform: translateY(-4px);
        border-color: rgb(216 161 61 / .42);
        box-shadow: var(--about-shadow-hover);
    }
    .atwam-about-services .atwam-svc-card:hover::before {
        transform: scaleX(1);
    }
    .atwam-about-services .atwam-svc-card:hover .atwam-svc-link a {
        transform: translateX(3px);
    }
}

/* ── View Our Services button ─────────────────────────────────────────────── */
/* Gutenberg core/button: .atwam-about-btn-outline is the wrapper div;
   .wp-block-button__link is the clickable anchor. Apply all effects to the anchor. */
.atwam-about-btn-outline .wp-block-button__link {
    transition:
        color            var(--about-motion-fast) ease,
        background-color var(--about-motion-fast) ease,
        border-color     var(--about-motion-fast) ease,
        transform        var(--about-motion-fast) ease,
        box-shadow       var(--about-motion-fast) ease;
}
.atwam-about-btn-outline .wp-block-button__link:focus-visible {
    outline: 3px solid var(--about-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgb(216 161 61 / 18%);
}

@media (hover: hover) and (pointer: fine) {
    .atwam-about-btn-outline:hover .wp-block-button__link {
        color: var(--atwam-white);
        background-color: var(--atwam-navy-primary);
        border-color: var(--atwam-gold-primary);
        transform: translateY(-2px);
        box-shadow: var(--about-shadow-soft);
    }
}

/* ── WhatsApp CTA button ──────────────────────────────────────────────────── */
.atwam-about-cta-whatsapp {
    transition:
        color            var(--about-motion-fast) ease,
        background-color var(--about-motion-fast) ease,
        border-color     var(--about-motion-fast) ease,
        transform        var(--about-motion-fast) ease,
        box-shadow       var(--about-motion-fast) ease;
}
.atwam-about-cta-whatsapp:focus-visible {
    outline: 3px solid var(--atwam-white);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgb(216 161 61 / 40%);
}
.atwam-about-cta-whatsapp:active {
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .atwam-about-cta-whatsapp:hover {
        color: var(--atwam-gold-primary);
        background-color: transparent;
        border-color: var(--atwam-gold-primary);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgb(1 22 50 / 22%);
    }
}

/* ── About CTA depth ──────────────────────────────────────────────────────── */
/* Vignette and warm radial matching Homepage CTA band visual language */
.atwam-about-cta::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgb(1 22 50 / .08) 0%, transparent 22%),
        linear-gradient(to top,    rgb(1 22 50 / .08) 0%, transparent 22%);
    pointer-events: none;
    content: "";
}
.atwam-about-cta::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 85% at 50% 50%, rgb(193 153 104 / .28) 0%, transparent 70%);
    pointer-events: none;
    content: "";
}

/* ── Reduced-motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .atwam-who .atwam-who-grid,
    .atwam-feature,
    .atwam-purpose-card, .atwam-purpose-card::before,
    .atwam-sector-card, .atwam-sector-card img,
    .atwam-about-services .atwam-svc-card,
    .atwam-about-services .atwam-svc-card::before,
    .atwam-about-services .atwam-svc-link a,
    .atwam-about-btn-outline .wp-block-button__link,
    .atwam-about-cta-whatsapp,
    .atwam-about-cta::before,
    .atwam-about-cta::after {
        animation-duration:        .01ms !important;
        animation-iteration-count: 1    !important;
        transition-duration:       .01ms !important;
    }
}