/**
 * sas-imperial.css — V47.12 Single source of truth
 * Liveweb-SAS Connector visual layer
 *
 * Design principles:
 *   • CWV-safe: animations use transform/opacity ONLY (GPU-accelerated, no layout/paint)
 *   • Theme-independent: uses .sas-* selectors, no theme classes
 *   • Below-fold sections use content-visibility:auto for INP win
 *   • prefers-reduced-motion respected throughout
 *   • Single file → 1 HTTP request, gzip-friendly (lots of repeated patterns)
 *   • Vibrant palettes via CSS variables → can be overridden per-page by Style Engine
 *
 * Sections in this file:
 *   1. Root tokens (palettes, easings, shadows)
 *   2. Direct Answer card (AI Overview citation magnet)
 *   3. Archetype block (12 city archetypes)
 *   4. Imperial Polish (cards, buttons, focus, animations)
 *   5. Section dividers + decorative accents
 *   6. Stat chips + trust signals
 *   7. Cleanup overrides (V44 redundancy)
 *   8. Print stylesheet
 *   9. Reduced-motion overrides
 */

/* ═══════════════════════════════════════════════════════════
   1. ROOT TOKENS — V47.17 single source of truth
   ───────────────────────────────────────────────────────────
   ALL brand colors come from theme options (theme-options.php)
   via dynamic-styles.php which writes :root in wp_head priority 5.
   Plugin tokens reference theme tokens with safe fallbacks so the
   plugin still renders if the theme isn't active.
   ═══════════════════════════════════════════════════════════ */
