/* ============================================================
   styles/hero-bg.css
   Dynamic, admin-managed hero background rotation.

   Layers live in a horizontal track that SLIDES (translateX),
   the same mechanic as the "4-step" phone carousel in hero.css —
   swipeable, with a story-style segmented progress bar driving/
   showing which one is active, plus a slow Ken-Burns zoom on
   whichever photo is currently in view. An optional caption chip
   names the store/offer being shown.
   ============================================================ */

.hero__bg-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Above .hero::after's darkening scrim (z-index:1, styles/hero.css) —
       that scrim was tuned for the old single full-bleed image; now that
       the backdrop darkens itself (its own blur/brightness filter) and
       the card is meant to show the photo at true brightness, sitting
       underneath that scrim just washed both out for no reason. */
    z-index: 2;
    /* Force LTR so translateX math stays consistent regardless of the
       page's RTL direction — same convention used by .hero__slides-wrap. */
    direction: ltr;
}

.hero__bg-stack {
    display: flex;
    height: 100%;
    direction: ltr;
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
}

.hero__bg-layer {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Ambient backdrop — same photo, blurred + darkened + slightly
   scaled up (hides the soft blur edge) so it can safely fill the
   whole hero without anyone caring that it's cropped: it's texture,
   not content. The Ken-Burns zoom lives here, never on the card. ── */
.hero__bg-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(26px) brightness(0.55) saturate(1.15);
    transform: scale(1.15);
    will-change: transform;
}
.hero__bg-layer.active .hero__bg-backdrop {
    animation-name: heroKenBurns;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* ── The card — this is where the actual photo lives, always shown
   in full. Sized to the image's own aspect ratio (object-fit: contain
   inside a content-hugging box), capped so it never outgrows the
   hero, so there is never a crop AND never a letterbox bar either.
   Sized as large as the hero comfortably allows (94% / 88%), leaving
   just enough margin for the progress bar and bottom badges. ── */
.hero__bg-card {
    position: relative;
    z-index: 1;
    display: inline-flex;
    max-width: 94%;
    max-height: 88%;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.09);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
    animation: heroCardGlow 3.2s ease-in-out infinite;
}
.hero__bg-layer.active .hero__bg-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.15s;
}
.hero__bg-card .hero__bg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: saturate(1.08) contrast(1.04) brightness(1.03);
}

/* ── Fallback modifier — used only on the single static default image
   (no backgrounds configured in لوحة الإدارة yet). That one has no
   "original photo" to protect from cropping the way admin-uploaded
   photos do, so it goes back to filling the whole hero edge-to-edge
   like before — but keeps the same glow/shine/logo treatment as
   every admin card, so it never looks like a lesser, unfinished state. ── */
.hero__bg-card--fallback {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.hero__bg-card--fallback .hero__bg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
}

/* Soft pulsing orange glow around the card border — the "flash". */
@keyframes heroCardGlow {
    0%, 100% {
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 0 rgba(255, 92, 0, 0);
    }
    50% {
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 146, 61, 0.35), 0 0 26px 4px rgba(255, 92, 0, 0.45);
    }
}

/* Diagonal shine sweep across the card, on a loop — a quick glare
   that reads as "premium foil card", not a blinking alert. */
.hero__bg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.32) 48%,
        rgba(255, 255, 255, 0.05) 56%,
        transparent 72%);
    transform: translateX(-130%);
    animation: heroCardShine 4.5s ease-in-out infinite;
}
@keyframes heroCardShine {
    0%   { transform: translateX(-130%); }
    12%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

/* Delivo logo badge, bottom corner of every card — a small rounded
   chip so it reads as a mark, not a watermark stamped over the photo. */
.hero__bg-card::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset-inline-end: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
    border-radius: 13px;
    background: rgba(10, 10, 15, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    background-image: url('../assets/delivo-logo-badge.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 68%;
}

@media (min-width: 900px) {
    .hero__bg-card::after { width: 72px; height: 72px; inset-inline-end: 18px; bottom: 18px; }
}

@keyframes heroKenBurns {
    from { transform: scale(1.15); }
    to   { transform: scale(1.24); }
}

/* ── Story-style progress bar — thin strip glued to the very
   top edge, so it never competes with the online-counter chip
   that sits a little lower. Tap a segment to jump to it. ──── */
.hero__bg-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
}
.hero__bg-progress__seg {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}
.hero__bg-progress__seg i {
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
}
.hero__bg-progress__seg.done i { width: 100%; transition: none; }
.hero__bg-progress__seg.active i { transition-property: width; transition-timing-function: linear; }

/* ── Card caption — the tag/title configured in لوحة الإدارة, baked
   right onto the card itself (same visual language as the admin's own
   live preview) instead of a separate hero-level element, so what you
   set is unmistakably what's shown, on the exact photo it belongs to. ── */
.hero__bg-card-caption {
    position: absolute;
    z-index: 4;
    inset-inline-start: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 7px 14px 7px 8px;
    color: #fff;
    pointer-events: none;
}
.hero__bg-card-caption__tag {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--clr-orange);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.hero__bg-card-caption__title {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cards that link somewhere (قسم المتاجر / رابط مخصص) get a pointer
   cursor and a small lift on hover — a plain decorative card (بدون
   رابط) stays inert, no hover affordance to click on nothing. */
.hero__bg-card--link {
    cursor: pointer;
}
.hero__bg-card--link:hover {
    transform: translateY(-2px);
}
.hero__bg-layer.active .hero__bg-card--link:hover {
    transform: translateY(-2px) scale(1);
}

/* ── "اطلب" CTA button — the actual click target for a linked card,
   instead of the whole photo being tappable. Centered along the same
   bottom edge as the caption (start) and the logo badge (end), so all
   three sit on one clean row without colliding. ── */
.hero__bg-card-cta {
    position: absolute;
    z-index: 4;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--clr-orange);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(255, 92, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hero__bg-card-cta:hover {
    background: var(--clr-orange-dim, #cc4800);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 92, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.16);
}
.hero__bg-card-cta:active {
    transform: translateX(-50%) scale(0.96);
}
.hero__bg-card-cta svg {
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .hero__bg-card-cta { font-size: 0.88rem; padding: 9px 20px; bottom: 76px; }
}

/* ── WhatsApp-branded variant — distinct green identity + a soft
   pulsing ring so it reads instantly as "chat now", not just another
   orange order button. ─────────────────────────────────────────── */
.hero__bg-card-cta--whatsapp {
    position: absolute; /* re-affirm — sits alongside the shared rule above */
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 6px 18px rgba(18, 140, 126, 0.5), 0 0 0 1px rgba(255,255,255,0.14);
}
.hero__bg-card-cta--whatsapp:hover {
    background: linear-gradient(135deg, #22c35e, #0f7a6c);
    box-shadow: 0 8px 22px rgba(18, 140, 126, 0.6), 0 0 0 1px rgba(255,255,255,0.18);
}
.hero__bg-card-cta__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25D366;
    opacity: 0.55;
    animation: heroCtaPulse 2.2s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes heroCtaPulse {
    0%   { transform: scale(1);    opacity: 0.5; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__bg-card-cta__pulse { animation: none; display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__bg-stack { transition: none; }
    .hero__bg-layer.active .hero__bg-backdrop { animation: none; }
    .hero__bg-card { transition: none; animation: none; }
    .hero__bg-card::before { animation: none; display: none; }
    .hero__bg-card--link:hover { transform: none; }
}

/* The backdrop is always full-bleed cover (texture, safe to crop);
   the card image is always fully visible (contain, never cropped) —
   both apply at every breakpoint, mobile included. */