/* ===================================================================
   Rockfield Engineering — Shared Stylesheet
   Consolidates styling that previously lived as duplicated inline
   <style> blocks across every page, plus one unified, subtle
   scroll-reveal animation system used site-wide.
   =================================================================== */

body {
    font-family: 'Hanken Grotesk', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: #f1f3ff;
}
.custom-scrollbar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: #c4c6d3;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #747783;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Surfaces */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.5);
}
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.glass-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.admin-glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-gradient {
    background: linear-gradient(to right, rgba(0, 40, 105, 0.9) 0%, rgba(0, 40, 105, 0.4) 100%);
}
.industrial-overlay {
    background: linear-gradient(180deg, rgba(0, 40, 105, 0.4) 0%, rgba(20, 27, 43, 0.85) 100%);
}

/* Interactive surfaces */
.product-card-hover:hover {
    border-color: #002869;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.data-table-row:hover {
    background-color: rgba(214, 224, 241, 0.3);
}
.input-focus-ring:focus-within {
    box-shadow: 0 0 0 2px #345baf;
}
input:focus {
    box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.2);
}

/* Product zoom (product details) */
.zoom-container { overflow: hidden; cursor: crosshair; }
.zoom-image { transition: transform 0.3s ease-out; }
.zoom-container:hover .zoom-image { transform: scale(1.5); }
.tab-active { border-bottom: 2px solid #002869; color: #002869; }

/* Checkout steps */
.step-active { color: #002869; font-weight: 700; }
.step-inactive { color: #747783; }

/* Analytics charts */
.chart-bar { transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.chart-bar-h { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* ===================================================================
   Unified subtle animation system
   =================================================================== */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-timer {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
.animate-timer { animation: pulse-timer 2s infinite ease-in-out; }
.animate-fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* .reveal: the single scroll-triggered fade-up used across every page.
   Starts hidden/offset, and gets `.is-visible` added by assets/js/main.js
   via IntersectionObserver once it scrolls into view. Mature, subtle,
   consistent timing everywhere. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    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;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .animate-fade-up, .animate-timer {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Gentle press feedback for buttons, applied globally via main.js */
.btn-press { transition: transform 0.15s ease; }
.btn-press:active { transform: scale(0.96); }

/* Active nav link indicator */
.nav-link-active {
    color: #002869;
    border-bottom: 2px solid #002869;
}

/* ===================================================================
   Page preloader
   Full-screen overlay shown on load, hidden once the page (and
   webfonts) are ready. Blueprint-grid backdrop + a rotating gear
   mark + a thin progress sweep — restrained and engineering-toned
   rather than flashy. Respects prefers-reduced-motion.
   =================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #f9f9ff;
    background-image:
        linear-gradient(rgba(0, 40, 105, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 40, 105, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader-gear {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #002869;
    box-shadow: 0 8px 24px rgba(0, 40, 105, 0.25);
}
.preloader-gear .material-symbols-outlined {
    font-size: 30px;
    color: #ffffff;
    animation: preloader-spin 1.8s linear infinite;
}
.preloader-word {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: #002869;
    text-transform: uppercase;
}
.preloader-bar {
    width: 160px;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 40, 105, 0.12);
    overflow: hidden;
}
.preloader-bar::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background: #FF6D00;
    border-radius: 999px;
    animation: preloader-sweep 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes preloader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes preloader-sweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
}
.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .preloader-gear .material-symbols-outlined,
    .preloader-bar::after {
        animation: none !important;
    }
}