/* ============================================================
   Strata Funding — Cinematic CSS (restrained, professional)
   Loaded after the page <style> block so these rules win.
   All motion is gated by prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* ---- Reveal-on-scroll primitives ------------------------ */
    [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--reveal-delay, 0) * 1ms);
        will-change: opacity, transform;
    }
    [data-reveal].cin-in {
        opacity: 1;
        transform: translateY(0);
    }

    [data-reveal-stagger] > * {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--cin-i, 0) * 90ms);
        will-change: opacity, transform;
    }
    [data-reveal-stagger].cin-in > * {
        opacity: 1;
        transform: translateY(0);
    }

    /* ---- Hero load-in (fires immediately on page load) ------ */
    .hero .hero-eyebrow,
    .hero h1,
    .hero .hero-subheadline,
    .hero .hero-cta-group,
    .hero .trust-strip,
    .page-hero .eyebrow,
    .page-hero h1,
    .page-hero .lede,
    .page-hero .page-hero-cta {
        opacity: 0;
        transform: translateY(20px);
        animation: cinHeroIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero .hero-eyebrow,        .page-hero .eyebrow         { animation-delay: 0.10s; }
    .hero h1,                   .page-hero h1               { animation-delay: 0.22s; }
    .hero .hero-subheadline,    .page-hero .lede            { animation-delay: 0.36s; }
    .hero .hero-cta-group,      .page-hero .page-hero-cta   { animation-delay: 0.50s; }
    .hero .trust-strip                                      { animation-delay: 0.64s; }

    @keyframes cinHeroIn {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Hero Ken Burns (slow zoom on the bg image) --------- */
    .hero::before {
        transform: scale(1.0);
        transition: transform 22s ease-out;
    }
    .hero.cin-burns::before {
        transform: scale(1.07);
    }

    /* ---- Bar-chart bar growth (cashflow comparison) --------- */
    .bar-chart .bar {
        transform: scaleY(0);
        transform-origin: bottom center;
        transition: transform 0.95s cubic-bezier(0.34, 1.25, 0.64, 1);
    }
    .bar-chart.cin-in .bar { transform: scaleY(1); }
    .bar-chart .bar:nth-child(1)  { transition-delay: 0.05s; }
    .bar-chart .bar:nth-child(2)  { transition-delay: 0.13s; }
    .bar-chart .bar:nth-child(3)  { transition-delay: 0.21s; }
    .bar-chart .bar:nth-child(4)  { transition-delay: 0.29s; }
    .bar-chart .bar:nth-child(5)  { transition-delay: 0.37s; }
    .bar-chart .bar:nth-child(6)  { transition-delay: 0.45s; }
    .bar-chart .bar:nth-child(7)  { transition-delay: 0.53s; }
    .bar-chart .bar:nth-child(8)  { transition-delay: 0.61s; }
    .bar-chart .bar:nth-child(9)  { transition-delay: 0.69s; }
    .bar-chart .bar:nth-child(10) { transition-delay: 0.77s; }

    /* ---- Timeline strip month chips (solutions) ------------- */
    .timeline-strip .month {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
        transition:
            opacity 0.5s ease-out,
            transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1);
    }
    .timeline-strip.cin-in .month { opacity: 1; transform: translateY(0) scale(1); }
    .timeline-strip.cin-in .month:nth-child(1)  { transition-delay: 0.05s; }
    .timeline-strip.cin-in .month:nth-child(2)  { transition-delay: 0.13s; }
    .timeline-strip.cin-in .month:nth-child(3)  { transition-delay: 0.24s; }
    .timeline-strip.cin-in .month:nth-child(4)  { transition-delay: 0.32s; }
    .timeline-strip.cin-in .month:nth-child(5)  { transition-delay: 0.40s; }
    .timeline-strip.cin-in .month:nth-child(6)  { transition-delay: 0.48s; }
    .timeline-strip.cin-in .month:nth-child(7)  { transition-delay: 0.56s; }
    .timeline-strip.cin-in .month:nth-child(8)  { transition-delay: 0.64s; }
    .timeline-strip.cin-in .month:nth-child(9)  { transition-delay: 0.72s; }
    .timeline-strip.cin-in .month:nth-child(10) { transition-delay: 0.80s; }

    /* ---- Big number pop-in (zero callout, big-ten) ---------- */
    .zero-callout .zero,
    .big-ten .ten {
        opacity: 0;
        transform: scale(0.7);
        transition:
            opacity 0.5s ease-out,
            transform 0.95s cubic-bezier(0.34, 1.6, 0.64, 1);
    }
    .zero-callout.cin-in .zero,
    .big-ten.cin-in .ten {
        opacity: 1;
        transform: scale(1);
    }

    .big-ten .breakdown .b {
        opacity: 0;
        transform: translateX(-12px);
        transition:
            opacity 0.5s ease-out 0.45s,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
    }
    .big-ten.cin-in .breakdown .b { opacity: 1; transform: translateX(0); }
    .big-ten.cin-in .breakdown .b:nth-child(2) {
        transition-delay: 0.6s;
    }

    /* ---- Card lift on hover (refined existing) -------------- */
    .pillar-card,
    .benefit-card,
    .step,
    .testimonial {
        transition:
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ---- Pillar icons — scale-pop + SVG stroke draw -------- */
    .pillar-card .pillar-icon {
        transform: scale(0.55);
        opacity: 0;
        transition:
            transform 0.65s cubic-bezier(0.34, 1.55, 0.64, 1),
            opacity 0.45s ease-out;
        transition-delay: calc(var(--cin-i, 0) * 90ms + 0.18s);
    }
    [data-reveal-stagger].cin-in > .pillar-card .pillar-icon {
        transform: scale(1);
        opacity: 1;
    }
    .pillar-icon svg path,
    .pillar-icon svg circle {
        stroke-dasharray: 120;
        stroke-dashoffset: 120;
    }
    [data-reveal-stagger].cin-in > .pillar-card .pillar-icon svg path,
    [data-reveal-stagger].cin-in > .pillar-card .pillar-icon svg circle {
        animation: cinDrawStroke 1.05s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: calc(var(--cin-i, 0) * 90ms + 0.42s);
    }

    /* ---- Integration ticks — circle scale + check draw ----- */
    .integration-feature .feature-icon {
        transform: scale(0);
        transition: transform 0.55s cubic-bezier(0.34, 1.55, 0.64, 1);
    }
    .integration-features.cin-in .integration-feature:nth-child(1) .feature-icon { transition-delay: 0.12s; }
    .integration-features.cin-in .integration-feature:nth-child(2) .feature-icon { transition-delay: 0.28s; }
    .integration-features.cin-in .integration-feature:nth-child(3) .feature-icon { transition-delay: 0.44s; }
    .integration-features.cin-in .integration-feature .feature-icon { transform: scale(1); }

    .integration-feature .feature-icon svg polyline {
        stroke-dasharray: 40;
        stroke-dashoffset: 40;
    }
    .integration-features.cin-in .integration-feature:nth-child(1) .feature-icon svg polyline {
        animation: cinDrawStroke 0.5s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 0.45s;
    }
    .integration-features.cin-in .integration-feature:nth-child(2) .feature-icon svg polyline {
        animation: cinDrawStroke 0.5s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 0.61s;
    }
    .integration-features.cin-in .integration-feature:nth-child(3) .feature-icon svg polyline {
        animation: cinDrawStroke 0.5s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 0.77s;
    }

    /* ---- Step numbers — flip-in from below ----------------- */
    .steps-grid .step-number {
        opacity: 0;
        transform: perspective(640px) rotateX(-78deg) translateY(18px);
        transform-origin: center bottom;
        transition:
            opacity 0.5s ease-out,
            transform 0.7s cubic-bezier(0.34, 1.5, 0.64, 1);
    }
    [data-reveal-stagger].cin-in > .step .step-number {
        opacity: 1;
        transform: perspective(640px) rotateX(0deg) translateY(0);
        transition-delay: calc(var(--cin-i, 0) * 90ms + 0.18s);
    }

    @keyframes cinDrawStroke {
        to { stroke-dashoffset: 0; }
    }

    /* ---- Workflow comparison tiles (For Strata Managers) --- */
    .workflow-compare {
        perspective: 1200px;
    }
    .workflow-compare .flow.generic {
        opacity: 0;
        transform: translateX(-44px) rotateY(6deg);
        transform-origin: right center;
        transition:
            opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .workflow-compare .flow.with-us {
        opacity: 0;
        transform: translateX(44px) rotateY(-6deg);
        transform-origin: left center;
        transition:
            opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
            transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
    }
    .workflow-compare.cin-in .flow.generic,
    .workflow-compare.cin-in .flow.with-us {
        opacity: 1;
        transform: translateX(0) rotateY(0);
    }

    /* Flow steps inside each tile — stagger after the tile lands */
    .workflow-compare .flow .flow-step {
        opacity: 0;
        transform: translateX(-12px);
        transition:
            opacity 0.5s ease-out,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .workflow-compare.cin-in .flow .flow-step {
        opacity: 1;
        transform: translateX(0);
    }
    .workflow-compare.cin-in .flow .flow-step:nth-child(4) { transition-delay: 0.55s; }
    .workflow-compare.cin-in .flow .flow-step:nth-child(5) { transition-delay: 0.65s; }
    .workflow-compare.cin-in .flow .flow-step:nth-child(6) { transition-delay: 0.75s; }
    .workflow-compare.cin-in .flow .flow-step:nth-child(7) { transition-delay: 0.85s; }
    .workflow-compare.cin-in .flow .flow-step:nth-child(8) { transition-delay: 0.95s; }

    /* ---- Integration note (StrataPort / platform-agnostic) - */
    .integration-note {
        opacity: 0;
        transform: translateY(22px);
        transition:
            opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .integration-note.cin-in {
        opacity: 1;
        transform: translateY(0);
    }
    .integration-note .icon {
        transform: scale(0.55);
        opacity: 0;
        transition:
            transform 0.65s cubic-bezier(0.34, 1.55, 0.64, 1) 0.2s,
            opacity 0.4s ease-out 0.2s;
    }
    .integration-note.cin-in .icon {
        transform: scale(1);
        opacity: 1;
    }
    .integration-note .icon svg path,
    .integration-note .icon svg polyline,
    .integration-note .icon svg line {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }
    .integration-note.cin-in .icon svg path {
        animation: cinDrawStroke 0.95s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 0.55s;
    }
    .integration-note.cin-in .icon svg polyline {
        animation: cinDrawStroke 0.65s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 1.15s;
    }
    .integration-note.cin-in .icon svg line {
        animation: cinDrawStroke 0.4s cubic-bezier(0.55, 0, 0.15, 1) forwards;
        animation-delay: 1.55s;
    }

    /* ---- Checklist bullet icons (For Owners Corporations) -- */
    .checklist li::before {
        transform: scale(0);
        transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
    }
    .checklist li::after {
        opacity: 0;
        transform: scale(0.4);
        transition:
            opacity 0.3s ease-out,
            transform 0.45s cubic-bezier(0.34, 1.55, 0.64, 1);
    }
    .checklist.cin-in li::before {
        transform: scale(1);
    }
    .checklist.cin-in li::after {
        opacity: 1;
        transform: scale(1);
    }
    .checklist.cin-in li:nth-child(1)::before { transition-delay: 0.05s; }
    .checklist.cin-in li:nth-child(2)::before { transition-delay: 0.15s; }
    .checklist.cin-in li:nth-child(3)::before { transition-delay: 0.25s; }
    .checklist.cin-in li:nth-child(4)::before { transition-delay: 0.35s; }
    .checklist.cin-in li:nth-child(5)::before { transition-delay: 0.45s; }
    .checklist.cin-in li:nth-child(6)::before { transition-delay: 0.55s; }
    .checklist.cin-in li:nth-child(1)::after  { transition-delay: 0.22s; }
    .checklist.cin-in li:nth-child(2)::after  { transition-delay: 0.32s; }
    .checklist.cin-in li:nth-child(3)::after  { transition-delay: 0.42s; }
    .checklist.cin-in li:nth-child(4)::after  { transition-delay: 0.52s; }
    .checklist.cin-in li:nth-child(5)::after  { transition-delay: 0.62s; }
    .checklist.cin-in li:nth-child(6)::after  { transition-delay: 0.72s; }

    /* ---- FAQ accordion smoothing (solutions page) --------- */
    /* Override native <details> snap-open with grid-row easing.
       Browser support: Chrome 117+, Firefox 121+, Safari 17.4+
       Older browsers fall back to native snap behaviour. */
    .faq-item {
        transition:
            border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .faq-item .answer {
        display: grid;
        grid-template-rows: 0fr;
        padding-bottom: 0;
        transition:
            grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1),
            padding-bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .faq-item .answer > * {
        overflow: hidden;
        min-height: 0;
    }
    .faq-item[open] .answer {
        grid-template-rows: 1fr;
        padding-bottom: 1.5rem;
    }

    /* Plus rotates 45deg on open instead of swapping to en-dash */
    .faq-item summary::after {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .faq-item[open] summary::after {
        content: '+';
        transform: rotate(45deg);
    }

    /* ---- About page: 'What we are' column ------------------ */
    /* Items load in one at a time with ticks scaling in. The
       'What we are not' column intentionally has no animation —
       the original static strikethrough was removed at source in
       about.html. */
    .what-we-are .col-are ul li {
        opacity: 0;
        transform: translateX(-14px);
        transition:
            opacity 0.5s ease-out,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .what-we-are .col-are ul li::before {
        transform: scale(0);
        transition: transform 0.45s cubic-bezier(0.34, 1.6, 0.64, 1);
    }
    .what-we-are.cin-in .col-are ul li {
        opacity: 1;
        transform: translateX(0);
    }
    .what-we-are.cin-in .col-are ul li::before {
        transform: scale(1);
    }
    .what-we-are.cin-in .col-are ul li:nth-child(1) { transition-delay: 0.20s; }
    .what-we-are.cin-in .col-are ul li:nth-child(2) { transition-delay: 0.45s; }
    .what-we-are.cin-in .col-are ul li:nth-child(3) { transition-delay: 0.70s; }
    .what-we-are.cin-in .col-are ul li:nth-child(4) { transition-delay: 0.95s; }
    .what-we-are.cin-in .col-are ul li:nth-child(5) { transition-delay: 1.20s; }
    .what-we-are.cin-in .col-are ul li:nth-child(1)::before { transition-delay: 0.35s; }
    .what-we-are.cin-in .col-are ul li:nth-child(2)::before { transition-delay: 0.60s; }
    .what-we-are.cin-in .col-are ul li:nth-child(3)::before { transition-delay: 0.85s; }
    .what-we-are.cin-in .col-are ul li:nth-child(4)::before { transition-delay: 1.10s; }
    .what-we-are.cin-in .col-are ul li:nth-child(5)::before { transition-delay: 1.35s; }

    /* ---- CTA magnetic — JS sets transform on mousemove ------ */
    .btn-primary,
    .nav-cta,
    .page-hero-cta a,
    .hero .btn-secondary {
        transition:
            transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
            background 0.2s,
            box-shadow 0.25s,
            color 0.2s;
    }

    /* ---- Smooth-scroll baseline ----------------------------- */
    html { scroll-behavior: smooth; }
}

/* ============================================================
   About page — defensively strip any strikethrough from the
   'What we are not' column. Lives outside every media query so
   it applies universally, including for users with prefers-
   reduced-motion: reduce. Uses !important to beat any cached
   inline declaration that may still be lingering in older
   copies of about.html on a user's device.
   ============================================================ */
.what-we-are .col-not h3,
.what-we-are .col-not ul li {
    text-decoration: none !important;
    text-decoration-line: none !important;
}
.what-we-are .col-not ul li::after {
    content: none !important;
}

/* ============================================================
   Mobile nav system — robust replacement for the legacy
   body.nav-open::after pseudo-element overlay.

   The previous approach used a pseudo-element overlay, which:
     1. iOS Safari sometimes won't fire click events on
        (pseudo-elements aren't real DOM nodes), and
     2. left the click event target as the bare <body>, making
        outside-tap-to-close handlers fragile.

   This block:
     - Styles a real .nav-overlay <div> that cinematic.js injects
       once per page. Real DOM elements receive clicks reliably.
     - Lifts the header above the overlay so the X stays tappable.
     - Forces the hamburger toggle to be its own stacking context
       at z-index 250 so it always paints above the drawer.
   ============================================================ */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 45, 75, 0.5);
    z-index: 140;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-width: 920px) {
    body.nav-open .nav-overlay {
        display: block;
        opacity: 1;
    }
    /* While the drawer is open, lift the header above the overlay
       so the hamburger / X button stays clickable. */
    body.nav-open header {
        z-index: 200;
    }
    /* Force the toggle to z-index 250 so it always paints above the
       drawer (z-index 150) and overlay (140), regardless of any
       future stacking changes. */
    .nav-toggle {
        z-index: 250;
    }
}

/* Reduced-motion users: ship everything visible, no transforms */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > *,
    .bar-chart .bar,
    .timeline-strip .month,
    .zero-callout .zero,
    .big-ten .ten,
    .big-ten .breakdown .b,
    .hero .hero-eyebrow,
    .hero h1,
    .hero .hero-subheadline,
    .hero .hero-cta-group,
    .hero .trust-strip,
    .page-hero .eyebrow,
    .page-hero h1,
    .page-hero .lede,
    .page-hero .page-hero-cta,
    .pillar-card .pillar-icon,
    .integration-feature .feature-icon,
    .steps-grid .step-number,
    .workflow-compare .flow,
    .workflow-compare .flow .flow-step,
    .integration-note,
    .integration-note .icon,
    .checklist li::before,
    .checklist li::after,
    .what-we-are .col-are ul li,
    .what-we-are .col-are ul li::before {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .pillar-icon svg path,
    .pillar-icon svg circle,
    .integration-feature .feature-icon svg polyline,
    .integration-note .icon svg path,
    .integration-note .icon svg polyline,
    .integration-note .icon svg line {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }
    .faq-item,
    .faq-item .answer,
    .faq-item summary::after {
        transition: none !important;
    }
    html { scroll-behavior: auto; }
}