/* Home page motion: the picture that grows into the product page, and one small touch per
   section. CSS only: nothing to download, nothing for the page's scripts to do. Browsers
   without it show the page as before, and none of it runs for customers who asked their
   phone for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
    /* Tapping a product card: its picture grows into the product page's main picture
       (the card's picture is named in pageswap, Homepage.cshtml; the product page names
       #main-image). Other links get a short cross-fade. */
    @view-transition { navigation: auto; }
    ::view-transition-group(pd-hero) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

    /* ── Small touches, section by section ────────────────────────────────────────
       translate / rotate / scale rather than transform throughout: several of these
       elements already carry a transform (a tilt, a hover lift) that has to stay. */

    /* Pink Friday countdown: the three tiles hop one after the other every few seconds */
    .pf-count-row .pf-tile { animation: hm-tile-hop 6s ease-in-out infinite; }
    .pf-count-row .pf-tile.ye { animation-delay: .15s; }
    .pf-count-row .pf-tile.wh { animation-delay: .3s; }

    /* Shopping list: the category emojis wave, one after the other, every few seconds */
    .sl-cat-chip .sl-cat-emoji { display: inline-block; animation: hm-emoji-wave 6s ease-in-out infinite; }
    .sl-cat-chip:nth-child(2) .sl-cat-emoji { animation-delay: .12s; }
    .sl-cat-chip:nth-child(3) .sl-cat-emoji { animation-delay: .24s; }
    .sl-cat-chip:nth-child(4) .sl-cat-emoji { animation-delay: .36s; }
    .sl-cat-chip:nth-child(5) .sl-cat-emoji { animation-delay: .48s; }
    .sl-cat-chip:nth-child(6) .sl-cat-emoji { animation-delay: .6s; }

    /* Popular products and the health journey: a tab's products rise in when it is chosen */
    .popular-products .pop-tab-panel.pop-tab-active,
    .healthjourney-section .tab-content.tab-active { animation: hm-tab-in .35s cubic-bezier(.2, .8, .2, 1); }
}

/* Mouse only, and not for reduced motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* View All: the arrow darts off to the right and comes back in from the left */
    .dawamain .sec-viewall:hover svg { animation: hm-arrow-go .45s ease-in-out; }

    /* Category cards: a soft pink glow under the lift they already have */
    .cat-card:hover { box-shadow: 0 10px 24px rgba(230, 27, 119, .18); }

    /* Shopping list button: lifts with a pink glow */
    .sl-teaser-btn { transition: background .2s, translate .2s ease, box-shadow .2s ease; }
    .sl-teaser-btn:hover { translate: 0 -2px; box-shadow: 0 8px 20px rgba(228, 0, 109, .3); }

    /* The two promotion banners: lift, and the picture zooms a little inside its frame */
    #promotionsection .col-md-6 > a { display: block; overflow: hidden; border-radius: 12px;
        transition: translate .3s ease, box-shadow .3s ease; }
    #promotionsection .col-md-6 > a img { transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
    #promotionsection .col-md-6 > a:hover { translate: 0 -4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
    #promotionsection .col-md-6 > a:hover img { scale: 1.04; }

    /* Why shop with us: the icon pops and tilts when its line is pointed at */
    .feature-item .tf-icon { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), rotate .3s ease; }
    .feature-item:hover .tf-icon { scale: 1.15; rotate: -8deg; }

    /* Health journey cards: the corner arrow nudges the way it points */
    .healthjourney-card .arrow-link { transition: translate .25s ease; }
    .healthjourney-card:hover .arrow-link { translate: 3px -3px; }
}

/* ── Section titles: one accent each, in its own style ───────────────────────────────
   Get Started waves hello, Recommended For You has a beating heart, Popular's category
   name is underlined with a pink squiggle (drawn again on each tab), and My Health Center
   is marked with a pink highlighter. (New on MYDAWA has its sparkle, Offers its sticker.) */
.dawamain .hm-pink { color: #E61B77; }
.dawamain .hm-wave { display: inline-block; margin-left: 4px; transform-origin: 70% 75%; }
.dawamain .hm-heart { display: inline-block; width: .85em; height: .85em; margin-left: 8px; fill: #E61B77; vertical-align: -.08em; }
.dawamain .hm-squiggle { position: relative; display: inline-block; color: #E61B77; }
.dawamain .hm-squiggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Cpath d='M0 3.5 C4 0 4 0 8 3.5 S12 7 16 3.5' fill='none' stroke='%23E61B77' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 16px 7px repeat-x;
}
.dawamain .hm-marker {
    padding: 0 3px;
    margin: 0 -1px;
    border-radius: 4px;
    color: inherit;
    background: linear-gradient(transparent 52%, rgba(230, 27, 119, .22) 52%, rgba(230, 27, 119, .22) 94%, transparent 94%) 0 0 / 100% 100% no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
    .dawamain .hm-wave { animation: hm-wave 4s ease-in-out infinite; }
    .dawamain .hm-heart { animation: hm-beat 2.4s ease-in-out infinite; }
    .dawamain .hm-squiggle.is-drawn::after { animation: hm-squiggle-draw .7s cubic-bezier(.3, .7, .3, 1) both; }
    .dawamain .hm-marker { animation: hm-marker-sweep 7s cubic-bezier(.4, 0, .2, 1) infinite; }
}
@keyframes hm-wave {
    0%, 60%, 100% { rotate: 0deg; }
    10% { rotate: 16deg; }
    20% { rotate: -8deg; }
    30% { rotate: 16deg; }
    40% { rotate: -4deg; }
    50% { rotate: 10deg; }
}
@keyframes hm-beat {
    0%, 45%, 100% { scale: 1; }
    10% { scale: 1.25; }
    20% { scale: 1; }
    30% { scale: 1.18; }
}
@keyframes hm-squiggle-draw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes hm-marker-sweep {
    0% { background-size: 0% 100%; }
    16%, 88% { background-size: 100% 100%; }
    100% { background-size: 0% 100%; background-position: 100% 0; }
}

@keyframes hm-tile-hop {
    0%, 12%, 100% { translate: 0 0; }
    5% { translate: 0 -6px; }
    9% { translate: 0 1px; }
}
@keyframes hm-emoji-wave {
    0%, 14%, 100% { translate: 0 0; rotate: 0deg; }
    5% { translate: 0 -4px; rotate: -12deg; }
    10% { translate: 0 0; rotate: 8deg; }
}
@keyframes hm-tab-in {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: none; }
}
@keyframes hm-arrow-go {
    0% { translate: 0 0; opacity: 1; }
    45% { translate: 8px 0; opacity: 0; }
    55% { translate: -8px 0; opacity: 0; }
    100% { translate: 0 0; opacity: 1; }
}