/* ═══════════════════════════════════════════════════════════════════
   EVERGROW SECTIONS   (pairs with js/sections.js)
   Per-section finishing layer, from The System down to the footer.

   Same contract as radiance.css:
   - Fail-open. Anything that starts hidden is scoped to an attribute that
     only sections.js sets, after it has also scheduled the release.
   - transform / opacity only for anything that moves continuously.
   - Hover effects are gated to fine pointers; touch gets the in-view
     versions instead.
   - prefers-reduced-motion switches every keyframe off.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --sx-gold: #D5B473;
    --sx-gold-ink: #7C6432;
    --sx-champagne: #F6E7C1;
    --sx-ink: #132019;
    --sx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 1. Word-mask heading reveal (headings with no motion of their own) */
.sx-w {
    display: inline-block;
    overflow: hidden;
    overflow: clip;
    vertical-align: top;
    /* room for descenders and the italic overhang inside the mask */
    padding: 0 0.04em 0.12em;
    margin: 0 -0.04em -0.12em;
}
.sx-w > span { display: inline-block; }
[data-sx-split="armed"] .sx-w > span {
    transform: translate3d(0, 108%, 0) rotate(4deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition:
        transform 900ms var(--sx-ease) calc(var(--i, 0) * 55ms),
        opacity 500ms var(--sx-ease) calc(var(--i, 0) * 55ms);
}
[data-sx-split="in"] .sx-w > span {
    transform: none;
    opacity: 1;
    transition:
        transform 900ms var(--sx-ease) calc(var(--i, 0) * 55ms),
        opacity 500ms var(--sx-ease) calc(var(--i, 0) * 55ms);
}

/* ── 2. The System: card finish ─────────────────────────────────── */
.v2-method .v2-method__card { position: relative; }
.v2-method .v2-method__card::before {
    /* gold hairline across the top edge, drawn when the card arrives */
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sx-gold), transparent);
    transform: scaleX(0);
    transition: transform 1100ms var(--sx-ease) 200ms;
    pointer-events: none;
}
.v2-method .v2-method__card[data-sx-in]::before { transform: scaleX(1); }
/* ── 3. Clients: avatar ring + stat count ───────────────────────── */
.sx-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    isolation: isolate;
}
.sx-avatar::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(213, 180, 115, 0) 0deg, rgba(213, 180, 115, 0.9) 70deg, rgba(246, 231, 193, 1) 100deg, rgba(213, 180, 115, 0) 170deg, rgba(213, 180, 115, 0) 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    opacity: 0.85;
}
.sx-avatar[data-sx-live]::before { animation: sx-spin 7s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }

/* ── 4. Industries: reframe the logistics photograph on its subject ─ */
#industry-verticals img[src*="logistics-card"] { object-position: 50% 88%; }

/* ── 5. Ideology: a light that travels the "vs" seam ─────────────── */
.idl-compare { position: relative; }
.idl-vs { position: relative; }
.sx-seam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    pointer-events: none;
    overflow: hidden;
    overflow: clip;
    z-index: 1;
}
.sx-seam::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 34%;
    background: linear-gradient(180deg, transparent, var(--sx-champagne), var(--sx-gold), transparent);
    transform: translate3d(0, -110%, 0);
}
.sx-seam[data-sx-live]::after { animation: sx-seam 4.6s var(--sx-ease) infinite; }
@keyframes sx-seam {
    0%   { transform: translate3d(0, -110%, 0); }
    70%, 100% { transform: translate3d(0, 310%, 0); }
}
@media (max-width: 1023px) { .sx-seam { display: none; } }

/* ── 6. Relay: the thread runs behind the glass cards, and a baton
   rides it at the reader's eye line ─────────────────────────────── */
