/* Faithful Apple Watch presentation for the HRM Battery product pages. */
.watch-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.8rem, 2vw, 1.35rem);
    min-width: 0;
    padding: clamp(1.15rem, 2.5vw, 1.85rem) clamp(.35rem, 1vw, .8rem);
}

.watch-device {
    position: relative;
    isolation: isolate;
    width: min(29%, 11.5rem);
    flex: 0 1 11.5rem;
    margin: 0;
    padding: clamp(5px, .65vw, 8px);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 23% / 19.5%;
    background:
        linear-gradient(105deg,
            #8f9396 0%,
            #3f4245 4%,
            #101113 16%,
            #050607 50%,
            #202225 84%,
            #8b8e91 97%,
            #393c3f 100%);
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, .38),
        inset -1px -1px 1px rgba(0, 0, 0, .9),
        0 .35rem .65rem rgba(0, 0, 0, .18),
        0 1.35rem 2.5rem rgba(0, 0, 0, .3);
}

/* Knurled Digital Crown, seen from the front/side. */
.watch-device::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 25%;
    right: clamp(-.53rem, -.72vw, -.38rem);
    width: clamp(.42rem, .68vw, .56rem);
    height: 14%;
    min-height: 1rem;
    border: 1px solid #111315;
    border-left: 0;
    border-radius: 0 52% 52% 0;
    background:
        linear-gradient(90deg, #1b1d1f, #777b7e 58%, #2c2f31),
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .7) 2px 3px);
    background-blend-mode: multiply;
    box-shadow: .16rem .14rem .28rem rgba(0, 0, 0, .34);
}

/* The flush side button sits below the crown. */
.watch-device::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 51%;
    right: clamp(-.3rem, -.42vw, -.2rem);
    width: clamp(.2rem, .38vw, .3rem);
    height: 17%;
    border: 1px solid #111315;
    border-left: 0;
    border-radius: 0 .24rem .24rem 0;
    background: linear-gradient(90deg, #17191b, #676b6e 72%, #292c2e);
    box-shadow: .12rem .12rem .24rem rgba(0, 0, 0, .28);
}

.watch-device__screen {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #020303;
    border-radius: 20.5% / 17.3%;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        inset 0 0 .7rem rgba(255, 255, 255, .06);
}

/* Subtle curved-glass reflection without obscuring the app UI. */
.watch-device__screen::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(126deg, rgba(255,255,255,.13), transparent 17% 76%, rgba(255,255,255,.035)),
        radial-gradient(circle at 10% 8%, rgba(255,255,255,.08), transparent 24%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: none;
}

.watch-device img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 416 / 496;
    object-fit: contain;
}

.watch-stack--feature .watch-device {
    border-color: rgba(255, 255, 255, .42);
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, .38),
        inset -1px -1px 1px rgba(0, 0, 0, .9),
        0 .3rem .55rem rgba(30, 28, 23, .16),
        0 1.15rem 2.2rem rgba(30, 28, 23, .24);
}

@media (max-width: 680px) {
    .watch-stack {
        width: 100%;
        justify-content: flex-start;
        gap: 1.2rem;
        overflow-x: auto;
        padding: 1.8rem max(1rem, calc((100% - 18rem) / 2));
        scroll-padding-inline: 1rem;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .watch-stack::-webkit-scrollbar { display: none; }

    .watch-device {
        width: min(68vw, 13rem);
        max-width: none;
        flex: 0 0 min(68vw, 13rem);
        scroll-snap-align: center;
    }

    .watch-stack--feature {
        width: calc(100% + 2rem);
        margin-inline: -1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .watch-stack { scroll-behavior: auto; }
}

/* The hero stack carried five watches in one flat row, each squeezed to under a
   third of the column - small enough that the battery rings, which are the whole
   point of the app, were unreadable. They overlap and fan instead, the way the
   homepage hero fans its phones, so each one can be bigger than its share of the
   width. */
.product-hero .watch-stack {
    justify-content: center;
    gap: 0;
    padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

.product-hero .watch-stack .watch-device {
    /* Sized as a share of the stack, not in rem: five fixed-width watches with a
       fixed overlap add up to nearly twice the media column and the last one gets
       clipped off the page. 26% each with an 8% overlap lands just under 100%. */
    width: 26%;
    flex: 0 0 auto;
    margin-inline: -4%;
    /* Held as parts rather than one transform so hover can grow a watch without
       having to restate the lift and rotation that place it in the fan. */
    --lift: 0%;
    --scale: 1;
    --tilt: 0deg;
    transform: translateY(var(--lift)) scale(calc(var(--scale) * var(--grow, 1))) rotate(var(--tilt));
    transition: transform 260ms var(--ease-out, ease);
}

/* Middle forward and largest, the pair beside it a step back, the outer pair a
   step further - a hand of cards rather than a row of stamps. */
.product-hero .watch-stack .watch-device:nth-child(1) { z-index: 1; --lift: 6%; --scale: 0.86; --tilt: -7deg; }
.product-hero .watch-stack .watch-device:nth-child(2) { z-index: 2; --lift: 1%; --scale: 0.94; --tilt: -3.5deg; }
.product-hero .watch-stack .watch-device:nth-child(3) { z-index: 3; --lift: -4%; --scale: 1.06; }
.product-hero .watch-stack .watch-device:nth-child(4) { z-index: 2; --lift: 1%; --scale: 0.94; --tilt: 3.5deg; }
.product-hero .watch-stack .watch-device:nth-child(5) { z-index: 1; --lift: 6%; --scale: 0.86; --tilt: 7deg; }

/* Pointing at a watch brings that one forward. The rule here used to hang off the
   stack rather than the watch and set transform:none on all five, which shrank the
   middle one from 1.06 to 1 - it flattened the fan instead of picking a face out
   of it. --grow keeps each watch's own place in the hand while it is enlarged. */
@media (hover: hover) and (pointer: fine) {
    .product-hero .watch-stack .watch-device:hover { z-index: 4; --grow: 1.2; }
}

@media (max-width: 680px) {
    /* No room to fan; the row scrolls instead, upright and full size. */
    .product-hero .watch-stack { justify-content: flex-start; overflow-x: auto; gap: .6rem; padding-inline: 1rem; }
    .product-hero .watch-stack .watch-device { width: 9.5rem; margin-inline: 0; transform: none; }
}

/* After the fan, not with the scroll-behaviour rule above it: the transition is
   declared further down the file at the same specificity, so an earlier override
   would simply lose. The watch still grows on hover, it just arrives at once. */
@media (prefers-reduced-motion: reduce) {
    .product-hero .watch-stack .watch-device { transition: none; }
}