/*
 * Alaa Eldin — motion (PART 1). Subtle, transform/opacity only, 250–700 ms ease-out, each reveal runs once.
 * Hidden "before" states apply only under html.am-ready (set by alaa-motion.js), so without JS nothing is hidden.
 * Everything is switched off with prefers-reduced-motion (alaa-motion.js does not even add am-ready then).
 */
:root { --am-gold: #D8B06A; --am-red: #D6031C; --am-ease: cubic-bezier(.22, .61, .36, 1); }

/* 10. focus-visible + 150 ms colour transitions on links / buttons (low specificity: :where) */
:where(a, button, .btn, [role="button"], summary) { transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
:where(a, button, .btn, [role="button"], summary, input, select, textarea):focus-visible { outline: 3px solid var(--am-gold); outline-offset: 2px; }

/* 1. Signature stitch line under section titles (drawn right → left by a sliding mask rect: transform only) */
.alaa-stitch { display: block; width: 120px; height: 6px; margin: 8px auto 0; overflow: visible; }
.ah-head:not(.ah-head-center) .alaa-stitch, .ab-head .alaa-stitch { margin-inline: 0; }
.alaa-stitch-reveal { transform-box: view-box; transform: translateX(0); }
.am-ready .alaa-stitch-reveal { transform: translateX(120px); transition: transform .7s var(--am-ease); }
[dir="ltr"] .am-ready .alaa-stitch-reveal { transform: translateX(-120px); }
.am-ready .alaa-stitch.is-in .alaa-stitch-reveal { transform: translateX(0); }

/* 2. Hero: Ken Burns on the active slide, word fade-up, red line, one CTA shine */
.alaa-hero-slide img { transform-origin: 30% 50%; will-change: auto; }
.am-ready .alaa-hero-slide.am-active img { animation: am-kenburns 12s ease-out forwards; }
@keyframes am-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

.alaa-hero-title .am-word { display: inline-block; }
.am-ready .alaa-hero-slide.am-active .am-word { animation: am-word .55s var(--am-ease) both; animation-delay: calc(var(--i) * 80ms); }
/* first paint of slide 1: movement only, never invisible (the H1 can be the mobile LCP element) */
.am-ready .alaa-hero-slide.am-active.am-first .am-word { animation-name: am-word-move; }
@keyframes am-word { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes am-word-move { from { transform: translateY(10px); } to { transform: none; } }

.alaa-hero-line { display: block; width: 72px; height: 3px; border-radius: 3px; background: var(--am-red); margin: 0 0 14px; transform-origin: right center; }
[dir="ltr"] .alaa-hero-line { transform-origin: left center; }
.am-ready .alaa-hero-slide.am-active .alaa-hero-line { animation: am-grow .6s var(--am-ease) .35s both; }
@keyframes am-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.alaa-hero-cta { position: relative; overflow: hidden; isolation: isolate; }
.alaa-hero-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: translateX(-120%) skewX(-18deg); }
.am-ready .alaa-hero-slide.am-active .alaa-hero-cta::after { animation: am-shine .9s ease-out .8s 1 both; }
@keyframes am-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }

/* 3. Section reveals: fade-up 16 px, 60 ms stagger (--i set by JS) */
.am-ready .am-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--am-ease), transform .5s var(--am-ease); transition-delay: calc(min(var(--i, 0), 8) * 60ms); }
.am-ready .am-reveal.is-in { opacity: 1; transform: none; }
.am-ready .am-reveal.am-instant { transition: none; }

/* 4. «اختار لونك» cards */
.alaa-color-card { transition: border-color .15s ease-out, box-shadow .25s ease-out, transform .25s var(--am-ease); }
.alaa-color-card img { transition: transform .35s var(--am-ease); }
.alaa-color-dot { transition: box-shadow .25s ease-out; }
@media (hover: hover) {
    .alaa-color-card:hover, .alaa-color-card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
    .alaa-color-card:hover img, .alaa-color-card:focus-visible img { transform: scale(1.04); }
    .alaa-color-card:hover .alaa-color-dot, .alaa-color-card:focus-visible .alaa-color-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--st); }
}

/* 5. Product cards: image zoom + shadow, CTA lifts 6 px, skeleton shimmer while the image loads */
.aiz-card-box { transition: box-shadow .25s ease-out; }
.aiz-card-box .product-main-image { transition: transform .35s var(--am-ease); }
.aiz-card-box .aiz-p-hov-icon, .aiz-card-box .ap-card-cta { transition: transform .25s var(--am-ease); }
@media (hover: hover) {
    .aiz-card-box:hover { box-shadow: 0 10px 26px rgba(0,0,0,.09); }
    .aiz-card-box:hover .product-main-image { transform: scale(1.05); }
    .aiz-card-box:hover .aiz-p-hov-icon, .aiz-card-box:hover .ap-card-cta { transform: translateY(-6px); }
}
.alaa-card-media { position: relative; }
/* one ::before (painted under the image / badges, which come later in the tree), wide gradient sliding by transform */
.alaa-card-media::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; pointer-events: none;
    background: linear-gradient(100deg, #f1f1f3 40%, #fafafb 50%, #f1f1f3 60%); animation: am-shimmer 1.3s ease-in-out infinite; }
.alaa-card-media:has(.product-main-image.lazyloaded)::before,
.alaa-card-media:has(.product-main-image:not(.lazyload))::before { display: none; }
@keyframes am-shimmer { from { transform: translateX(-33.33%); } to { transform: translateX(33.33%); } }
/* the CMS shows a placeholder until lazysizes swaps the real image: show the shimmer instead, then fade the image in */
.am-ready .alaa-card-media .product-main-image { transition: opacity .3s ease-out, transform .35s var(--am-ease); }
.am-ready .alaa-card-media .product-main-image.lazyload, .am-ready .alaa-card-media .product-main-image.lazyloading { opacity: 0; }

/* 6. Brand logos: grayscale → colour on hover / focus (colour by default on touch screens) */
@media (hover: hover) {
    .ah-brand img { filter: grayscale(1); opacity: .8; transition: filter .25s ease-out, opacity .25s ease-out; }
    .ah-brand:hover img, .ah-brand:focus-visible img { filter: none; opacity: 1; }
}

/* 7. Count-up numbers keep their width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* 8. Product page: 200 ms crossfade when the colour images change, price bump, cart badge bump + toast */
.am-swapped .ap-slide img { animation: am-fade .2s ease-out both; }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
.am-price-bump { display: inline-block; animation: am-bump .35s var(--am-ease); }
@keyframes am-bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cart-count.am-bump, #cart_items_sidenav.am-bump { display: inline-block; animation: am-bump .45s var(--am-ease); }

.am-toast { position: fixed; z-index: 1080; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0;
    display: flex; align-items: center; gap: 10px; background: #1C1D1F; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .25s ease-out, transform .25s var(--am-ease); pointer-events: none; }
.am-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.am-toast svg { flex: 0 0 auto; color: #4ADE80; }
@media (min-width: 1200px) { .am-toast { bottom: 32px; } }

/* lighter on mobile: shorter distances, softer zoom */
@media (max-width: 767.98px) {
    .am-ready .am-reveal { transform: translateY(10px); }
    @keyframes am-kenburns { from { transform: scale(1); } to { transform: scale(1.03); } }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .am-reveal { opacity: 1 !important; transform: none !important; }
    .alaa-stitch-reveal { transform: none !important; }
    .alaa-card-media::before { animation: none; }
}