/**
 * Homepage footer banners (ARKAN-273, "Designer Pieces")
 * Markup and the design's numbers: inc/core/footer-banners.php.
 *
 * Desktop and tablets (768 px and wider) use the 1440 × 482 artboard; phones
 * use the 390-wide one: photo on top, text under it on the band colour.
 * Every layer is placed in % of its photo, so it stays on the product at any
 * width. Type and the small sizes follow the banner's width through --px,
 * one artboard pixel (container units where supported, else viewport units).
 *
 * Motion, speed and timing are the design's. The animation waits until the
 * banner is on screen (.qs-afb--js / .is-live, set by the script after the
 * section) and stays still for visitors who ask for reduced motion.
 */

.qs-afb {
    --afb-u: 1vw;
    position: relative;
    z-index: 1;
    align-self: stretch;
    width: 100%;
    background: #FFFFFF;
    container-type: inline-size;
}

@supports (width: 1cqw) {
    .qs-afb {
        --afb-u: 1cqw;
    }
}

.qs-afb__banner {
    --px: calc(var(--afb-u) * 100 / 1440);
    position: relative;
    overflow: hidden;
}

/* Only the served department's banner; the in-page switch swaps the body class */
body.dept-men .qs-afb__banner[data-gender="women"],
body.dept-women .qs-afb__banner[data-gender="men"] {
    display: none;
}

/* ---- Stages: the photo and everything drawn over it ---- */

.qs-afb__stage {
    position: relative;
}

/* Until the photo has arrived, the stage paints the photo's own band colour
   between its white strips, so the text never sits on white */
.qs-afb__stage--desk {
    aspect-ratio: 1440 / 482;
    background: linear-gradient(to bottom, #FFFFFF var(--strip-top), var(--band) var(--strip-top), var(--band) var(--strip-end), #FFFFFF var(--strip-end));
}

.qs-afb__stage--mob {
    display: none;
    background: linear-gradient(to bottom, #FFFFFF var(--strip-top-m), var(--band) var(--strip-top-m));
}

.qs-afb .qs-afb__photo {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.qs-afb__layer,
.qs-afb__dial,
.qs-afb__hand,
.qs-afb__hub,
.qs-afb__pin,
.qs-afb__dot,
.qs-afb__spark {
    position: absolute;
    pointer-events: none;
}

/* Shine: a brightened copy fades in and out, a brighter copy shows through a sweeping band */
.qs-afb .qs-afb__shine {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.qs-afb__shine--burst {
    filter: var(--burst);
    opacity: 0;
    animation: qsafb-burst 3.2s ease-in-out infinite;
}

.qs-afb .qs-afb__shine--sweep {
    position: absolute;
    top: 0;
    left: 0;
    filter: var(--sweep);
    -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
    mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 160% 0;
    mask-position: 160% 0;
    animation: qsafb-sweep 3.2s ease-in-out infinite;
}

/* Sparkles */
.qs-afb__spark {
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    opacity: 0;
    transform: scale(0);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 240, 225, 0.6));
    animation: qsafb-glint 3.2s ease-out infinite;
}

/* Twinkling dots (Qatar Women) */
.qs-afb__dot {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: qsafb-twinkle 3.2s linear infinite;
}

/* Watch hands: sweep from 12:00 to their angle, then turn at clock speed */
.qs-afb__dial {
    inset: 0;
}

/* Each hand names its own sweep (animation-name in the markup, keyframes at the end of this file). Written
   as longhands: in the shorthand a leading "none" would be read as the fill mode, not the name. */
.qs-afb__hand {
    aspect-ratio: 1;
    transform: rotate(var(--to));
    filter: drop-shadow(calc(1.2 * var(--px)) calc(2 * var(--px)) calc(1.6 * var(--px)) rgba(0, 0, 0, 0.55));
    animation-duration: 2.6s;
    animation-timing-function: cubic-bezier(0.22, 0.9, 0.24, 1);
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.qs-afb__dial--gmt .qs-afb__hand {
    filter: drop-shadow(calc(1.2 * var(--px)) calc(2 * var(--px)) calc(1.6 * var(--px)) rgba(0, 0, 0, 0.6));
}

.qs-afb__hand > span {
    display: block;
    width: 100%;
    height: 100%;
    animation: qsafb-spin var(--turn) linear 3s infinite;
}

.qs-afb__hub,
.qs-afb__pin {
    aspect-ratio: 1;
}

.qs-afb__pin {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.qs-afb__dial svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- Text ---- */

.qs-afb__copy {
    position: absolute;
    top: 6.639%;
    bottom: 0;
    left: 7.6389%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(14 * var(--px));
    width: fit-content;
    max-width: 36.1111%;
    color: #FFFFFF;
    /* The site sets "antialiased"; the design's text is drawn with the default smoothing (Safari on a Mac shows the difference) */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.qs-afb .qs-afb__title {
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: max(15px, calc(21 * var(--px)));
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #FFFFFF;
    animation: qsafb-rise 1s ease-out 0.35s both;
}

/* One line on desktop, as designed (the text keeps its old line-break span) */
.qs-afb .afb-newline {
    display: inline;
}

.qs-afb .qs-afb__list {
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--px));
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: max(11px, calc(12 * var(--px)));
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
    color: #FFFFFF;
}

.qs-afb .qs-afb__list li {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--px));
    margin: 0;
    padding: 0;
    animation: qsafb-rise 0.8s ease-out 0.7s both;
}

.qs-afb .qs-afb__list li:nth-child(2) {
    animation-delay: 0.85s;
}

.qs-afb .qs-afb__list li:nth-child(3) {
    animation-delay: 1s;
}

.qs-afb .qs-afb__list li::before {
    content: '';
    flex: none;
    width: max(4px, calc(5 * var(--px)));
    height: max(4px, calc(5 * var(--px)));
    border-radius: 50%;
    background: #FFFFFF;
}

/* Arabic: the site's Arabic face, text running right to left */
[dir="rtl"] .qs-afb .qs-afb__title {
    font-family: 'IBM Plex Sans Arabic', Georgia, serif;
}

[dir="rtl"] .qs-afb .qs-afb__list {
    font-family: 'IBM Plex Sans Arabic', Inter, sans-serif;
}

/* ---- Phones: the 390-wide artboard ---- */

@media (max-width: 767px) {
    .qs-afb__banner {
        --px: calc(var(--afb-u) * 100 / 390);
        min-height: calc(470 * var(--px));
        background: var(--band);
    }

    .qs-afb__stage--desk {
        display: none;
    }

    .qs-afb__stage--mob {
        display: block;
        aspect-ratio: var(--ratio);
    }

    .qs-afb__copy {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        gap: calc(12 * var(--px));
        width: auto;
        max-width: none;
        /* The design's box is 470 tall; the bottom padding only matters when the text runs longer */
        padding: calc(var(--gap) * var(--px)) calc(24 * var(--px)) calc(16 * var(--px));
    }

    .qs-afb .qs-afb__title {
        font-size: max(14px, calc(17 * var(--px)));
        line-height: 1.3;
        animation-name: qsafb-rise-m;
    }

    .qs-afb .qs-afb__list {
        gap: calc(6 * var(--px));
        font-size: max(10px, calc(11 * var(--px)));
    }

    .qs-afb .qs-afb__list li {
        gap: calc(10 * var(--px));
        animation-name: qsafb-rise-m;
    }

    .qs-afb .qs-afb__list li::before {
        width: max(3px, calc(4 * var(--px)));
        height: max(3px, calc(4 * var(--px)));
    }

    .qs-afb__spark {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 240, 225, 0.6));
    }

    .qs-afb__dot {
        box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.85);
    }

    .qs-afb__hand {
        filter: drop-shadow(calc(0.9 * var(--px)) calc(1.4 * var(--px)) calc(1.1 * var(--px)) rgba(0, 0, 0, 0.55));
    }

    .qs-afb__dial--gmt .qs-afb__hand {
        filter: drop-shadow(calc(0.9 * var(--px)) calc(1.4 * var(--px)) calc(1.1 * var(--px)) rgba(0, 0, 0, 0.6));
    }
}

