/*
 * auto-modern.css — ref.digital-inspired restage of the AI Automation page.
 * Scoped under `body.page-auto` so the rest of the site is untouched, and
 * loaded AFTER automatisation.css so these rules win.
 *
 * Brings: a modern tight grotesque (Inter Tight), big/tight/light display
 * headings vs tiny uppercase labels, large per-section index numbers, more
 * whitespace (one idea per screen), a calmer reveal, and less visual clutter
 * (drops the connector-line decoration). Smooth Lenis scroll is wired in
 * js/auto-modern.js.
 */

/* ---- Light-mode contrast fix for the CTA ----
   Its card backing is `--cine-glass-soft` (≈4% white = invisible) and the
   text uses the near-white cine tokens, so in light mode it was white-on-pale.
   Give the card a real frosted-white panel + dark text. */
[data-theme="light"] .page-auto .auto-cta-card {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(20, 24, 40, 0.10);
    box-shadow: 0 24px 60px -28px rgba(20, 24, 40, 0.28);
}
[data-theme="light"] .page-auto .auto-cta-card h2 { color: #181d2b; }
[data-theme="light"] .page-auto .auto-cta-card p  { color: #3b4252; }

/* ---- Glassy matrix background (js/auto-matrix.js) ----
   Fixed digital-rain layer in front of the video + node background
   (z -20/-10) but behind content; fades in on scroll. The glass content
   cards frost it via their backdrop-blur. */
.auto-matrix-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -5;
    opacity: 0;
    pointer-events: none;
    background: #06070c;
    will-change: opacity;
}

/* ---- Modern type for the page CONTENT only ----
   Scoped to .main so the shared header + footer keep the site-default font
   and stay identical to index.html / every other page. */
.page-auto .main,
.page-auto .main p,
.page-auto .main a,
.page-auto .main button,
.page-auto .main li,
.page-auto .main span {
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Display headings: big, tight, light ---- */
.page-auto .auto-hero-content h1 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
}
.page-auto .auto-product-content h2,
.page-auto .auto-cta-card h2,
.page-auto .consulting-intro-content h2 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
}
.page-auto .auto-hero-content > p,
.page-auto .auto-product-content p {
    font-weight: 300;
    letter-spacing: -0.01em;
}

/* ---- Tiny uppercase labels (the ref.digital rhythm) ---- */
.page-auto .auto-eyebrow,
.page-auto .auto-prod-tag,
.page-auto .auto-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
}
.page-auto .auto-tab span {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    font-size: 0.72rem;
}

/* ---- Large per-section index numbers (01, 02, …) ---- */
.page-auto .auto-products-container { counter-reset: prod; }
.page-auto .auto-product-section { counter-increment: prod; }
.page-auto .auto-product-content::before {
    content: counter(prod, decimal-leading-zero);
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--first-color, #e23744);
    opacity: 0.5;
    margin-bottom: 0.6rem;
}

/* ---- Whitespace comes from centring content in a full-screen section
   (no big padding-block — that pushed sections taller than the viewport and
   broke snapping). ---- */

/* ---- Declutter: drop the connector-line/dot decoration ---- */
.page-auto .pointer-line-container { display: none; }

/* ---- Calmer ref-style reveal easing (power2.out feel) ---- */
.page-auto .auto-product-content {
    transition: opacity 0.7s cubic-bezier(.32, .94, .6, 1),
                transform 0.7s cubic-bezier(.32, .94, .6, 1);
}

/* Stagger the feature rows in slightly as the section reveals. */
.page-auto .auto-product-section.active .auto-feature-list li {
    animation: auto-feat-in 0.6s cubic-bezier(.32, .94, .6, 1) both;
}
.page-auto .auto-product-section.active .auto-feature-list li:nth-child(1) { animation-delay: 0.10s; }
.page-auto .auto-product-section.active .auto-feature-list li:nth-child(2) { animation-delay: 0.18s; }
.page-auto .auto-product-section.active .auto-feature-list li:nth-child(3) { animation-delay: 0.26s; }
.page-auto .auto-product-section.active .auto-feature-list li:nth-child(4) { animation-delay: 0.34s; }
@keyframes auto-feat-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Fly in from the sides → snap/stop at each section → fly out.
   ============================================================ */

/* Scroll LOCKS onto each section and holds, then moves to the next — a
   discrete, non-continuous feel. `mandatory` + `scroll-snap-stop: always`
   force a stop at every section; `align: start` (not center) means a
   section taller than the viewport scrolls THROUGH instead of trapping. */
