/*
 * OnboardCamera.tv — website-enhanced.css (v3)
 * Link AFTER website.css on ALL pages:
 *   <link rel="stylesheet" href="/assets/css/website-enhanced.css">
 *
 * Changes in v3:
 *  - Carousel hover: more subtle (no sibling dimming)
 *  - Video demo: offset block decoration (place2train style)
 *  - Series page components: wwd-cards, fact-cards, display-cards
 *  - Schedule list (series pages) hover polish
 *  - All previous improvements retained
 */


/* ── SHARED TOKENS ────────────────────────────── */
:root {
    --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:     0.18s;
    --dur-mid:      0.30s;
    --shadow-card:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
    --shadow-hover: 0 10px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
}

:focus-visible {
    outline: 2px solid #009acc;
    outline-offset: 3px;
    border-radius: 3px;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #005081; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #009acc; }


/* ═══════════════════════════════════════════════
   HERO — taller desktop only
   ═══════════════════════════════════════════════ */

@media (min-width: 769px) {
    .hero { height: 360px; }
}

.hero::after {
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, rgba(26,29,33,.5) 60%, #1a1d21 100%);
}

.hero-stripe {
    background: linear-gradient(180deg, #009acc 0%, #005081 100%);
    box-shadow: 0 0 24px rgba(0,154,204,.4);
    width: 4px;
}

.hero-badge-label {
    font-size: 11px;
    letter-spacing: .41em;
    color: rgba(255,255,255,.65);
}


/* ═══════════════════════════════════════════════
   NAVBAR — glass blur when scrolled
   ═══════════════════════════════════════════════ */

.site-nav {
    transition: background var(--dur-mid), box-shadow var(--dur-mid);
}

.site-nav.scrolled {
    background: rgba(0, 55, 92, 0.88) !important;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 4px 28px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05);
}

.site-nav-link { position: relative; overflow: hidden; }

.site-nav-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 14px;
    right: 14px;
    height: 1.5px;
    background: #009acc;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-mid) var(--ease-expo);
}

.site-nav-link:hover::after { transform: scaleX(1); }

.site-nav-cta {
    transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.site-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,154,204,.3);
    opacity: 1;
}

.site-nav-dropdown {
    background: rgba(14, 17, 22, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
}


/* ═══════════════════════════════════════════════
   LIVE SECTION — light background, improved feel
   ═══════════════════════════════════════════════ */

#live-section {
    background: linear-gradient(180deg, #f5f7f9 0%, #eef1f4 100%);
    border-top: 1px solid #dde1e7;
}

.live-title { letter-spacing: -.01em; }

/* ═══════════════════════════════════════════════
   STREAM CARDS — subtle shadow + lift
   ═══════════════════════════════════════════════ */

.stream-card {
    border: 1px solid #e4e8ec;
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    transition:
        transform var(--dur-mid) var(--ease-expo),
        box-shadow var(--dur-mid) var(--ease-expo),
        border-color var(--dur-fast);
}

.stream-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0,80,129,.12);
}

.car-number { box-shadow: 0 2px 6px rgba(0,80,129,.22); }

.car-stats-btn {
    letter-spacing: .07em !important;
    transition: background var(--dur-fast), color var(--dur-fast),
                border-color var(--dur-fast), transform var(--dur-fast) !important;
}
.car-stats-btn:hover { transform: translateY(-1px) !important; }

/* Info row slide */
.info-row {
    transition: background var(--dur-fast), padding-left var(--dur-fast);
}
.info-row:hover { padding-left: 22px; background: rgba(0,80,129,.03); }


/* ═══════════════════════════════════════════════
   SCHEDULE CARDS — white on gray, polished
   ═══════════════════════════════════════════════ */

.series-card {
    box-shadow: var(--shadow-card);
    border-radius: 10px;
    border: 1px solid #dde1e7;
    transition: transform var(--dur-mid) var(--ease-expo), box-shadow var(--dur-mid);
}

.series-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.series-card-head::before { height: 4px; }

.event-row { transition: background var(--dur-fast), padding-left var(--dur-fast); }
.event-row:hover { padding-left: 26px; }
.event-date { transition: background var(--dur-fast); }
.event-row:hover .event-date { background: rgba(0,80,129,.12); }
.event-row--live { border-left-width: 4px; }
.event-live-dot { width: 8px; height: 8px; box-shadow: 0 0 5px rgba(192,57,43,.5); }


