/* Ultra Timbers v2: soft geometry + motion */

/* ---- Base guards ---- */
html, body { overflow-x: clip; }
img { max-width: 100%; }

/* ---- Motion primitives ---- */
@keyframes ut-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ut-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Scroll reveal: elements start hidden and animate in when .ut-in is added */
.ut-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.ut-reveal.ut-in {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger siblings inside a [data-ut-stagger] container */
.ut-reveal.ut-in:nth-child(2) { transition-delay: 0.08s; }
.ut-reveal.ut-in:nth-child(3) { transition-delay: 0.16s; }
.ut-reveal.ut-in:nth-child(4) { transition-delay: 0.24s; }
.ut-reveal.ut-in:nth-child(5) { transition-delay: 0.32s; }
.ut-reveal.ut-in:nth-child(6) { transition-delay: 0.4s; }

/* Hero entrance */
.ut-hero-in > * {
    opacity: 0;
    animation: ut-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ut-hero-in > *:nth-child(1) { animation-delay: 0.05s; }
.ut-hero-in > *:nth-child(2) { animation-delay: 0.15s; }
.ut-hero-in > *:nth-child(3) { animation-delay: 0.25s; }
.ut-hero-in > *:nth-child(4) { animation-delay: 0.35s; }
.ut-hero-in > *:nth-child(5) { animation-delay: 0.45s; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ut-reveal, .ut-hero-in > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ---- Interaction polish ---- */
.ut-lift {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
/* Touch devices get press feedback instead of hover lift */
.ut-lift:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 60, 0.25);
}
.ut-press {
    transition: transform 0.15s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s;
}
.ut-press:active {
    transform: translateY(1px) scale(0.99);
}

/* Hover effects only where a real pointer exists */
@media (hover: hover) and (pointer: fine) {
    .ut-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 44px -16px rgba(0, 0, 60, 0.28);
    }
    .group:hover .ut-chip {
        transform: scale(1.1);
    }
    .ut-wa:hover {
        transform: scale(1.08) rotate(6deg);
        animation-play-state: paused;
    }
}

/* Circular WhatsApp float with pulse ring */
.ut-wa {
    border-radius: 9999px;
    animation: ut-pulse-ring 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
}

/* Floating button position: roomy on desktop, tight + safe-area aware on phones */
.ut-float {
    bottom: 48px;
    right: 48px;
}

/* FAQ accordion smooth open */
details.ut-faq .ut-faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
details.ut-faq[open] .ut-faq-body {
    grid-template-rows: 1fr;
}
details.ut-faq .ut-faq-body > div { overflow: hidden; }
details.ut-faq .ut-faq-chevron { transition: transform 0.3s ease; }
details.ut-faq[open] .ut-faq-chevron { transform: rotate(180deg); }
details.ut-faq summary::-webkit-details-marker { display: none; }
details.ut-faq summary { list-style: none; }

/* Rounded form fields */
.ut-field {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ut-field:focus {
    outline: none;
    border-color: #000080;
    box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.15);
}

/* Circular icon chips */
.ut-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Selection + focus */
::selection { background: #eb0000; color: #fff; }
:focus-visible { outline: 2px solid #eb0000; outline-offset: 2px; border-radius: 4px; }

/* Nav underline animation */
.ut-nav-link { position: relative; }
.ut-nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -4px;
    height: 2px;
    background: #eb0000;
    border-radius: 2px;
    transition: right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ut-nav-link:hover::after,
.ut-nav-link.ut-active::after { right: 0; }

/* Counter digits don't jump */
.ut-stat-num { font-variant-numeric: tabular-nums; }

/* ---- Lucide icons ---- */
svg.lucide {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---- Hero scrim (index) ---- */
.ut-hero-scrim {
    background: linear-gradient(to right, #000080 0%, rgba(0, 0, 128, 0.85) 45%, rgba(0, 0, 128, 0.25) 100%);
}

/* ---- Stock board ---- */
.ut-stock-row { transition: opacity 0.5s ease, background-color 0.2s ease; }
.ut-stock-filter {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.ut-stock-filter:active { transform: scale(0.97); }

/* ---- Mobile ergonomics ---- */
@media (max-width: 640px) {
    .ut-float {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
    }
    /* Short hero: stack the scrim vertically so text stays readable over wood */
    .ut-hero-scrim {
        background: linear-gradient(180deg, rgba(0, 0, 128, 0.9) 0%, rgba(0, 0, 128, 0.74) 55%, rgba(0, 0, 128, 0.62) 100%);
    }
    /* Comfier tap rows in the mobile menu */
    #mobile-menu a {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* Touch ergonomics: comfortably sized targets for fingers */
@media (pointer: coarse) {
    input.ut-field, select.ut-field, textarea.ut-field { min-height: 48px; }
    .ut-stock-filter { min-height: 44px; }
}

/* Stock table becomes stacked label/value cards on small screens */
@media (max-width: 720px) {
    .ut-stock-table { min-width: 0 !important; }
    .ut-stock-table thead { display: none; }
    .ut-stock-table, .ut-stock-table tbody, .ut-stock-table tr, .ut-stock-table td {
        display: block;
        width: 100%;
    }
    .ut-stock-table tr {
        border-bottom: 1px solid #c6c5d5;
        padding: 10px 0;
        background: transparent;
    }
    .ut-stock-table tr:last-child { border-bottom: 0; }
    .ut-stock-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 16px;
        white-space: normal;
    }
    .ut-stock-table td::before {
        content: attr(data-label);
        font-family: Inter, sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #464653;
        flex-shrink: 0;
    }
    .ut-stock-table td.ut-td-species { padding-top: 2px; padding-bottom: 10px; }
    .ut-stock-table td.ut-td-species::before { display: none; }
    .ut-stock-table td.ut-td-species span:last-child { min-width: 0; }
}

/* ---- Mobile card compaction: smaller cards, denser info ---- */
@media (max-width: 640px) {
    /* Tighter card padding */
    .ut-lift.p-md { padding: 14px; }
    article.ut-lift > div.p-md { padding: 14px 14px 16px; }

    /* Smaller in-card headings (descriptions shrink via the fluid body token) */
    .ut-lift h3 { font-size: 17px; line-height: 1.3; }

    /* Smaller icon chips and card images */
    .ut-lift .ut-chip { width: 40px; height: 40px; }
    .ut-lift .ut-chip svg.lucide { width: 20px; height: 20px; }
    article.ut-lift img { height: 160px; }

    /* Panels: contact cards, quote form, CTA bands */
    .rounded-3xl.p-md { padding: 16px; }
    .rounded-3xl.px-md { padding-top: 36px; padding-bottom: 36px; }
    .rounded-3xl h2 { font-size: 20px; line-height: 1.25; }

    /* Technical docs rows */
    .rounded-2xl.divide-y a { padding: 12px 14px; }

    /* Stock board stacked cards: denser values */
    .ut-stock-table td { font-size: 14px; padding: 4px 14px; }
    .ut-stock-table td::before { font-size: 10px; }
}