/* ============================================================
   Shri Shyam Car Transport - Custom Design System
   Complements Tailwind CDN. Tokens, components, animations.
   Primary: Red (dominant) | Secondary: Black/Charcoal (minimal)
   ============================================================ */

:root {
    --brand-red: #DC2626;
    --brand-red-2: #B91C1C;
    --brand-red-3: #EF4444;
    --brand-red-4: #FEF2F2;
    --brand-red-5: #7F1D1D;
    --brand-black: #0A0A0A;
    --brand-ink: #171717;
    --brand-charcoal: #262626;
    --whatsapp: #25D366;
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visually hides content while keeping it available to screen readers /
   accessible-name computation (used to give generic link text like
   "Read More" a descriptive accessible name for SEO/a11y). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}
body {
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

/* ============================================================
   STICKY HEADER — professional elevation on scroll
   ============================================================ */
#site-header {
    transition: box-shadow .3s var(--ease-smooth), background-color .3s ease, border-color .3s ease;
}
#site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 30px -12px rgba(10, 10, 10, 0.22);
    border-bottom-color: transparent;
}

/* Extra bottom padding so sticky mobile CTA never overlaps content */
@media (max-width: 1023px) {
    body { padding-bottom: 64px; }
}

/* ---------- Selection ---------- */
::selection { background: var(--brand-red); color: #fff; }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-red); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.form-field {
    width: 100%;
    font-size: 14px;
    line-height: 1.417;
    color: #262626;
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none;
}
.form-field::placeholder { color: #a3a3a3; }
.form-field:focus {
    outline: none;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}
select.form-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1.1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}
/* JustValidate error / success states */
.form-field.just-validate-error-field {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}
.form-field.just-validate-success-field {
    border-color: #22c55e;
}
.just-validate-error-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 12px;
    color: var(--brand-red);
    font-weight: 500;
}

/* ============================================================
   SCROLL REVEAL (multiple entrance variants)
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="left"].is-visible  { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="zoom"] { transform: scale(1.08); }
[data-reveal="zoom"].is-visible { transform: scale(1); }

[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal][data-reveal-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none !important; transition: none; }
    .animate-float, .animate-float-slow, .animate-marquee, .animate-ping, .animate-pulse-ring, .animate-gradient-shift, .animate-spin-slow { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-dark {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-red {
    background: rgba(220, 38, 38, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ============================================================
   HERO / BACKGROUND TREATMENTS
   ============================================================ */
.hero-gradient {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(220,38,38,0.35), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(220,38,38,0.12), transparent 55%),
        linear-gradient(135deg, #000000 0%, #171717 45%, #0a0a0a 100%);
}
.noise-overlay {
    position: relative;
}
.noise-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
.text-gradient-red {
    background: linear-gradient(90deg, var(--brand-red-3), var(--brand-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-gradient-fire {
    background: linear-gradient(120deg, #fca5a5, var(--brand-red-3), var(--brand-red), var(--brand-red-2));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease infinite;
}
.grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}
.grid-pattern-dark {
    background-image:
        linear-gradient(rgba(10,10,10,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,10,10,0.06) 1px, transparent 1px);
    background-size: 36px 36px;
}
.dot-pattern {
    background-image: radial-gradient(circle, rgba(220,38,38,0.18) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

/* Animated gradient border wrapper: wrap any card in .gradient-border */
.gradient-border {
    position: relative;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-black), var(--brand-red-2));
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    padding: 2px;
}
.gradient-border > * { border-radius: 1.1rem; }

/* ============================================================
   CARDS / HOVER INTERACTIONS
   ============================================================ */
.card-hover {
    transition: transform .35s var(--ease-out-back), box-shadow .35s ease, border-color .35s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 55px -18px rgba(10, 10, 10, 0.30);
}
.card-tilt {
    transition: transform .4s var(--ease-out-back), box-shadow .4s ease;
    transform-style: preserve-3d;
}
.card-tilt:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px) scale(1.01);
}

/* Spotlight hover glow that follows cursor via --x/--y set by JS */
.spotlight {
    position: relative;
    overflow: hidden;
}
.spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%), rgba(220,38,38,0.16), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

/* Shine sweep on hover (buttons/cards) */
.shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.shine::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    z-index: 1;
}
.shine:hover::before { left: 130%; }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   MARQUEE STRIP (single row - trust badges)
   ============================================================ */
.marquee-wrap {
    overflow: hidden;
    max-width: 100%;
}
.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    animation: marquee 26s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-25%, 0, 0); }
}

/* ============================================================
   GALLERY - DUAL ROW AUTO-SCROLL MARQUEE
   Row 1 scrolls left, Row 2 scrolls right. Infinite, seamless.
   On touch devices the track becomes a manually swipeable
   overflow-x scroller (animation paused via JS on touchstart).
   ============================================================ */
