/* ==========================================================================
   ATWAM GROUP — Homepage Effects
   Micro-interactions, hover states, one-time entrance animation.
   Layout, section structure and base colours remain in home.css.
   Version 1.6.1
   ========================================================================== */

/* ── Scoped custom properties ─────────────────────────────────────────────── */
.atwam-page--home {
    --home-accent:        var(--atwam-gold-primary);
    --home-accent-soft:   rgb(216 161 61 / 12%);
    --home-shadow-soft:   0 12px 32px rgb(1 22 50 / 8%);
    --home-shadow-hover:  0 18px 42px rgb(1 22 50 / 14%);
    --home-motion-fast:   180ms;
    --home-motion-normal: 280ms;
    --home-motion-slow:   400ms;
}

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

/* ── Eyebrow hairline (homepage-only) ────────────────────────────────────── */
/* Global .atwam-eyebrow has no ::before — safe to add here */
.atwam-page--home .atwam-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.atwam-page--home .atwam-eyebrow::before {
    flex-shrink: 0;
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .85;
    content: "";
}

/* ── Hero section ─────────────────────────────────────────────────────────── */
.atwam-home-hero {
    position: relative;
    isolation: isolate;
}

/* Depth radial overlay on top of the hero linear-gradient background */
.atwam-home-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 80% at 18% 65%, rgb(1 22 50 / .55) 0%, transparent 70%),
        radial-gradient(ellipse 32% 45% at 80% 18%, rgb(216 161 61 / .06) 0%, transparent 60%);
    pointer-events: none;
    content: "";
}

/* Architectural gold hairline at hero bottom */
.atwam-home-hero::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 64px;
    height: 2px;
    background: var(--home-accent);
    transform: translateX(-50%);
    opacity: .55;
    content: "";
}

/* One-time entrance for hero text column */
.atwam-hero-columns > :first-child {
    animation: atwam-fade-up var(--home-motion-slow) ease both;
}

/* Feature pills — border brightens on hover */
.atwam-hero-features p {
    transition:
        border-left-color var(--home-motion-fast) ease,
        color             var(--home-motion-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
    .atwam-hero-features p:hover {
        border-left-color: var(--atwam-white);
        color: var(--atwam-white);
    }
}


/* ── Outline-light visibility in hero ────────────────────────────────────── */
/* Explicit color beats GeneratePress .site-content a specificity (0,1,1).
   Border raised from 55% → 85% so the outline reads clearly on dark navy. */
.atwam-home-hero .atwam-button--outline-light {
    color: var(--atwam-white);
    border-color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .11);
}

/* ── Button micro-interaction ─────────────────────────────────────────────── */
.atwam-page--home .atwam-button {
    transition:
        transform        var(--home-motion-fast) ease,
        background-color var(--home-motion-fast) ease,
        border-color     var(--home-motion-fast) ease,
        color            var(--home-motion-fast) ease,
        box-shadow       var(--home-motion-fast) ease;
}
.atwam-page--home .atwam-button:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgb(216 161 61 / 18%);
}
@media (hover: hover) and (pointer: fine) {
    .atwam-page--home .atwam-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--home-shadow-soft);
    }
}

/* ── Service cards ────────────────────────────────────────────────────────── */
.atwam-page--home .atwam-service-card {
    position: relative; /* required for ::before accent bar */
    transition:
        transform    var(--home-motion-normal) ease,
        border-color var(--home-motion-normal) ease,
        box-shadow   var(--home-motion-normal) ease;
}

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

.atwam-page--home .atwam-service-number {
    transition: opacity var(--home-motion-fast) ease;
    opacity: .62;
}

.atwam-page--home .atwam-text-link {
    display: inline-block;
    transition:
        transform var(--home-motion-fast) ease,
        color     var(--home-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-page--home .atwam-service-card:hover {
        transform: translateY(-4px);
        border-color: rgb(216 161 61 / .42);
        box-shadow: var(--home-shadow-hover);
    }
    .atwam-page--home .atwam-service-card:hover::before {
        transform: scaleX(1);
    }
    .atwam-page--home .atwam-service-card:hover .atwam-service-number {
        opacity: 1;
    }
    .atwam-page--home .atwam-service-card:hover .atwam-text-link {
        transform: translateX(3px);
    }
}

/* ── Why section ──────────────────────────────────────────────────────────── */
/* Quieter than service cards — 3px lift, no border change */
.atwam-page--home .atwam-why-item {
    border-radius: var(--atwam-radius-sm);
    transition:
        transform        var(--home-motion-normal) ease,
        background-color var(--home-motion-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
    .atwam-page--home .atwam-why-item:hover {
        transform: translateY(-3px);
        background-color: rgba(255, 255, 255, .05);
    }
}

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.atwam-cta-band {
    position: relative;
    isolation: isolate;
}

/* Depth vignette: subtle navy edge top and bottom */
.atwam-cta-band::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgb(1 22 50 / .09) 0%, transparent 24%),
        linear-gradient(to top,    rgb(1 22 50 / .09) 0%, transparent 24%);
    pointer-events: none;
    content: "";
}

/* Warm antique-gold radial at centre for visual depth */
.atwam-cta-band::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 58% 88% at 50% 50%, rgb(193 153 104 / .30) 0%, transparent 70%);
    pointer-events: none;
    content: "";
}

/* ── Reduced-motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .atwam-page--home,
    .atwam-page--home *,
    .atwam-page--home *::before,
    .atwam-page--home *::after {
        scroll-behavior:           auto;
        animation-duration:        .01ms !important;
        animation-iteration-count: 1    !important;
        transition-duration:       .01ms !important;
    }
}