/* ---- When it moves ---- */

/* Held until the banner is on screen and its photo has arrived; paused again when it leaves the screen.
   The hands wait out of sight, so they only ever sweep over the watch. */
.qs-afb--js:not(.is-live) *,
.qs-afb--js .qs-afb__banner:not(.is-ready) * {
    animation-play-state: paused !important;
}

.qs-afb--js .qs-afb__banner:not(.is-ready) .qs-afb__dial {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .qs-afb * {
        animation: none !important;
    }
}

@keyframes qsafb-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes qsafb-rise-m {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes qsafb-burst {
    0%, 10% { opacity: 0; }
    24% { opacity: 1; }
    40% { opacity: 0.7; }
    58%, 100% { opacity: 0; }
}

@keyframes qsafb-sweep {
    0%, 12% { -webkit-mask-position: 160% 0; mask-position: 160% 0; }
    48%, 100% { -webkit-mask-position: -60% 0; mask-position: -60% 0; }
}

@keyframes qsafb-glint {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    4% { transform: scale(1) rotate(6deg); opacity: 1; }
    9% { transform: scale(0.8) rotate(14deg); opacity: 0.9; }
    14% { transform: scale(0) rotate(28deg); opacity: 0; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes qsafb-twinkle {
    0%, 100% { opacity: 0; }
    3% { opacity: 1; }
    6% { opacity: 0.2; }
    9% { opacity: 0.9; }
    12% { opacity: 0; }
}

/* The hands' sweeps from 12:00, both ends written out as in the design: with only a start given, WebKit
   reads the end as a matrix and turns the hand the short way round */
@keyframes qsafb-hand-302-5 { from { transform: rotate(0deg); } to { transform: rotate(302.5deg); } } /* Qatar Men: hour */
@keyframes qsafb-hand-410-3 { from { transform: rotate(0deg); } to { transform: rotate(410.3deg); } } /* minute */
@keyframes qsafb-hand-935 { from { transform: rotate(0deg); } to { transform: rotate(935deg); } }     /* second */
@keyframes qsafb-hand-166-2 { from { transform: rotate(0deg); } to { transform: rotate(166.2deg); } } /* Dubai Men: 24-hour */
@keyframes qsafb-hand-303-7 { from { transform: rotate(0deg); } to { transform: rotate(303.7deg); } } /* hour */
@keyframes qsafb-hand-410-9 { from { transform: rotate(0deg); } to { transform: rotate(410.9deg); } } /* minute */
@keyframes qsafb-hand-960-3 { from { transform: rotate(0deg); } to { transform: rotate(960.3deg); } } /* second */

/* Then a full turn at clock speed (--turn: 1 min, 1 h, 12 h, 24 h) */
@keyframes qsafb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}