:where(:root) {
    /* Brand gradient — pulls from theme. Defaults stay benign emerald
       so plugin works standalone but THEME OVERRIDES via :root above. */
    --sas-grad-primary:
        linear-gradient(135deg, var(--sas-main, #0f766e) 0%, var(--sas-sec, #14b8a6) 100%);
    --sas-grad-warm:
        linear-gradient(135deg, var(--sas-gold, #f59e0b) 0%, #ef4444 100%);
    --sas-grad-cool:
        linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    --sas-grad-aurora:
        linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);
    --sas-grad-glass:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.78));

    --sas-accent-1:       var(--sas-main, #0f766e);
    --sas-accent-2:       var(--sas-sec,  #14b8a6);
    --sas-text-on-accent: #fff;
    --sas-text:           var(--sas-text, #0f172a);
    --sas-text-soft:      var(--sas-muted, #475569);
    --sas-bg-subtle:      var(--sas-lighter, #f8fafc);

    /* Brand-tinted glow shadow — uses theme RGB triplet */
    --sas-shadow-glow: 0 8px 24px rgba(var(--sas-main-rgb, 15,118,110), .18);

    /* CWV-safe animation timings (theme-independent) */
    --sas-ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --sas-ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
    --sas-ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
    --sas-dur-fast:       180ms;
    --sas-dur-normal:     280ms;
    --sas-dur-slow:       450ms;

    /* Shadow scale (theme-independent — neutral blacks) */
    --sas-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.04);
    --sas-shadow-2: 0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.06);
    --sas-shadow-3: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.08);

    /* Radii — pull from theme if set */
    --sas-radius-sm:  var(--sas-radius-sm, 10px);
    --sas-radius:     var(--sas-radius,    14px);
    --sas-radius-lg:  var(--sas-radius-lg, 22px);
    --sas-radius-pill: var(--sas-radius-pill, 50px);
}

/* ═══════════════════════════════════════════════════════════
   2. DIRECT ANSWER (AI Overview citation magnet)
   ═══════════════════════════════════════════════════════════ */
.sas-direct-answer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /* V47.19: stronger tinting — saturated background that reads as branded */
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--sas-main, #0f766e) 22%, #fff) 0%,
            color-mix(in oklch, var(--sas-main, #0f766e) 32%, #fff) 55%,
            color-mix(in oklch, var(--sas-sec,  #14b8a6) 40%, #fff) 100%);
    border: 1.5px solid color-mix(in oklch, var(--sas-main, #0f766e) 38%, transparent);
    border-inline-start: 6px solid var(--sas-accent-1);
    border-radius: var(--sas-radius);
    padding: 1.4rem 1.6rem;
    margin: 1.5rem 0 2rem;
    /* Layered shadow with brand tint for premium depth */
    box-shadow:
        0 4px 12px rgba(var(--sas-main-rgb, 15,118,110), .12),
        0 12px 32px rgba(var(--sas-main-rgb, 15,118,110), .18),
        inset 0 1px 0 rgba(255,255,255,.6);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
    /* Crisp dark text for accessibility */
    color: color-mix(in oklch, var(--sas-main, #0f766e) 88%, #000);
}
.sas-direct-answer::after {
    content: "";
    position: absolute;
    inset-inline-start: -40px;
    top: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--sas-main-rgb, 15,118,110),.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.sas-direct-answer > * { position: relative; z-index: 1; }
.sas-da-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: var(--sas-grad-primary);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: var(--sas-shadow-glow);
    animation: sas-pop var(--sas-dur-slow) var(--sas-ease-spring) backwards;
}
.sas-da-body { flex: 1; min-width: 0; }
.sas-da-text {
    font-size: 1.06rem;
    line-height: 1.85;
    /* V47.17: brand-derived dark text (auto-contrasts) */
    color: color-mix(in oklch, var(--sas-main, #064e3b) 75%, #000);
    margin: 0 0 0.85rem;
    font-weight: 700;
    text-wrap: balance;
}
.sas-da-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sas-da-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* V47.19: opaque white pill with brand-tinted shadow — pops against bg */
    background: #fff;
    padding: 0.55rem 1rem;
    border-radius: var(--sas-radius-pill);
    border: 1.5px solid color-mix(in oklch, var(--sas-main, #0f766e) 25%, transparent);
    font-size: 0.88rem;
    font-weight: 700;
    color: color-mix(in oklch, var(--sas-main, #0f766e) 80%, #000);
    box-shadow:
        0 2px 6px rgba(var(--sas-main-rgb, 15,118,110), .12),
        0 6px 14px rgba(0,0,0,.04);
    transition: transform var(--sas-dur-fast) var(--sas-ease-spring),
                box-shadow var(--sas-dur-normal) var(--sas-ease-out),
                border-color var(--sas-dur-normal) var(--sas-ease-out);
    will-change: transform;
}
.sas-da-stat:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 6px 14px rgba(var(--sas-main-rgb, 15,118,110), .25),
        0 14px 28px rgba(0,0,0,.08);
    border-color: var(--sas-accent-1);
}
.sas-da-stat strong { color: var(--sas-accent-1); font-weight: 800; }
.sas-da-stat small { color: var(--sas-text-soft); font-size: 0.78rem; }
.sas-da-stat       { color: color-mix(in oklch, var(--sas-main, #064e3b) 75%, #000); }
.sas-da-icon-mini { font-size: 0.95rem; line-height: 1; }

/* ═══════════════════════════════════════════════════════════
   3. ARCHETYPE BLOCK (city personality)
   ═══════════════════════════════════════════════════════════ */
.sas-archetype {
    margin: 2.5rem 0;
    padding: 2rem;
    border-radius: var(--sas-radius);
    background: var(--sas-grad-glass);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--sas-shadow-2);
    position: relative;
    overflow: hidden;
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}
.sas-archetype::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--sas-accent-1), var(--sas-accent-2));
    border-radius: var(--sas-radius) 0 0 var(--sas-radius);
}
.sas-archetype__heading {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 800;
    margin: 0 0 .5rem 0;
    color: var(--sas-text);
    line-height: 1.3;
    text-wrap: balance;
}
.sas-archetype__tagline {
    font-size: 1rem;
    color: var(--sas-accent-1);
    margin: 0 0 1rem 0;
    font-weight: 700;
}
.sas-archetype__intro {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--sas-text-soft);
    margin: 0 0 1.25rem 0;
    text-wrap: pretty;
}
.sas-archetype__usp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.65rem;
}
.sas-archetype__usp li {
    background: #fff;
    padding: 0.85rem 1rem 0.85rem 2.4rem;
    border-radius: var(--sas-radius-sm);
    border: 1px solid rgba(0,0,0,.05);
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sas-text-soft);
    transition: transform var(--sas-dur-fast) var(--sas-ease-out),
                box-shadow var(--sas-dur-normal) var(--sas-ease-out);
    will-change: transform;
}
.sas-archetype__usp li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 0.85rem;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--sas-grad-primary);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.sas-archetype__usp li:hover {
    transform: translateY(-2px);
    box-shadow: var(--sas-shadow-2);
}

/* ═══════════════════════════════════════════════════════════
   4. IMPERIAL POLISH (cards, buttons, focus, anim)
   ═══════════════════════════════════════════════════════════ */
.sas-block,
.sas-package,
.sas-price-card,
.sas-area-detail-card {
    transition: transform var(--sas-dur-normal) var(--sas-ease-smooth),
                box-shadow var(--sas-dur-normal) var(--sas-ease-smooth);
    will-change: transform;
}
.sas-package:hover,
.sas-price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sas-shadow-3);
}
.sas-area-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sas-shadow-2);
}

/* Buttons — refined 3-tier (default / hover / active) */
.sas-btn,
.sas-cta-btn,
.sas-btn-package {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    background: var(--sas-grad-primary);
    color: #fff;
    border-radius: var(--sas-radius-pill);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(5,150,105,.25);
    transition: transform var(--sas-dur-fast) var(--sas-ease-out),
                box-shadow var(--sas-dur-normal) var(--sas-ease-out),
                filter var(--sas-dur-fast) var(--sas-ease-out);
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.sas-btn:hover,
.sas-cta-btn:hover,
.sas-btn-package:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(5,150,105,.35);
    filter: brightness(1.05);
}
.sas-btn:active,
.sas-cta-btn:active,
.sas-btn-package:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.95);
}

/* Button shimmer — pure CSS, no JS, GPU-only */
.sas-btn::before,
.sas-cta-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left 600ms var(--sas-ease-out);
    pointer-events: none;
}
.sas-btn:hover::before,
.sas-cta-btn:hover::before {
    left: 100%;
}

/* Focus visible — WCAG 2.2 AA */
.sas-block :focus-visible,
.sas-direct-answer :focus-visible,
.sas-archetype :focus-visible,
a.sas-btn:focus-visible,
.sas-cta-btn:focus-visible {
    outline: 3px solid var(--sas-accent-1);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 6px rgba(5,150,105,.18);
}

/* Image hover — subtle zoom (transform only, GPU) */
.sas-figure-hero img,
figure.sas-figure img {
    transition: transform var(--sas-dur-slow) var(--sas-ease-smooth);
    will-change: transform;
}
.sas-figure-hero:hover img,
figure.sas-figure:hover img {
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════
   5. SECTION DIVIDERS + DECORATIVE ACCENTS
   ═══════════════════════════════════════════════════════════ */
.sas-section-title {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 18px;
    font-weight: 800;
    line-height: 1.4;
    text-wrap: balance;
}
.sas-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 64px;
    height: 3px;
    background: var(--sas-grad-primary);
    border-radius: 2px;
    transition: width var(--sas-dur-slow) var(--sas-ease-spring);
    will-change: width;
}
.sas-section-title:hover::after {
    width: 100px;
}

/* Reading rhythm */
.sas-block p {
    line-height: 1.95;
    letter-spacing: 0.005em;
    color: var(--sas-text-soft);
    text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
   6. STAT CHIPS + TRUST SIGNALS
   ═══════════════════════════════════════════════════════════ */
.sas-trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    padding: 24px 20px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.02));
    border-radius: var(--sas-radius);
    margin: 24px 0;
    contain: layout style;
}
.sas-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--sas-radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sas-text-soft);
    transition: transform var(--sas-dur-normal) var(--sas-ease-smooth),
                border-color var(--sas-dur-normal) var(--sas-ease-out);
    will-change: transform;
}
.sas-trust-badge:hover {
    transform: translateY(-2px);
    border-color: var(--sas-accent-1);
    box-shadow: var(--sas-shadow-1);
}

