/*
 * Premium Visual Upgrade v2 — Wasatch Cleaners
 * Date: 2026-06-12
 *
 * Adds depth, motion, and tactile premium signifiers to the existing
 * sage + cream brand without changing identity. Pairs with includes/
 * premium-head.php (font + motion lib loaders) and includes/premium-motion.php
 * (Lenis + GSAP initialization).
 *
 * Source of truth: PREMIUM-VISUAL-UPGRADE-PLAN.md
 */

/* ============================================================
 * 1. DESIGN TOKENS (v2) — 9-step sage + cream + gold accent
 * ============================================================ */
:root {
    /* Brand sage — expanded from 1 to 9 steps */
    --sage-50:  #F4F7F2;
    --sage-100: #E4ECE0;
    --sage-200: #C8D8C0;
    --sage-300: #A4BD98;
    --sage-400: #7E9E70;
    --sage-500: #4F6B4F;  /* current CTA */
    --sage-600: #3F563F;
    --sage-700: #324432;
    --sage-800: #243224;
    --sage-900: #161E16;  /* near-black for editorial heads */

    /* Cream neutrals */
    --cream-50:  #FDFCF9;
    --cream-100: #FBFAF6;  /* current bg */
    --cream-200: #F4F1E8;
    --cream-300: #EAE5D6;
    --cream-400: #D6CFBA;

    /* Warm gold accent — use sparingly (prices, badges, ratings) */
    --gold-400: #C9A267;
    --gold-500: #A8843F;
    --gold-600: #8F6E2F;

    /* Ink for body text */
    --ink:      #1A1816;
    --ink-soft: #3A352E;

    /* Responsive type scale (Utopia.fyi 1.2/1.25 ratio) */
    --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.42rem);
    --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.80rem);
    --step-3:  clamp(1.73rem, 1.57rem + 0.80vw, 2.27rem);
    --step-4:  clamp(2.07rem, 1.85rem + 1.15vw, 2.86rem);
    --step-5:  clamp(2.49rem, 2.17rem + 1.62vw, 3.61rem);
    --step-6:  clamp(2.99rem, 2.55rem + 2.24vw, 4.55rem);
    --step-display: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
}

/* ============================================================
 * 2. TYPOGRAPHY — Cormorant Garamond display + Inter body
 * ============================================================ */
.font-display,
.editorial-h {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    font-weight: 500;
    color: var(--sage-900);
    letter-spacing: -0.01em;
    line-height: 1.02;
}
.editorial-h--xl { font-size: var(--step-display); }
.editorial-h--lg { font-size: var(--step-6); }
.editorial-h--md { font-size: var(--step-5); }
.editorial-h--sm { font-size: var(--step-4); }

.eyebrow {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ============================================================
 * 3. FROSTED GLASS NAV ON SCROLL
 * ============================================================ */
.nav-glass[data-scrolled="true"] {
    background: rgba(251, 250, 246, 0.78) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(22, 30, 22, 0.06);
    box-shadow: 0 10px 30px -20px rgba(22, 30, 22, 0.18);
}
@supports not (backdrop-filter: blur(1px)) {
    .nav-glass[data-scrolled="true"] { background: rgba(251, 250, 246, 0.96) !important; }
}

/* ============================================================
 * 4. KEN BURNS HERO (slow pan)
 * ============================================================ */
@keyframes kenBurns {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}
.hero-kenburns {
    animation: kenBurns 30s ease-in-out infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .hero-kenburns { animation: none; }
}

/* ============================================================
 * 5. GLASS-MORPHISM CARDS
 * ============================================================ */
.glass-tile {
    background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.42));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    padding: 28px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 30px 60px -30px rgba(22, 30, 22, 0.25);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s;
}
.glass-tile:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 40px 80px -30px rgba(22, 30, 22, 0.35);
}
.mesh-bg {
    background:
        radial-gradient(60% 50% at 20% 10%, rgba(168, 132, 63, 0.10), transparent 60%),
        radial-gradient(50% 40% at 90% 80%, rgba(79, 107, 79, 0.18), transparent 60%),
        var(--cream-100);
}
@supports not (backdrop-filter: blur(1px)) {
    .glass-tile { background: rgba(255,255,255,0.94); }
}