.gallery-row {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.gallery-track {
    display: flex;
    width: max-content;
    gap: 1.25rem;
    padding: 0.5rem 0;
}
.gallery-track.dir-left  { animation: galleryLeft 38s linear infinite; }
.gallery-track.dir-right { animation: galleryRight 38s linear infinite; }
.gallery-row.is-touching .gallery-track { animation-play-state: paused; }
.gallery-row:hover .gallery-track { animation-play-state: paused; }
@media (max-width: 767px) {
    /* On mobile, allow native touch scroll/swipe alongside the animation */
    .gallery-row { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .gallery-row::-webkit-scrollbar { display: none; }
}
.gallery-card {
    position: relative;
    width: 260px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -12px rgba(10,10,10,0.18);
    scroll-snap-align: start;
    transition: transform .35s var(--ease-out-back), box-shadow .35s ease;
}
.gallery-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 45px -15px rgba(10,10,10,0.3); z-index: 2; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; }
.gallery-card figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(10,10,10,0.85), transparent);
    color: #fff; font-size: 12px; font-weight: 600;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.gallery-card:hover figcaption { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
    .gallery-card { width: 200px; height: 150px; }
}

/* ============================================================
   TESTIMONIAL CAROUSEL - auto-advancing, infinite loop, swipeable
   ============================================================ */
.testi-viewport {
    overflow: hidden;
    position: relative;
}
.testi-track {
    display: flex;
    transition: transform .55s var(--ease-smooth);
    touch-action: pan-y;
}
.testi-slide {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 0.5rem;
}
@media (min-width: 768px) {
    .testi-slide { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1024px) {
    .testi-slide { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
.testi-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #e5e5e5;
    transition: width .3s ease, background-color .3s ease;
}
.testi-dot.is-active { width: 26px; background: var(--brand-red); }
.testi-nav-btn {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e5e5;
    color: var(--brand-black);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.testi-nav-btn:hover { background: var(--brand-red); color: #fff; border-color: var(--brand-red); transform: translateY(-2px); }

/* ============================================================
   WORKING PROCESS - connected step layout
   ============================================================ */
.process-step {
    position: relative;
}
.process-connector {
    position: absolute;
    top: 34px;
    left: 100%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(220,38,38,0.5) 0 8px, transparent 8px 16px);
    z-index: 0;
}
@media (max-width: 1023px) {
    .process-connector { display: none; }
}
.process-num {
    transition: transform .35s var(--ease-out-back), box-shadow .35s ease;
}
.process-step:hover .process-num {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 10px 24px -6px rgba(220,38,38,0.55);
}

/* ============================================================
   HEADER
   ============================================================ */
#site-header.is-scrolled {
    box-shadow: 0 6px 24px -10px rgba(10, 10, 10, 0.22);
}

/* Mega menu description clamp (keeps menu compact) */
.mega-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
}

/* Gallery filter active */
.gallery-filter.is-active {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}

/* FAQ page category filter active */
.faq-filter.is-active {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.faq-item.is-open .faq-answer { max-height: 480px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--brand-red); color: #fff; }
.faq-icon { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.faq-item { transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item.is-open { border-color: rgba(220,38,38,0.35); }

/* Body scroll lock when modal/drawer open */
body.no-scroll { overflow: hidden; }

/* ============================================================
   COUNTER / STAT DECORATION
   ============================================================ */
.stat-card {
    position: relative;
}
.stat-card::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-red);
    transform: translateX(-50%) scaleX(0);
    transition: transform .5s var(--ease-out-back);
}
.stat-card.is-visible::before,
[data-reveal].is-visible .stat-card::before { transform: translateX(-50%) scaleX(1); }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-dot {
    box-shadow: 0 0 0 6px rgba(220,38,38,0.12);
}

/* ============================================================
   PROSE (blog/legal/service long-form content)
   ============================================================ */
.prose-content h2 { font-size: 22px; font-weight: 700; color: var(--brand-black); margin: 1.75rem 0 .75rem; }
.prose-content h3 { font-size: 18px; font-weight: 600; color: var(--brand-ink); margin: 1.5rem 0 .5rem; }
.prose-content p  { margin: 0 0 1rem; line-height: 1.7; }
.prose-content ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.prose-content ul li { margin-bottom: .5rem; }
.prose-content a { color: var(--brand-red); text-decoration: underline; }
.prose-content strong { color: var(--brand-ink); font-weight: 600; }
.prose-content blockquote {
    border-left: 3px solid var(--brand-red);
    background: var(--brand-red-4);
    padding: 0.9rem 1.1rem;
    border-radius: 0 0.75rem 0.75rem 0;
    margin: 1.25rem 0;
    font-style: italic;
    color: var(--brand-ink);
}
.prose-content table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 14px; }
.prose-content table th, .prose-content table td { border: 1px solid #e5e5e5; padding: 0.6rem 0.85rem; text-align: left; }
.prose-content table th { background: var(--brand-black); color: #fff; font-weight: 600; }
.prose-content table tr:nth-child(even) { background: #fafafa; }

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width: 640px) {
    .hero-gradient h1 { letter-spacing: -0.01em; }
    .card-hover:hover { transform: translateY(-3px); }
}

/* Utility: subtle badge pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pill-red { background: var(--brand-red-4); color: var(--brand-red); }
.pill-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); }

/* ============================================================
   KEYFRAMES (plain CSS - Tailwind CDN config only covers
   utility-driven animations; these support raw class hooks
   used by the gallery marquee)
   ============================================================ */
@keyframes galleryLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes galleryRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-track.dir-left, .gallery-track.dir-right { animation: none !important; }
}