/* ═══════════════════════════════════════════════════════════
   7. CLEANUP — hide V44 redundant blocks (theme-independent)
   ═══════════════════════════════════════════════════════════ */
.sas-block.sas-hero .sas-stats-bar {
    display: none !important;
}
.sas-divergence-v9:has(~ .sas-block.sas-faq) .dvg-faqs-section,
.sas-divergence-v9:has(~ .sas-block.sas-pricing_guide) .dvg-pricing-section {
    display: none;
}
.imp-content-body p:empty,
.imperial-wrapper p:empty {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   8. ENTRANCE ANIMATIONS (above-fold only, CWV-safe)
   ═══════════════════════════════════════════════════════════ */
@keyframes sas-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes sas-fade-up {
    0%   { transform: translate3d(0, 14px, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0);    opacity: 1; }
}
.sas-direct-answer,
.sas-archetype {
    animation: sas-fade-up var(--sas-dur-slow) var(--sas-ease-out) backwards;
}
.sas-direct-answer { animation-delay: 50ms; }
.sas-archetype     { animation-delay: 120ms; }

/* ═══════════════════════════════════════════════════════════
   9. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .sas-direct-answer { padding: 1rem 1.15rem; gap: 0.75rem; }
    .sas-da-icon       { width: 38px; height: 38px; font-size: 1.15rem; }
    .sas-da-text       { font-size: 0.96rem; }
    .sas-da-stat       { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
    .sas-archetype     { padding: 1.5rem 1.25rem; margin: 1.75rem 0; }
    .sas-archetype__heading  { font-size: 1.2rem; }
    .sas-archetype__usp      { grid-template-columns: 1fr; }
    .sas-trust-badge   { font-size: 0.82rem; padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════
  10. DARK MODE (auto, respects user preference)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    .sas-direct-answer {
        background: linear-gradient(135deg, rgba(5,150,105,.16), rgba(16,185,129,.08));
        border-color: rgba(5,150,105,.32);
    }
    .sas-da-text       { color: #a7f3d0; }
    .sas-da-stat {
        background: rgba(255,255,255,.06);
        color: #a7f3d0;
        border-color: rgba(255,255,255,.08);
    }
    .sas-archetype {
        background: linear-gradient(135deg, rgba(15,23,42,.6), rgba(30,41,59,.4));
        border-color: rgba(255,255,255,.08);
    }
    .sas-archetype__usp li {
        background: rgba(15,23,42,.5);
        border-color: rgba(255,255,255,.06);
        color: #cbd5e1;
    }
    .sas-trust-badge {
        background: rgba(255,255,255,.05);
        color: #cbd5e1;
        border-color: rgba(255,255,255,.08);
    }
}

/* ═══════════════════════════════════════════════════════════
  11. PRINT (clean B&W)
   ═══════════════════════════════════════════════════════════ */
@media print {
    .sas-direct-answer,
    .sas-archetype,
    .sas-trust-signals { box-shadow: none !important; }
    .sas-block         { page-break-inside: avoid; }
    .sas-da-icon       { background: #000 !important; }
}

/* ═══════════════════════════════════════════════════════════
  12. REDUCED MOTION (a11y)
   ═══════════════════════════════════════════════════════════ */
@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;
    }
    .sas-section-title::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   13. SIGNATURE ANIMATIONS — V47.14 (9 unique GPU-only effects)
   These are designed to feel premium without harming CWV (no layout
   thrash, no paint storms, no JS). Each effect is opt-in via a class.
   ═══════════════════════════════════════════════════════════════════ */

/* ── #1 AURORA DRIFT ─────────────────────────────────────────────
   Multi-color gradient that drifts smoothly behind the element.
   Apply: <div class="sas-anim-aurora">...</div>                     */
.sas-anim-aurora {
    position: relative;
    isolation: isolate;
}
.sas-anim-aurora::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        #f43f5e 0%, #f59e0b 25%, #10b981 50%,
        #3b82f6 75%, #a855f7 100%
    );
    border-radius: inherit;
    z-index: -1;
    filter: blur(18px);
    opacity: 0;
    animation: sas-aurora-spin 14s linear infinite,
               sas-aurora-fade 6s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes sas-aurora-spin { to { transform: rotate(360deg); } }