/* ============================================================
 * 6. TRUST MARQUEE STRIP
 * ============================================================ */
.trust-marquee {
    overflow: hidden;
    background: var(--sage-900);
    color: var(--cream-100);
    padding: 14px 0;
    border-block: 1px solid rgba(255,255,255,0.06);
}
.trust-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 56px;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    will-change: transform;
}
.trust-marquee__item {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.78;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.trust-marquee__item::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-400);
    opacity: 0.6;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .trust-marquee__track { animation: none; }
}

/* ============================================================
 * 7. SCROLL REVEAL (CSS-only via animation-timeline)
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up {
        animation: revealUp linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    @keyframes revealUp {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ============================================================
 * 8. NAMED GUARANTEE BADGE
 * ============================================================ */
.wc-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--sage-50), var(--cream-100));
    border: 1px solid var(--sage-200);
    box-shadow: 0 10px 25px -15px rgba(22, 30, 22, 0.18);
    max-width: 480px;
}
.wc-guarantee__seal {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--sage-700);
    color: var(--cream-100);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12), 0 0 0 4px var(--cream-100);
}
.wc-guarantee__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--sage-900);
    line-height: 1.15;
}
.wc-guarantee__name sup {
    font-size: 9px;
    vertical-align: super;
    color: var(--gold-500);
    margin-left: 2px;
}
.wc-guarantee__sub {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
    line-height: 1.35;
}

/* ============================================================
 * 9. MAGNETIC CTA helper
 * ============================================================ */
.cta-magnetic {
    transition: box-shadow .3s ease;
    will-change: transform;
}
.cta-magnetic:hover {
    box-shadow: 0 14px 36px -10px rgba(79, 107, 79, 0.45);
}

/* ============================================================
 * 9b. PREMIUM CURSOR -- subtle sage dot follow on .btn-* hover.
 *     Pointer-fine devices only; mobile gets nothing.
 * ============================================================ */
@media (pointer: fine) {
    .wc-cursor {
        position: fixed;
        left: 0; top: 0;
        width: 14px; height: 14px;
        background: rgba(79, 107, 79, 0.62);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate3d(-100px, -100px, 0);
        transition: width .25s cubic-bezier(.16, 1, .3, 1),
                    height .25s cubic-bezier(.16, 1, .3, 1),
                    background .25s ease,
                    opacity .25s ease;
        mix-blend-mode: difference;
        opacity: 0;
    }
    .wc-cursor.is-visible { opacity: 1; }
    .wc-cursor.is-hovering {
        width: 52px; height: 52px;
        background: rgba(201, 162, 39, 0.85);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wc-cursor { display: none; }
}

/* ============================================================
 * 10. SVG LINE-ART ICON UTILITY
 * ============================================================ */
.wc-icon {
    width: 28px;
    height: 28px;
    color: var(--sage-700);
    display: inline-block;
    vertical-align: middle;
}
.wc-icon--lg { width: 40px; height: 40px; }
.wc-icon--xl { width: 56px; height: 56px; }
.wc-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--sage-50);
    border: 1px solid var(--sage-100);
    box-shadow: 0 8px 24px -12px rgba(22, 30, 22, 0.18);
}
.wc-icon-circle .wc-icon { color: var(--sage-600); }

/* ============================================================
 * 11. GLASS GRID (drop-in for service tile grids)
 * ============================================================ */
.glass-grid {
    background:
        radial-gradient(60% 50% at 20% 10%, rgba(168, 132, 63, 0.10), transparent 60%),
        radial-gradient(50% 40% at 90% 80%, rgba(79, 107, 79, 0.18), transparent 60%),
        var(--cream-100);
    border-radius: 28px;
    padding: 28px;
}
.glass-grid .glass-tile {
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
}

/* ============================================================
 * 12. PAPER-GRAIN OVERLAY (warmth)
 * ============================================================ */
.paper-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.05'/></svg>");
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.5;
    z-index: 0;
}