/* ═══════════════════════════════════════════════════════════════
   AllOEMRims — Theme Polish Layer
   Additive animations, micro-interactions, and depth effects.
   Layers on top of main.css — no overrides, only enhancements.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Scroll-Triggered Reveals ──────────────────────────────── */

.aor-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.aor-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children inside a reveal group */
.aor-reveal-group .aor-reveal:nth-child(1)  { transition-delay: 0ms; }
.aor-reveal-group .aor-reveal:nth-child(2)  { transition-delay: 80ms; }
.aor-reveal-group .aor-reveal:nth-child(3)  { transition-delay: 160ms; }
.aor-reveal-group .aor-reveal:nth-child(4)  { transition-delay: 240ms; }
.aor-reveal-group .aor-reveal:nth-child(5)  { transition-delay: 320ms; }
.aor-reveal-group .aor-reveal:nth-child(6)  { transition-delay: 400ms; }
.aor-reveal-group .aor-reveal:nth-child(7)  { transition-delay: 480ms; }
.aor-reveal-group .aor-reveal:nth-child(8)  { transition-delay: 560ms; }
.aor-reveal-group .aor-reveal:nth-child(n+9) { transition-delay: 600ms; }

/* Catalog grid stagger — slightly faster */
.aor-grid-stagger .aor-rim-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aor-grid-stagger .aor-rim-card.aor-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced-motion fallback: polish.js bails entirely when prefers-reduced-motion
 * is on, which means the IntersectionObserver that adds .aor-revealed never
 * runs, so cards + reveals stay invisible at opacity:0. Force the resolved
 * state via media query so a11y users still see content. */
@media (prefers-reduced-motion: reduce) {
    .aor-reveal,
    .aor-grid-stagger .aor-rim-card,
    .aor-specs-table tr {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ── 2. Card Shimmer Effect ───────────────────────────────────── */

.aor-rim-card {
    --mx: 50%;
    --my: 50%;
    position: relative;
    overflow: hidden;
}

.aor-rim-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mx) var(--my),
        rgba(200, 220, 255, 0.06) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.aor-rim-card:hover::after {
    opacity: 1;
}


/* ── 3. Card Hover Enhancements ───────────────────────────────── */

/* Price pop on card hover */
.aor-rim-card .aor-rim-price {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aor-rim-card:hover .aor-rim-price {
    transform: scale(1.08);
}

/* Image zoom on hover */
.aor-rim-card .aor-rim-image {
    overflow: hidden;
}
.aor-rim-card .aor-rim-image img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aor-rim-card:hover .aor-rim-image img {
    transform: scale(1.06);
}

/* Condition badge pulse glow */
.aor-condition-badge {
    animation: aor-badge-glow 3s ease-in-out infinite;
}

@keyframes aor-badge-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
    50%      { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 255, 255, 0.15)); }
}

.aor-rim-card:hover .aor-condition-badge {
    animation-duration: 1.5s;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}


/* ── 4. Metallic Text Gradients ───────────────────────────────── */

.aor-chrome-text {
    background: linear-gradient(
        135deg,
        #f0f0f5 0%,
        #8888a0 40%,
        #f0f0f5 50%,
        #8888a0 60%,
        #f0f0f5 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aor-chrome-shift 6s ease-in-out infinite;
}

@keyframes aor-chrome-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}


/* ── 5. Homepage Hero Enhancements ────────────────────────────── */

/* Search bar breathe glow */
.aor-hero-search input[type="text"],
.aor-hero-search input[type="search"] {
    animation: aor-search-breathe 4s ease-in-out infinite;
}

@keyframes aor-search-breathe {
    0%, 100% { box-shadow: 0 0 0 1px var(--aor-chrome-border), 0 0 0px transparent; }
    50%      { box-shadow: 0 0 0 1px var(--aor-cyan-dim), 0 0 12px rgba(0, 212, 255, 0.15); }
}

/* Inventory counter */
.aor-count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ── 6. Add to Cart Interactions ──────────────────────────────── */

/* Tactile press */
.aor-btn-cart,
.aor-btn-primary {
    transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.aor-btn-cart:active,
.aor-btn-primary:active {
    transform: scale(0.95) !important;
}

/* Ripple effect */
.aor-btn-ripple {
    position: relative;
    overflow: hidden;
}
.aor-btn-ripple .aor-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: aor-ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes aor-ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* Cart success flash */
.aor-btn-cart.aor-cart-success {
    background: var(--aor-green) !important;
    border-color: var(--aor-green) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.4) !important;
}
.aor-btn-cart.aor-cart-success::before {
    content: '\2713';
    margin-right: 6px;
}


/* ── 7. Product Detail Polish ─────────────────────────────────── */

/* Gallery ken-burns idle animation */
.aor-gallery-main img {
    animation: aor-ken-burns 12s ease-in-out infinite alternate;
    transform-origin: center center;
}
.aor-gallery-main:hover img {
    animation-play-state: paused;
}

@keyframes aor-ken-burns {
    0%   { transform: scale(1.0)  translate(0, 0); }
    100% { transform: scale(1.04) translate(-0.5%, -0.5%); }
}

/* Add to Cart glow intensify on hover */
.aor-product-detail .aor-btn-cart {
    transition: box-shadow 0.4s ease, transform 0.15s ease, background 0.3s ease;
}
.aor-product-detail .aor-btn-cart:hover {
    box-shadow: 0 0 20px var(--aor-red-glow),
                0 0 40px rgba(219, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Specs table row reveal */
.aor-specs-table tr {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.aor-specs-table tr.aor-revealed {
    opacity: 1;
    transform: translateX(0);
}


/* ── 8. Filter Panel Polish ───────────────────────────────────── */

/* Active filter chip animations */
.aor-filter-tag {
    animation: aor-chip-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes aor-chip-in {
    from { opacity: 0; transform: scale(0.8) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.aor-filter-tag.aor-removing {
    animation: aor-chip-out 0.25s ease-in forwards;
}

@keyframes aor-chip-out {
    to { opacity: 0; transform: scale(0.8) translateX(-10px); }
}

/* Filter submit pulse when dirty */
.aor-filters-dirty .aor-filter-submit {
    animation: aor-pulse-cyan 2s ease-in-out infinite;
}

@keyframes aor-pulse-cyan {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.25); }
}


/* ── 9. Global Transition Smoothing ───────────────────────────── */

/* Smooth focus states */
a, button, input, select, textarea {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Link hover glow */
.aor-footer a:hover,
.aor-header a:hover {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}


/* ── 10. Reduced Motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .aor-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .aor-rim-card::after { display: none; }
    .aor-chrome-text { animation: none; background: none; -webkit-text-fill-color: inherit; }
    .aor-hero-search input { animation: none; }
    .aor-gallery-main img { animation: none; }
    .aor-condition-badge { animation: none; }
    .aor-filter-tag { animation: none; }
    .aor-count-up { transition: none; }
    .aor-specs-table tr { opacity: 1; transform: none; transition: none; }
    .aor-grid-stagger .aor-rim-card { opacity: 1; transform: none; transition: none; }
}


/* ── 11. Mobile — Disable Hover Effects ───────────────────────── */

@media (hover: none) {
    .aor-rim-card::after { display: none; }
    .aor-rim-card:hover .aor-rim-price { transform: none; }
    .aor-rim-card:hover .aor-rim-image img { transform: none; }
    .aor-rim-card:hover .aor-condition-badge { animation-duration: 3s; filter: none; }
}