@keyframes sas-aurora-fade {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.65; }
}

/* ── #2 HOLOGRAPHIC SHIMMER ──────────────────────────────────────
   Iridescent prism wave on hover (think credit card hologram).      */
.sas-anim-holo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.sas-anim-holo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(244, 63, 94, .15) 40%,
        rgba(168, 85, 247, .25) 50%,
        rgba(59, 130, 246, .15) 60%,
        transparent 70%
    );
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 1.2s cubic-bezier(.2, .9, .3, 1);
    will-change: transform;
}
.sas-anim-holo:hover::after { transform: translateX(100%); }

/* ── #3 LIQUID MORPH ─────────────────────────────────────────────
   Organic blob that morphs continuously behind a card.              */
.sas-anim-liquid {
    position: relative;
    isolation: isolate;
}
.sas-anim-liquid::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, .25), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(244, 63, 94, .25), transparent 60%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: sas-liquid-morph 12s ease-in-out infinite;
    z-index: -1;
    filter: blur(8px);
    will-change: border-radius, transform;
}
@keyframes sas-liquid-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
    25%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg); }
    50%      { border-radius: 50% 50% 80% 20% / 25% 80% 20% 80%; transform: rotate(180deg); }
    75%      { border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; transform: rotate(270deg); }
}

/* ── #4 MAGNETIC GLOW ────────────────────────────────────────────
   Radial glow halo that intensifies on hover (replaces JS magnetic). */
