/*
 * Sigma Panels & Paint - Animations Stylesheet
 * Phase 9 - Lightweight CSS recreation of the Stitch motion system.
 * (No WebGL / Three.js - pure CSS keyframes + IntersectionObserver reveals.)
 */

/* ============================================================
   Scroll Reveal System (toggled by public.js via .revealed)
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
[data-reveal="up"]   { transform: translateY(60px); }
[data-reveal="fade"] { transform: scale(0.98); }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="right"]{ transform: translateX(50px); }

[data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.revealed { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; }
.revealed[data-reveal="stagger"] > * { opacity: 1; transform: translateY(0); }
.revealed[data-reveal="stagger"] > *:nth-child(1) { transition-delay: 0.08s; }
.revealed[data-reveal="stagger"] > *:nth-child(2) { transition-delay: 0.18s; }
.revealed[data-reveal="stagger"] > *:nth-child(3) { transition-delay: 0.28s; }
.revealed[data-reveal="stagger"] > *:nth-child(4) { transition-delay: 0.38s; }
.revealed[data-reveal="stagger"] > *:nth-child(5) { transition-delay: 0.48s; }
.revealed[data-reveal="stagger"] > *:nth-child(6) { transition-delay: 0.58s; }

/* ============================================================
   Shine sweep (buttons)
   ============================================================ */
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    animation: shine 4s infinite linear;
}
@keyframes shine {
    0%   { left: -100%; }
    20%  { left: 100%; }
    100% { left: 100%; }
}

/* ============================================================
   Clear-coat diagonal shine on hover (image cards)
   ============================================================ */
.clear-coat { position: relative; overflow: hidden; }
.clear-coat::after {
    content: '';
    position: absolute;
    top: -150%; left: -150%;
    width: 50%; height: 400%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(45deg);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 3;
}
.clear-coat:hover::after { left: 200%; top: 100%; }

/* ============================================================
   Floating hero cards
   ============================================================ */
@keyframes float-card {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.float-anim { animation: float-card 4s infinite ease-in-out; }
.float-anim-delayed { animation: float-card 4s infinite ease-in-out 2s; }
/* keep the vertically-centred right card centred while floating */
@keyframes float-card-centered {
    0%   { transform: translateY(-50%); }
    50%  { transform: translateY(calc(-50% - 10px)); }
    100% { transform: translateY(-50%); }
}
.float-card.mid-right.float-anim-delayed { animation-name: float-card-centered; }

/* ============================================================
   Soft pulse (trust icons)
   ============================================================ */
@keyframes pulse-soft {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse-icon { animation: pulse-soft 3s infinite ease-in-out; }

/* ============================================================
   Mist drift (dark sections background)
   ============================================================ */
@keyframes mist-drift {
    0%   { transform: translate(-5%, -5%) scale(1);   opacity: 0.10; }
    50%  { transform: translate(5%, 5%) scale(1.1);   opacity: 0.16; }
    100% { transform: translate(-5%, -5%) scale(1);   opacity: 0.10; }
}
.mist-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 50% 50%, rgba(249,92,75,0.2), transparent 70%);
    animation: mist-drift 10s infinite alternate ease-in-out;
}

/* ============================================================
   Scroll indicator dot
   ============================================================ */
@keyframes scroll-dot {
    0%   { transform: translateY(-100%); opacity: 0; }
    50%  { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(100%);  opacity: 0; }
}

/* ============================================================
   Simple fade-in (legacy helper, retained)
   ============================================================ */
.fade-in { animation: fadeIn 0.8s ease-in-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* (Removed in cleanup: dormant Phase 12 paint-particles / paint-mist /
   gloss-sweep / spray-gun-cursor and Phase 17 paint-booth demo CSS - their
   markup (#paint-particles, #paintGun, #paintDemo, ...) no longer exists.) */

/* ============================================================
   Hero car - ONE complete car, transparent-background PNG.
   Single static <img> (hero-car-transparent-clean.png), object-fit: contain.
   The PNG itself is the cutout: NO container background (no white/grey/cream
   box), NO drop-shadow, box-shadow, border, outline, filter, mask, clip-path,
   backdrop-filter, mix-blend-mode, or duplicate layers. Sized smaller and set
   to the right so it never invades the hero text column.
   Default (no-JS / reduced motion): the complete car shows immediately.
   ============================================================ */
.hero-top-car {
    position: absolute;
    right: 5%;
    top: 54%;
    transform: translateY(-50%);
    width: min(650px, 46vw);
    z-index: 1;               /* feature card (z-index 4) stays above */
    pointer-events: none;
}
.hero-top-car img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Optional single entrance on the IMAGE only (keeps the container's
   translateY(-50%) centering). Fade + slide once, no colour/filter change. */
.hero-top-car img.hero-car-enter { animation: heroCarEnter 0.7s ease-out both; }
@keyframes heroCarEnter {
    from { opacity: 0; transform: translateX(15px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* (Removed: filter-based paint reveal, gloss sweep, PREP/PAINT/CLEAR/FINISH
   stage pills, and the hero ScrollTrigger - replaced by this static PNG.) */

/* ============================================================
   Reduced motion: respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .shine-effect::after, .float-anim, .float-anim-delayed, .pulse-icon, .mist-bg { animation: none !important; }
    .scroll-track::after { animation: none !important; }

    /* Hero: show the complete car immediately; only the image resets (the
       container keeps its translateY(-50%) centering). */
    .hero-top-car img.hero-car-enter { animation: none !important; }
    .hero-top-car img { opacity: 1 !important; transform: none !important; }
}