/* ═══════════════════════════════════════════════
   VIDEO DEMO — offset decoration (place2train style)

   A solid-color block sits behind the video,
   offset down-right, creating the "floating card"
   depth effect. Uses box-shadow with 0 blur.
   ═══════════════════════════════════════════════ */

.video-wrapper {
    /* Offset cyan block — 0 blur = solid shape, not a glow */
    box-shadow:
        14px 14px 0 rgba(0, 154, 204, 0.30),   /* main offset decoration */
        0 8px 32px rgba(0, 0, 0, .10);           /* regular card shadow */

    /* Shift wrapper left/up so decoration shows on right/bottom */
    margin-right: 14px;
    margin-bottom: 14px;

    transition: box-shadow var(--dur-mid), transform var(--dur-mid);
}

.video-wrapper:hover {
    transform: translate(-3px, -3px);
    box-shadow:
        17px 17px 0 rgba(0, 154, 204, 0.35),    /* decoration moves with card */
        0 16px 44px rgba(0, 0, 0, .14);
}

/* Pause decoration on mobile — no space for it */
@media (max-width: 768px) {
    .video-wrapper {
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        margin-right: 0;
        margin-bottom: 0;
    }
    .video-wrapper:hover {
        transform: none;
        box-shadow: 0 12px 32px rgba(0,0,0,.12);
    }
}


/* ═══════════════════════════════════════════════
   ABOUT — stat card polish
   ═══════════════════════════════════════════════ */

.about-stat {
    padding: 14px 10px;
    border-radius: 8px;
    background: rgba(0,80,129,.04);
    border: 1px solid rgba(0,80,129,.08);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.about-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,80,129,.1); }
.about-stat-number { font-size: 40px; letter-spacing: -.01em; }

.about-features li i { transition: transform var(--dur-fast); }
.about-features li:hover i { transform: scale(1.08); }


/* ═══════════════════════════════════════════════
   I'M INTERESTED — circuit-line background
   ═══════════════════════════════════════════════ */

#interested-section { position: relative; overflow: hidden; }

/* Grid lines */
#interested-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(0deg,   rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg,  rgba(255,255,255,.055) 1px, transparent 1px),
        radial-gradient(ellipse at 88% 15%, rgba(0,154,204,.16) 0%, transparent 50%),
        radial-gradient(ellipse at 12% 88%, rgba(0,80,129,.20)  0%, transparent 50%);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
}

/* Node dots */
#interested-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: 22px 22px;
}

#interested-section .section-wrap { position: relative; z-index: 1; }

.interested-field input {
    border-radius: 7px;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}

.interested-field input:focus {
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.14);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
    outline: none;
}

.interested-submit {
    border-radius: 7px;
    letter-spacing: .1em;
    transition: transform var(--dur-fast) var(--ease-expo), box-shadow var(--dur-fast);
}

.interested-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    opacity: .95;
}


/* ═══════════════════════════════════════════════
   CLIENTS CAROUSEL — subtle hover (v3 update)

   v2 was too aggressive (scale 1.08 + full dimming).
   v3: gentle brightness lift only, no dimming of siblings,
   very slight scale — feels refined not dramatic.
   ═══════════════════════════════════════════════ */

.client-item {
    transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-expo);
}

/* Hover: slight lift and full brightness, no sibling dimming */
.client-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.client-name {
    transition: color var(--dur-mid), letter-spacing var(--dur-mid);
    color: rgba(255,255,255,.6);
}

/* Hovered name goes white with slightly tighter tracking */
.client-item:hover .client-name {
    color: #ffffff;
    letter-spacing: .14em;
}


/* ═══════════════════════════════════════════════
   TEXTURE — circuit lines in dark sections
   what-we-do, display-system, clients-section
   ═══════════════════════════════════════════════ */

#what-we-do,
#display-system,
#clients-section { position: relative; overflow: hidden; }

/* Grid */
#what-we-do::before,
#display-system::before,
#clients-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(0deg,  rgba(0,154,204,.048) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,154,204,.048) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* Node dots — what-we-do and clients */
#what-we-do::after,
#clients-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(0,154,204,.065) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: 18px 18px;
}

