/* ════════════════════════════════════════════════
   HAVAL — Base Styles & Animation System
   ════════════════════════════════════════════════ */

/* ── Foundations ────────────────────────────── */
html, body {
    background-color: #B8B8B8;
    min-height: 100%;
}
html {
    scroll-behavior: smooth;
}

/* Page-load entrance */
body {
    animation: pageEnter 0.6s ease-out both;
}
@keyframes pageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Custom Scrollbar ──────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #D70010; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #b8000e; }

/* Header models dropdown: hide scrollbar only (arrows + drag still work; avoids global red thumb here) */
.models-dropdown-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.models-dropdown-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes clipReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes clipRevealRTL {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes pulse {
    0%, 100% { transform: scale(0.92); }
    50%      { transform: scale(1.08); }
}
@keyframes kenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.12); }
}
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes slideInChar {
    from { opacity: 0; transform: translateY(20px) rotateX(-40deg); }
    to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATION CLASSES
   Start invisible, become visible when .is-visible is added
   ════════════════════════════════════════════════ */
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in,
.anim-bounce-in {
    opacity: 0;
    will-change: transform, opacity;
}
.anim-fade-up.is-visible    { animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-fade-down.is-visible  { animation: fadeSlideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-fade-left.is-visible  { animation: fadeSlideLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-fade-right.is-visible { animation: fadeSlideRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-scale-in.is-visible   { animation: scaleIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-bounce-in.is-visible  { animation: bounceIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Stagger delay utilities */
.anim-delay-1 { animation-delay: 100ms !important; }
.anim-delay-2 { animation-delay: 200ms !important; }
.anim-delay-3 { animation-delay: 300ms !important; }
.anim-delay-4 { animation-delay: 400ms !important; }
.anim-delay-5 { animation-delay: 500ms !important; }
.anim-delay-6 { animation-delay: 600ms !important; }

/* ── Image Reveal ────────────────────────────── */
.img-reveal {
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}
html[dir="rtl"] .img-reveal {
    clip-path: inset(0 0 0 100%);
}
.img-reveal.is-visible {
    animation: clipReveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
html[dir="rtl"] .img-reveal.is-visible {
    animation: clipRevealRTL 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* ════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ════════════════════════════════════════════════ */

/* Lift + shadow on hover */
.hover-lift {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
             
}
.hover-lift:hover {
    transform: translateY(-6px);
 
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow 0.4s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 20px rgba(215, 0, 16, 0.4),
                0 0 40px rgba(215, 0, 16, 0.15);
}

/* Animated underline for links */
.link-underline {
    position: relative;
    text-decoration: none;
}
.link-underline::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: #D70010;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .link-underline::after {
    left: auto;
    right: 0;
}
.link-underline:hover::after {
    width: 100%;
}

/* ── 3D Card Tilt ─────────────────────────────── */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    transform: perspective(800px)
               rotateX(var(--rotateX, 0deg))
               rotateY(var(--rotateY, 0deg));
}
.card-3d:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ════════════════════════════════════════════════
   CONTINUOUS ANIMATIONS
   ════════════════════════════════════════════════ */

/* Pulse attention for CTAs */
.pulse-attention {
    animation: pulse 2.5s ease-in-out infinite;
}
.pulse-attention:hover {
    animation: none;
}

/* Floating effect */
.float-subtle {
    animation: float 3.5s ease-in-out infinite;
}

/* Text shimmer gradient (animation off — solid readable text) */
.text-shimmer {
    background: linear-gradient(
        90deg,
        currentColor 0%,
        #D70010 25%,
        currentColor 50%,
        #D70010 75%,
        currentColor 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: none;
}

/* ── Ken Burns for Hero ───────────────────────── */
.ken-burns {
    animation: kenBurns 8s ease-out forwards;
}

/* ── Text reveal helpers (JS stagger disabled in base.js) ──────────── */
.text-reveal,
.text-reveal-line {
    opacity: 1 !important;
    transform: none !important;
}

/* If legacy spans exist, show immediately */
.text-reveal-char {
    display: inline-block;
    opacity: 1;
    transform: none;
    animation: none;
}

.text-reveal-line-wrapper {
    display: block;
    overflow: visible;
    padding: 0;
    margin: 0;
}
.text-reveal-line-inner {
    display: block;
    opacity: 1;
    transform: none;
    animation: none;
}

/* Disable reveal animation for text content (titles/descriptions) */
h1.anim-fade-up,
h2.anim-fade-up,
h3.anim-fade-up,
h4.anim-fade-up,
h5.anim-fade-up,
h6.anim-fade-up,
p.anim-fade-up,
span.anim-fade-up,
label.anim-fade-up,
a.anim-fade-up,
li.anim-fade-up,
h1.anim-fade-down,
h2.anim-fade-down,
h3.anim-fade-down,
h4.anim-fade-down,
h5.anim-fade-down,
h6.anim-fade-down,
p.anim-fade-down,
span.anim-fade-down,
label.anim-fade-down,
a.anim-fade-down,
li.anim-fade-down,
h1.anim-fade-left,
h2.anim-fade-left,
h3.anim-fade-left,
h4.anim-fade-left,
h5.anim-fade-left,
h6.anim-fade-left,
p.anim-fade-left,
span.anim-fade-left,
label.anim-fade-left,
a.anim-fade-left,
li.anim-fade-left,
h1.anim-fade-right,
h2.anim-fade-right,
h3.anim-fade-right,
h4.anim-fade-right,
h5.anim-fade-right,
h6.anim-fade-right,
p.anim-fade-right,
span.anim-fade-right,
label.anim-fade-right,
a.anim-fade-right,
li.anim-fade-right,
h1.anim-scale-in,
h2.anim-scale-in,
h3.anim-scale-in,
h4.anim-scale-in,
h5.anim-scale-in,
h6.anim-scale-in,
p.anim-scale-in,
span.anim-scale-in,
label.anim-scale-in,
a.anim-scale-in,
li.anim-scale-in,
h1.anim-bounce-in,
h2.anim-bounce-in,
h3.anim-bounce-in,
h4.anim-bounce-in,
h5.anim-bounce-in,
h6.anim-bounce-in,
p.anim-bounce-in,
span.anim-bounce-in,
label.anim-bounce-in,
a.anim-bounce-in,
li.anim-bounce-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
@keyframes slideUpLine {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Parallax Helper ──────────────────────────── */
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── Magnetic Hover ───────────────────────────── */
.magnetic-hover {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ════════════════════════════════════════════════
   ACCESSIBILITY — Respect reduced motion
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .anim-fade-up,
    .anim-fade-down,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in,
    .anim-bounce-in,
    .img-reveal {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}