.sas-anim-magnet {
    position: relative;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.4);
    will-change: transform;
}
.sas-anim-magnet::before {
    content: "";
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, var(--sas-accent-1, #059669) 0%, transparent 60%);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    transition: opacity .4s ease, transform .4s ease;
    transform: scale(0.85);
    will-change: opacity, transform;
}
.sas-anim-magnet:hover {
    transform: translateY(-4px) scale(1.02);
}
.sas-anim-magnet:hover::before {
    opacity: 0.55;
    transform: scale(1.1);
}

/* ── #5 TILT 3D PARALLAX ─────────────────────────────────────────
   Pure-CSS 3D perspective tilt — no JS pointer tracking needed.     */
.sas-anim-tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.sas-anim-tilt > * {
    transition: transform .5s cubic-bezier(.2, .9, .3, 1);
    will-change: transform;
}
.sas-anim-tilt:hover > * {
    transform: rotateY(6deg) rotateX(-3deg) translateZ(8px);
}
@media (hover: none) {
    .sas-anim-tilt:hover > * { transform: none; }
}

/* ── #6 REVEAL MASK ──────────────────────────────────────────────
   Content reveals through animated diagonal mask on first paint.    */
.sas-anim-reveal {
    animation: sas-reveal-mask 1.1s cubic-bezier(.7, 0, .3, 1) backwards;
    will-change: clip-path;
}
@keyframes sas-reveal-mask {
    0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* ── #7 PARTICLE DUST ────────────────────────────────────────────
   Floating dots orbiting the element — pure CSS via box-shadow.     */
.sas-anim-particles {
    position: relative;
}
.sas-anim-particles::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 1.5px at 12% 18%, rgba(16,185,129,.7), transparent),
        radial-gradient(circle 1.5px at 84% 24%, rgba(244,63,94,.6),  transparent),
        radial-gradient(circle 2px   at 28% 76%, rgba(59,130,246,.6), transparent),
        radial-gradient(circle 1.5px at 72% 64%, rgba(168,85,247,.6), transparent),
        radial-gradient(circle 1px   at 50% 38%, rgba(245,158,11,.7), transparent);
    animation: sas-dust-float 9s linear infinite;
    will-change: transform, opacity;
}
@keyframes sas-dust-float {
    0%   { transform: translate3d(0, 0, 0)   scale(1);   opacity: 0.85; }
    50%  { transform: translate3d(6px, -8px, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(0, 0, 0)   scale(1);   opacity: 0.85; }
}

/* ── #8 GLITCH SLICE ─────────────────────────────────────────────
   RGB-split + slice glitch on hover (cyberpunk feel, brief).        */
.sas-anim-glitch:hover {
    animation: sas-glitch-shake .35s steps(2, end) 1;
    text-shadow:
        2px 0 rgba(244,63,94,.85),
        -2px 0 rgba(59,130,246,.85);
    will-change: transform, text-shadow;
}
@keyframes sas-glitch-shake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-2px, 1px); }
    40%  { transform: translate(2px, -1px); }
    60%  { transform: translate(-1px, 2px); }
    80%  { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}