/* display-system uses ::after for card decorations */
#display-system::after { display: none; }

/* Content above texture */
#what-we-do .section-wrap,
#display-system .section-wrap,
#clients-section .clients-header,
#clients-section .clients-track-wrap { position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════
   SERIES PAGES — WWD Cards
   Used on super-taikyu, supercar-challenge,
   nascar-euro-series pages
   ═══════════════════════════════════════════════ */

.wwd-card {
    transition: transform var(--dur-mid) var(--ease-expo),
                border-color var(--dur-mid),
                box-shadow var(--dur-mid);
}

.wwd-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,154,204,.3);
    box-shadow: 0 12px 36px rgba(0,0,0,.2), 0 0 0 1px rgba(0,154,204,.15);
}

.wwd-card-icon {
    transition: background var(--dur-fast), transform var(--dur-fast);
}

.wwd-card:hover .wwd-card-icon {
    background: rgba(0,154,204,.2);
    transform: scale(1.08);
}

.wwd-card-title { letter-spacing: .02em; }

.wwd-card-text { line-height: 1.8; }


/* ═══════════════════════════════════════════════
   SERIES PAGES — Fact Cards (about section)
   ═══════════════════════════════════════════════ */

.fact-card {
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
    border-radius: 8px;
}

.fact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    border-color: rgba(0,80,129,.2);
}

.fact-icon {
    transition: background var(--dur-fast), transform var(--dur-fast);
}

.fact-card:hover .fact-icon {
    background: rgba(0,80,129,.12);
    transform: scale(1.06);
}

.fact-value { letter-spacing: .01em; }


/* ═══════════════════════════════════════════════
   SERIES PAGES — Display Cards (Super Taikyu)
   ═══════════════════════════════════════════════ */

.display-card {
    transition: transform var(--dur-mid) var(--ease-expo),
                border-color var(--dur-mid),
                box-shadow var(--dur-mid);
}

.display-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 12px 36px rgba(0,0,0,.25);
}

.display-icon {
    transition: background var(--dur-fast), transform var(--dur-fast);
}

.display-card:hover .display-icon {
    background: rgba(255,255,255,.2);
    transform: scale(1.08);
}


/* ═══════════════════════════════════════════════
   SERIES PAGES — Schedule List items
   ═══════════════════════════════════════════════ */

.schedule-item {
    transition: background var(--dur-fast), padding-left var(--dur-fast);
    border-radius: 4px;
}

.schedule-item:hover {
    background: rgba(0,80,129,.04);
    padding-left: 8px;
}

.schedule-date {
    transition: background var(--dur-fast), color var(--dur-fast);
}

.schedule-item:hover .schedule-date {
    background: rgba(0,80,129,.14);
    color: #004a78;
}


/* ═══════════════════════════════════════════════
   SERIES PAGES — About intro polish
   ═══════════════════════════════════════════════ */

.about-intro { line-height: 1.8; }
.about-intro strong { font-weight: 700; }

.about-body p { line-height: 1.85; }


/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.site-footer { position: relative; }

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,204,.4), transparent);
}

.footer-nav a {
    display: inline-block;
    transition: color var(--dur-fast), transform var(--dur-fast);
}

.footer-nav a:hover { color: #009acc; transform: translateX(3px); }


/* ═══════════════════════════════════════════════
   QR + CONNECTION PILL
   ═══════════════════════════════════════════════ */

.qr-toggle-btn {
    background: linear-gradient(135deg, #005081, #0072a8);
    box-shadow: 0 4px 16px rgba(0,80,129,.35);
    transition: transform .28s var(--ease-expo), box-shadow .28s;
}

.qr-toggle-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(0,80,129,.45);
}

.connection-status {
    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.05);
}


/* ═══════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════ */

.modal-content {
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
}

.modal-description { border-radius: 8px; }


/* ═══════════════════════════════════════════════
   SCROLL REVEAL — smoother easing
   ═══════════════════════════════════════════════ */

.reveal {
    transition: opacity .65s var(--ease-expo), transform .65s var(--ease-expo);
}

.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .19s; }
.reveal-d3 { transition-delay: .29s; }
.reveal-d4 { transition-delay: .39s; }


/* ═══════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .clients-track { animation: none !important; }
    .video-wrapper { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; margin: 0 !important; }
}