#relay #rl-thread { z-index: 0; }
#relay .rl-row { position: relative; z-index: 1; }
.sx-baton {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E7 0 30%, var(--sx-gold) 45%, rgba(213, 180, 115, 0) 72%);
    box-shadow: 0 0 22px 6px rgba(213, 180, 115, 0.45);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 400ms var(--sx-ease);
}
.sx-baton::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(213, 180, 115, 0.55);
    animation: sx-ping 2.2s var(--sx-ease) infinite;
}
@keyframes sx-ping {
    0%   { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ── 7. Scoreboards: rented signal vs owned signal ──────────────── */
.sx-signal {
    position: relative;
    height: 84px;
    margin: 0 0 1.75rem;
    border-radius: 14px;
    overflow: hidden;
    overflow: clip;
    border: 1px solid rgba(19, 32, 25, 0.08);
    background: linear-gradient(180deg, rgba(19, 32, 25, 0.025), rgba(19, 32, 25, 0));
}
.sx-signal--owned {
    border-color: rgba(213, 180, 115, 0.28);
    background: linear-gradient(180deg, rgba(213, 180, 115, 0.08), rgba(213, 180, 115, 0));
}
.sx-signal svg {
    position: absolute;
    left: 0;
    top: 24px;
    height: calc(100% - 24px);
    width: 200%;
    will-change: transform;
}
.sx-signal[data-sx-live] svg { animation: sx-scroll 9s linear infinite; }
.sx-signal--owned[data-sx-live] svg { animation-duration: 14s; }
@keyframes sx-scroll { to { transform: translate3d(-50%, 0, 0); } }
.sx-signal .sx-sig-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sx-signal--rented .sx-sig-line { stroke: rgba(19, 32, 25, 0.55); }
.sx-signal--owned .sx-sig-line { stroke: var(--sx-gold); }
.sx-signal .sx-sig-area { stroke: none; }
.sx-signal--rented .sx-sig-area { fill: rgba(19, 32, 25, 0.05); }
.sx-signal--owned .sx-sig-area { fill: rgba(213, 180, 115, 0.12); }
.sx-signal .sx-sig-tag {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 2;
    font: 500 8.5px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.sx-signal--rented .sx-sig-tag { color: rgba(19, 32, 25, 0.62); }
.sx-signal--owned .sx-sig-tag { color: var(--sx-champagne); }
.sx-sig-tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.sx-signal[data-sx-live] .sx-sig-tag::before { animation: sx-blink 1.6s ease-in-out infinite; }
@keyframes sx-blink { 50% { opacity: 0.25; } }

/* ── 8. Convert: a pass of light over the #1 row ─────────────────── */
#convert-stage .stage-row:first-child {
    position: relative;
    overflow: hidden;
    overflow: clip;
}
#convert-stage .stage-row:first-child::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(213, 180, 115, 0.18), transparent);
    transform: translate3d(-120%, 0, 0);
    pointer-events: none;
}
#convert-stage[data-sx-live] .stage-row:first-child::after { animation: sx-rowglint 4.8s var(--sx-ease) infinite 1s; }
@keyframes sx-rowglint {
    0%        { transform: translate3d(-120%, 0, 0); }
    35%, 100% { transform: translate3d(300%, 0, 0); }
}

/* ── 9. FAQ: answers arrive instead of swapping ──────────────────── */
@media (min-width: 1024px) {
    #faq-section .idx-faq-panel.is-active {
        animation: sx-answer 560ms var(--sx-ease) both;
    }
}
@keyframes sx-answer {
    from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
#faq-section .idx-faq-q-btn { transition: background-color 300ms var(--sx-ease), color 300ms var(--sx-ease), transform 300ms var(--sx-ease); }
@media (hover: hover) and (pointer: fine) {
    #faq-section .idx-faq-q-btn:not(.is-active):hover { transform: translateX(4px); }
}

/* ── 10. Founders: portraits and credentials ─────────────────────── */
#founders-section .img-reveal img { transition: transform 1200ms var(--sx-ease); }
@media (hover: hover) and (pointer: fine) {
    #founders-section [data-mot="plate"]:hover .img-reveal img { transform: scale(1.04); }
}
[data-sx-chips="armed"] > * {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
}
[data-sx-chips="in"] > * {
    opacity: 1;
    transform: none;
    transition: opacity 500ms var(--sx-ease) calc(var(--i, 0) * 60ms), transform 600ms var(--sx-ease) calc(var(--i, 0) * 60ms);
}

/* ── 11. Close: the engagement ladder reads as a ladder ──────────── */
[data-sx-ladder] { position: relative; }
[data-sx-ladder]::before {
    /* the rail the three rungs sit on (wide screens) */
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(213, 180, 115, 0), rgba(213, 180, 115, 0.6) 15%, rgba(213, 180, 115, 0.6) 85%, rgba(213, 180, 115, 0));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 1400ms var(--sx-ease) 300ms;
    pointer-events: none;
    z-index: 0;
}
[data-sx-ladder][data-sx-in]::before { transform: scaleX(1); }
[data-sx-ladder] > * { z-index: 1; }
@media (max-width: 639px) { [data-sx-ladder]::before { display: none; } }
.sx-start {
    position: absolute;
    top: -0.7rem;
    right: 1rem;
    padding: 0.45em 0.8em;
    border-radius: 999px;
    background: var(--sx-gold);
    color: var(--sx-ink);
    font: 600 8.5px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -8px rgba(213, 180, 115, 0.7);
}
.sx-start::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1px solid rgba(213, 180, 115, 0.7);
    opacity: 0;
}
[data-sx-ladder][data-sx-in] .sx-start::before { animation: sx-ping-soft 2.6s var(--sx-ease) infinite 1.2s; }
@keyframes sx-ping-soft {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.35, 1.6); opacity: 0; }
}

/* ── 12. Footer: links underline from the left ───────────────────── */
#atelier-footer a:not([class*="btn"]) {
    background-image: linear-gradient(var(--sx-gold), var(--sx-gold));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 420ms var(--sx-ease), color 300ms var(--sx-ease);
}
@media (hover: hover) and (pointer: fine) {
    #atelier-footer a:not([class*="btn"]):hover { background-size: 100% 1px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sx-avatar::before,
    .sx-seam::after,
    .sx-baton,
    .sx-baton::after,
    .sx-signal svg,
    .sx-sig-tag::before,
    #convert-stage .stage-row:first-child::after,
    #faq-section .idx-faq-panel.is-active,
    .sx-start::before { animation: none !important; }
    .sx-baton { display: none; }
    [data-sx-split] .sx-w > span,
    [data-sx-chips] > * { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ── Hero: "recommended by [engine]" wraps cleanly on small screens ── */
.hero-chip-line .headline-line > .inline-flex { flex-wrap: wrap; row-gap: 0.5rem; }