/* ── #9 CRYSTALLINE PULSE ────────────────────────────────────────
   Concentric geometric rings expand outward — premium ripple.       */
.sas-anim-crystal {
    position: relative;
    isolation: isolate;
}
.sas-anim-crystal::before,
.sas-anim-crystal::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--sas-accent-1, #059669);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    will-change: transform, opacity;
}
.sas-anim-crystal::before {
    animation: sas-crystal-ring 3.6s cubic-bezier(.2, .9, .3, 1) infinite;
}
.sas-anim-crystal::after {
    animation: sas-crystal-ring 3.6s cubic-bezier(.2, .9, .3, 1) infinite;
    animation-delay: 1.2s;
}
@keyframes sas-crystal-ring {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   14. AUTO-APPLIED PRESETS — wire signature animations to elements
   without requiring class additions in PHP. Keeps PHP modules clean.
   ═══════════════════════════════════════════════════════════════════ */
.sas-direct-answer { /* Aurora drift behind Direct Answer */
    isolation: isolate;
    position: relative;
    z-index: 0;
}
.sas-direct-answer::before {
    content: "";
    position: absolute;
    /* V47.19: aurora glow ring around the box — visible but doesn't bleed in */
    inset: -14px;
    border-radius: calc(var(--sas-radius) + 8px);
    background: conic-gradient(
        from 90deg,
        rgba(var(--sas-main-rgb, 15,118,110), .55),
        rgba(var(--sas-sec-rgb,  20,184,166), .50),
        rgba(var(--sas-gold-rgb, 245,158,11), .35),
        rgba(var(--sas-main-rgb, 15,118,110), .55)
    );
    z-index: -1;
    filter: blur(22px);
    opacity: 0.65;
    animation: sas-aurora-spin 18s linear infinite;
    will-change: transform;
    pointer-events: none;
}

.sas-archetype { /* Liquid morph backdrop */
    isolation: isolate;
}
.sas-archetype::after {
    content: "";
    position: absolute;
    inset: 12% 8%;
    background: radial-gradient(ellipse, rgba(5,150,105,.06), transparent 65%);
    border-radius: 50% 40% 30% 70% / 60% 30% 70% 40%;
    z-index: -1;
    animation: sas-liquid-morph 16s ease-in-out infinite;
    pointer-events: none;
    will-change: border-radius, transform;
}

/* Magnetic glow on all CTA buttons */
.sas-btn,
.sas-cta-btn,
.sas-btn-package {
    position: relative;
    isolation: isolate;
}
.sas-btn::after,
.sas-cta-btn::after,
.sas-btn-package::after {
    content: "";
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, currentColor 0%, transparent 60%);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    transition: opacity .4s ease;
    pointer-events: none;
    will-change: opacity;
}
.sas-btn:hover::after,
.sas-cta-btn:hover::after,
.sas-btn-package:hover::after { opacity: .25; }

/* Reveal mask on Direct Answer + Archetype + Trust Signals (above-fold) */
.sas-direct-answer,
.sas-archetype,
.sas-trust-signals {
    animation:
        sas-fade-up var(--sas-dur-slow) var(--sas-ease-out) backwards,
        sas-reveal-mask 1.1s cubic-bezier(.7, 0, .3, 1) backwards;
}

/* Higher specificity to win against theme — covers single-service.php conflict */
body .sas-direct-answer,
body .sas-archetype,
body .sas-trust-signals {
    /* visibility guarantee */
    visibility: visible !important;
    opacity: 1 !important;
}