/* ================================================================
   ANIMATIONS & REVEALS
   ================================================================ */

.reveal-on-scroll {
    --reveal-delay: 0ms;
    --reveal-distance: 40px;
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity var(--duration-medium) var(--ease-smooth) var(--reveal-delay),
        transform var(--duration-slow) var(--ease-smooth) var(--reveal-delay),
        filter var(--duration-slow) var(--ease-smooth) var(--reveal-delay);
    will-change: transform, opacity, filter;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Staggered delays for children inside grids */
.stagger-reveal > .reveal-on-scroll:nth-child(1) { --reveal-delay: 0ms; }
.stagger-reveal > .reveal-on-scroll:nth-child(2) { --reveal-delay: 100ms; }
.stagger-reveal > .reveal-on-scroll:nth-child(3) { --reveal-delay: 200ms; }
.stagger-reveal > .reveal-on-scroll:nth-child(4) { --reveal-delay: 300ms; }
.stagger-reveal > .reveal-on-scroll:nth-child(5) { --reveal-delay: 400ms; }
.stagger-reveal > .reveal-on-scroll:nth-child(6) { --reveal-delay: 500ms; }

.section-head.reveal-on-scroll,
.hero-content.reveal-on-scroll,
.cleo-text.reveal-on-scroll,
.pull-quote.reveal-on-scroll,
.cta-inner.reveal-on-scroll {
    --reveal-distance: 30px;
}

.bento-card.reveal-on-scroll,
.why-card.reveal-on-scroll,
.company-card.reveal-on-scroll {
    --reveal-distance: 24px;
}

/* 3D tilt glow effect (set by JS) */
[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

.scramble-char {
    color: var(--amber);
    font-family: var(--font-mono);
    opacity: 0.6;
}

/* ================================================================
   RESPONSIVE — TABLET
   ================================================================ */

@media (max-width: 980px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-content { align-items: center; }
    .hero h1 { max-width: 18ch; }

    .hv-card-fax { transform: rotate(-1deg); }
    .hv-card-result { transform: rotate(1deg); }

    .cleo-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .cleo-text { align-items: center; text-align: center; }
    .pills { justify-content: center; }

    .agent-layout {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .agent-text {
        align-items: center;
        text-align: center;
    }

    .agent-tags {
        justify-content: center;
    }

    .agent-live {
        margin-left: auto;
        margin-right: auto;
    }

    .agent-visual {
        width: min(100%, 760px);
        margin: 0 auto;
    }

    .agent-canvas {
        min-height: 620px;
    }

    .agent-canvas-studio {
        min-height: 0;
        padding: 0.92rem 0.92rem 3.35rem;
    }

    .agent-topbar {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .agent-run-pill, .agent-elapsed {
        justify-self: start;
    }

    .agent-studio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
    }

    .agent-lane-intake,
    .agent-lane-evidence {
        min-height: 310px;
    }

    .agent-lane-output {
        grid-column: 1 / -1;
        min-height: 250px;
    }

    .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-tall { grid-row: span 1; }
    .bento-tall strong { font-size: 2.5rem; }
    .bento-wide { grid-column: span 2; }

    .why-grid, .company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-card:last-child, .company-card:last-child {
        grid-column: 1 / -1;
    }

    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-panel:last-child { grid-column: 1 / -1; }

    .fax-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .fax-text { align-items: center; text-align: center; }
    .fax-dots { justify-content: center; }
    .fax-cta { align-self: center; }
    .fax-pipeline { width: min(100%, 480px); margin: 0 auto; }
}

/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */

@media (max-width: 768px) {
    .container { width: min(1200px, calc(100% - 2rem)); }

    header { width: calc(100% - 1.2rem); top: 10px; }
    nav { min-height: 56px; padding: 0 0.8rem 0 1rem; }

    .hamburger { display: block; z-index: 200; }

    .nav-links {
        position: fixed; inset: 0; z-index: 180;
        background: rgba(250, 247, 242, 0.96);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        transform: translateY(-102%); transition: transform 0.36s var(--ease);
        flex-direction: column; justify-content: center; gap: 0.5rem;
    }

    .nav-links.active { transform: translateY(0); }

    .nav-links a {
        font-size: 1.15rem; letter-spacing: 0.04em;
        font-family: var(--font-sans); text-transform: none;
        padding: 0.65rem 1.2rem;
        opacity: 0; transform: translateY(-10px);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .nav-links.active a { opacity: 1; transform: translateY(0); }
    .nav-links.active a:nth-child(1) { transition-delay: 0.04s; }
    .nav-links.active a:nth-child(2) { transition-delay: 0.09s; }
    .nav-links.active a:nth-child(3) { transition-delay: 0.14s; }
    .nav-links.active a:nth-child(4) { transition-delay: 0.18s; }
    .nav-links.active a:nth-child(5) { transition-delay: 0.22s; }
    .nav-links.active a:nth-child(6) { transition-delay: 0.26s; }

    .nav-cta { margin-left: 0; }

    .hero { padding: 130px 0 60px; min-height: auto; }
    .hero-sub { font-size: 1rem; }
    .hero-actions { justify-content: center; }

    .hv-card { width: 210px; }
    .hv-card-fax, .hv-card-result { transform: none; }

    .sparkle, .deco-arc { display: none; }

    .section-head--left { align-items: center; text-align: center; }
    .section-head--left ~ .section-actions { justify-content: center; }

    .bento-grid, .why-grid, .company-grid { grid-template-columns: 1fr; }
    .bento-wide { grid-column: auto; }

    .fax-scroll-track { height: auto; }
    .fax-scroll-frame { position: relative; height: auto; padding: clamp(5rem, 10vw, 8rem) 0; }
    .fax-layout { grid-template-columns: 1fr; gap: 2rem; }
    .fax-text { align-items: center; text-align: center; }
    .fax-dots { display: none; }
    .fax-cta { align-self: center; }
    .fax-pipeline {
        width: 100%;
        padding-left: 24px;
    }
    .fax-pipe-track { left: 11px; }
    .fax-stage { gap: 0.65rem; }
    .fax-stage-node { width: 24px; height: 24px; }
    .fax-stage-node svg { width: 11px; height: 11px; }
    .fax-stage-card { padding: 0.65rem 0.85rem; }
    .fax-stage-label { font-size: 0.82rem; }
    .fax-stage-detail { font-size: 0.78rem; }
    .fax-stage-meta { font-size: 0.68rem; }

    .agent-canvas {
        min-height: 0;
        display: grid;
        gap: 0.75rem;
        padding: 0.95rem;
    }

    .agent-grid, .agent-links { display: none; }

    .agent-canvas-live {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: none;
        min-height: 0;
        font-size: 0.48rem;
    }

    .agent-node,
    .agent-core,
    .agent-dossier,
    .agent-phase-track {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .agent-node,
    .agent-dossier {
        border-radius: 14px;
        box-shadow: 0 12px 22px rgba(12, 9, 7, 0.22);
    }

    .agent-core {
        height: 86px;
        border-radius: 16px;
        border-color: rgba(212, 146, 10, 0.36);
        box-shadow: 0 0 0 8px rgba(212, 146, 10, 0.09);
    }

    .agent-core-ring-one { inset: 19px; }
    .agent-core-ring-two { inset: 30px; }
    .agent-core-label {
        position: static;
        margin-top: 0.45rem;
    }

    .agent-core-thinking {
        position: static;
        transform: none;
        min-width: 0;
        max-width: none;
        margin-top: 0.38rem;
    }

    .agent-node-fax::after { display: none; }

    .agent-phase-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
        border: none;
        background: transparent;
    }

    .agent-phase-track::before,
    .agent-phase-track::after {
        display: none;
    }

    .agent-phase-item {
        min-height: 32px;
        border-color: rgba(250, 247, 242, 0.26);
        background: rgba(250, 247, 242, 0.08);
    }

    .agent-studio-grid {
        grid-template-columns: 1fr;
        gap: 0.56rem;
    }

    .agent-lane {
        min-height: 0;
        padding: 0.72rem;
    }

    .agent-lane-title {
        font-size: 0.56rem;
    }

    .agent-lane-meta {
        font-size: 0.48rem;
    }

    .agent-feed-item {
        font-size: 0.72rem;
    }

    .agent-criteria-matrix span {
        font-size: 0.82rem;
    }

    .agent-criteria-matrix strong {
        font-size: 0.6rem;
    }

    .agent-thinking-card {
        font-size: 0.8rem;
        min-height: 90px;
    }

    .agent-lane-output .agent-draft-metrics {
        font-size: 0.76rem;
    }

    .section-actions, .hero-actions, .cta-actions {
        flex-direction: column; width: 100%; align-items: center;
    }

    .section-actions .btn, .hero-actions .btn, .cta-actions .btn {
        width: min(300px, 100%);
    }

    .dash { min-height: 240px; }
    .dash-side { width: 68px; padding: 0.4rem 0.25rem; }
    .dash-item { font-size: 0.42rem; padding: 0.15rem; }
    .dash-main { padding: 0.85rem; }
    .dash-detail { font-size: 0.56rem; }
    .dash-chip { font-size: 0.48rem; padding: 0.12rem 0.35rem; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-panel:last-child { grid-column: auto; }
    .dash-tag { display: none; }

    .pull-quote blockquote { font-size: clamp(1.5rem, 5vw, 2rem); }

    .footer-row { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
}

@media (max-width: 640px) {
    :root {
        --fs-hero: clamp(2.4rem, 8vw + 0.5rem, 3.2rem);
        --fs-h2: clamp(1.7rem, 5vw + 0.4rem, 2.3rem);
    }

    .section { padding: 3.5rem 0; }
    .hero { padding-top: 115px; }
    .hv-card { width: 190px; padding: 1rem; }
    .hv-ai-orb { width: 54px; height: 54px; }

    .agent-live-phase { font-size: 0.92rem; }
    .agent-live-detail { font-size: 0.8rem; }
    .agent-canvas-studio .agent-canvas-live { font-size: 0.72rem; }
    .agent-phase-item { font-size: 0.48rem; }

    .agent-feed-item { font-size: 0.68rem; }
    .agent-criteria-matrix span { font-size: 0.74rem; }
    .agent-lane-output .agent-draft-metrics { font-size: 0.7rem; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body.reduce-motion .reveal-on-scroll {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}