html:has(.page-auto) {
    scroll-snap-type: y mandatory;
}
.page-auto .auto-hero { scroll-snap-align: center; }
.page-auto .auto-product-section {
    align-items: center;
    min-height: 78vh;              /* denser: ~78% screen per section; content centred */
    scroll-snap-align: center;     /* centre fits exactly, no header-offset cut */
}
.page-auto .auto-cta-section { scroll-snap-align: center; }
/* Belt-and-braces: js/auto-snap.js drops snapping on any section that is
   genuinely taller than the viewport so the wider ones scroll freely. */
.page-auto .auto-product-section.pf-tall { scroll-snap-align: none; scroll-snap-stop: normal; }

/* Text + visual start off to their own side, faded + softly blurred (the
   blur→sharp gives cinematic depth on reveal). */
.page-auto .auto-product-content,
.page-auto .auto-product-visual {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.65s cubic-bezier(.22, 1, .36, 1),
                transform 0.65s cubic-bezier(.22, 1, .36, 1),
                filter 0.65s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity, filter;
}
.page-auto .right-align .auto-product-content { transform: translateX(-80px); }
.page-auto .right-align .auto-product-visual  { transform: translateX(80px);  }
.page-auto .left-align  .auto-product-content { transform: translateX(80px);  }
.page-auto .left-align  .auto-product-visual  { transform: translateX(-80px); }

/* Per-section reveal VARIETY (data-anim set in automatisation.js). 'slide'
   keeps the left/right fly-in above; the others override the off-state so each
   section animates in differently. Must follow the slide rules (equal
   specificity → source order wins). */
.page-auto [data-anim="zoom"] .auto-product-content,
.page-auto [data-anim="zoom"] .auto-product-visual { transform: scale(.85); filter: blur(12px); }
.page-auto [data-anim="clip"] .auto-product-content,
.page-auto [data-anim="clip"] .auto-product-visual { transform: translateY(72px); filter: blur(7px); }
.page-auto [data-anim="tilt"] .auto-product-content,
.page-auto [data-anim="tilt"] .auto-product-visual { transform: perspective(1000px) rotateX(16deg) translateY(52px); transform-origin: top center; }

/* In view (.active from the IntersectionObserver) → converge to centre;
   scrolling away slides/zooms/tilts them back out. */
.page-auto .auto-product-section.active .auto-product-content,
.page-auto .auto-product-section.active .auto-product-visual {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.page-auto [data-anim].auto-product-section.active .auto-product-content,
.page-auto [data-anim].auto-product-section.active .auto-product-visual {
    transform: none;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .page-auto .auto-product-content,
    .page-auto .auto-product-visual,
    .page-auto .auto-feature-list li { transition: none; animation: none; }
    .page-auto .auto-product-content,
    .page-auto .auto-product-visual { opacity: 1 !important; transform: none !important; filter: none !important; }
    html:has(.page-auto) { scroll-snap-type: none; }
}

@media (max-width: 968px) {
    .page-auto .auto-product-section {
        min-height: auto;
        scroll-snap-align: none;
    }
}

/* ===== LIGHT MODE — automation page content cards (2026-06-23) =====
   The page is authored dark-first (cine tokens: white text on near-invisible
   glass). Only the CTA card had a light fix, so the product / consulting /
   credential cards + stats + subtitles rendered white-on-pale (grey boxes,
   unreadable). Frost them white with dark text in light mode. The OpenClaw
   terminal (.ocv-*) and media visuals stay dark on purpose. */
[data-theme="light"] .page-auto .auto-product-content,
[data-theme="light"] .page-auto .consulting-intro-content,
[data-theme="light"] .page-auto .credential-card,
[data-theme="light"] .page-auto .auto-hero-stats,
[data-theme="light"] .page-auto .auto-stat,
[data-theme="light"] .page-auto .visual-placeholder {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(20, 24, 40, 0.10);
    box-shadow: 0 24px 60px -30px rgba(20, 24, 40, 0.22);
}
[data-theme="light"] .page-auto .auto-product-content h2,
[data-theme="light"] .page-auto .consulting-intro-content h2,
[data-theme="light"] .page-auto .credential-card h3,
[data-theme="light"] .page-auto .section-title,
[data-theme="light"] .page-auto .section-subtitle {
    color: #181d2b;
}
[data-theme="light"] .page-auto .auto-product-content p,
[data-theme="light"] .page-auto .auto-feature-list li,
[data-theme="light"] .page-auto .consulting-intro-text,
[data-theme="light"] .page-auto .credential-desc,
[data-theme="light"] .page-auto .auto-stat-label {
    color: #3b4252;
}

/* hero tab bar: inactive tabs were white-on-light (invisible). Frost the
   pills white with dark text; active tab keeps the red accent border/icon. */
[data-theme="light"] .page-auto .auto-tab {
    color: #3b4252;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(20, 24, 40, 0.10);
}
[data-theme="light"] .page-auto .auto-tab:hover {
    color: #181d2b;
    background: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .page-auto .auto-tab.active {
    color: #181d2b;
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--first-color);
}