/* ════════════════════════════════════════════════════════════
   Homepage Animations — section separators + grid card borders
   ════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes sep-sweep {
    from { transform: translateX(-105%); }
    to   { transform: translateX(105%); }
}

@keyframes sep-ring-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(4.5); opacity: 0; }
}

@keyframes service-border-trace {
    0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
    58%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}

@keyframes industry-border-trace {
    0%   { clip-path: inset(0 0 100% 0); opacity: 0.5; }
    55%  { clip-path: inset(0 0 0 0);    opacity: 0.5; }
    100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}

/* ── Section separator ──────────────────────────────────────── */

.section-sep {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

/* Line container — clips the sweep animation */
.section-sep-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -0.5px;
    background: linear-gradient(
        90deg,
        transparent              0%,
        rgba(15,23,42,0.12)     12%,
        rgba(15,23,42,0.12)     88%,
        transparent             100%
    );
    overflow: hidden;
}

/* Orange sweep — runs across the line once on reveal */
.section-sep-sweep {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: -1px;
    background: linear-gradient(
        90deg,
        transparent              0%,
        rgba(249,115,22,0.35)   25%,
        var(--color-primary)    50%,
        rgba(249,115,22,0.35)   75%,
        transparent             100%
    );
    transform: translateX(-105%);
    will-change: transform;
}

.section-sep.is-visible .section-sep-sweep {
    animation: sep-sweep 1.1s cubic-bezier(0.35, 0, 0.15, 1) forwards;
}

/* Center diamond marker */
.section-sep-diamond {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-sep.is-visible .section-sep-diamond {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transition-delay: 0.55s;
}

/* Expanding ring pulsing out from the diamond */
.section-sep-diamond::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: 0;
}

.section-sep.is-visible .section-sep-diamond::after {
    animation: sep-ring-pulse 2.4s ease-out 1.15s infinite;
}


/* ── Service card border trace (left → right, then fades out) ── */

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(249,115,22,0.45);
    pointer-events: none;
    z-index: 9;
    opacity: 0;
}

.service-card.revealed::after {
    animation: service-border-trace 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ── Industry card border trace (top → bottom, then fades out) ─ */

.ind-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--ind-accent, #f97316);
    pointer-events: none;
    z-index: 6;
    opacity: 0;
}

.ind-card.revealed::after {
    animation: industry-border-trace 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ── Timeline card corner brackets (expand in on parent reveal) */

.tl-card::before,
.tl-card::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition:
        width   0.38s cubic-bezier(0.4, 0, 0.2, 1),
        height  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.tl-card::before {
    top: 8px;
    left: 8px;
    border-top:  2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
}

.tl-card::after {
    bottom: 8px;
    right:  8px;
    border-bottom: 2px solid var(--color-primary);
    border-right:  2px solid var(--color-primary);
    transition-delay: 0.14s;
}

.tl-card-col.revealed .tl-card::before,
.tl-card-col.revealed .tl-card::after {
    width:   22px;
    height:  22px;
    opacity: 0.72;
}


/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .section-sep-sweep { animation: none !important; transform: none; }
    .section-sep-diamond { transition: none !important; }
    .section-sep-diamond::after { animation: none !important; }

    .section-sep.is-visible .section-sep-diamond {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }

    .service-card.revealed::after,
    .ind-card.revealed::after {
        animation: none !important;
        opacity: 0;
    }

    .tl-card::before,
    .tl-card::after { transition: none !important; }
    .tl-card-col.revealed .tl-card::before,
    .tl-card-col.revealed .tl-card::after { width: 22px; height: 22px; opacity: 0.72; }
}