/* MASTER-PACK 0.7.102 — Yucca-referenced second motion pass.
 * Progressive enhancement only. No wheel interception, no vertical scroll snapping,
 * no layout-coupled scroll scenes. The 0.7.101 structure remains authoritative.
 */

:root {
    --mp102-ease: cubic-bezier(.16, 1, .3, 1);
    --mp102-ease-soft: cubic-bezier(.22, .78, .22, 1);
    --mp102-fast: 420ms;
    --mp102-medium: 760ms;
    --mp102-slow: 1080ms;
}

/* Cross-document navigation polish where the browser supports native View Transitions.
 * Unsupported browsers simply ignore this block. Navigation is never delayed by JS. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: mp102-page-old 180ms ease-out both;
}

::view-transition-new(root) {
    animation: mp102-page-new 520ms var(--mp102-ease) both;
}

/* --------------------------------------------------------------------------
   HERO — stronger editorial title reveal, same existing carousel mechanics
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp-design-0799 .mp-hero-slide.is-active h1 {
    animation: mp102-hero-title 920ms var(--mp102-ease) .05s both !important;
}

.mp-motion-07102 .mp-design-0799 .mp-hero-slide.is-active .mp-eyebrow {
    animation: mp102-rise 620ms var(--mp102-ease) both !important;
}

.mp-motion-07102 .mp-design-0799 .mp-hero-slide.is-active .mp-lead {
    animation: mp102-rise 720ms var(--mp102-ease) .13s both !important;
}

.mp-motion-07102 .mp-design-0799 .mp-hero-slide.is-active .mp-hero-actions {
    animation: mp102-rise 720ms var(--mp102-ease) .21s both !important;
}

/* --------------------------------------------------------------------------
   SEQUENCED TEXT / CONTENT REVEALS
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp-design-0799 .mp102-sequence.mp-motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.mp-motion-07102 .mp-design-0799 .mp102-sequence .mp102-seq-item {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    clip-path: inset(0 0 14% 0);
    transition:
        opacity 520ms ease calc(var(--mp102-order, 0) * 72ms),
        transform 780ms var(--mp102-ease) calc(var(--mp102-order, 0) * 72ms),
        clip-path 780ms var(--mp102-ease) calc(var(--mp102-order, 0) * 72ms);
    will-change: transform, opacity, clip-path;
}

.mp-motion-07102 .mp-design-0799 .mp102-sequence :is(h1, h2, h3).mp102-seq-item {
    transform: translate3d(0, 30px, 0);
    clip-path: inset(0 0 92% 0);
}

.mp-motion-07102 .mp-design-0799 .mp102-sequence.is-mp102-visible .mp102-seq-item {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   IMAGE MASK REVEALS — clip + restrained scale, never layout movement
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp-design-0799 .mp102-mask {
    overflow: hidden;
    clip-path: inset(6% 0 6% 0 round 2px);
    transition: clip-path 980ms var(--mp102-ease);
    will-change: clip-path;
}

.mp-motion-07102 .mp-design-0799 .mp102-mask > img {
    opacity: .94;
    transform: translate3d(0, 8px, 0) scale(1.055) !important;
    transition:
        opacity 620ms ease,
        transform 1150ms var(--mp102-ease) !important;
    will-change: transform, opacity;
}

.mp-motion-07102 .mp-design-0799 .mp102-mask.is-mp102-visible {
    clip-path: inset(0 0 0 0 round 0);
}

.mp-motion-07102 .mp-design-0799 .mp102-mask.is-mp102-visible > img {
    opacity: 1;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   HORIZONTAL PRODUCT RAILS — focused-card polish inspired by Yucca cards
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide {
    transition: opacity 420ms ease, transform 620ms var(--mp102-ease);
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide .mp-slide-copy > * {
    opacity: .94;
    transform: translate3d(0, 5px, 0);
    transition: opacity 430ms ease, transform 620ms var(--mp102-ease);
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide.mp102-focused .mp-slide-copy > * {
    opacity: 1;
    transform: none;
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide.mp102-focused .mp-slide-copy > *:nth-child(2) {
    transition-delay: 45ms;
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide.mp102-focused .mp-slide-copy > *:nth-child(3) {
    transition-delay: 90ms;
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide.mp102-focused .mp-slide-copy > *:nth-child(n+4) {
    transition-delay: 135ms;
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide .mp-slide-media img {
    transition: transform 950ms var(--mp102-ease), filter 480ms ease !important;
}

.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide.mp102-focused .mp-slide-media img,
.mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide:hover .mp-slide-media img {
    transform: scale(1.02) !important;
}

/* --------------------------------------------------------------------------
   LINKS / CTA MICROINTERACTIONS
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp-design-0799 :is(.mp-text-link, .mp-product-detail-link) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mp-motion-07102 .mp-design-0799 :is(.mp-text-link, .mp-product-detail-link)::after {
    content: '↗';
    display: inline-block;
    font-size: .92em;
    line-height: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 320ms var(--mp102-ease);
}

.mp-motion-07102 .mp-design-0799 :is(.mp-text-link, .mp-product-detail-link):hover::after,
.mp-motion-07102 .mp-design-0799 :is(.mp-text-link, .mp-product-detail-link):focus-visible::after {
    transform: translate3d(3px, -3px, 0);
}

.mp-motion-07102 .mp-design-0799 :is(.mp-button, .mp-btn, .mp-header-cta, .mp-map-load) {
    transition:
        transform 340ms var(--mp102-ease),
        box-shadow 340ms ease,
        color 260ms ease,
        background 260ms ease !important;
}

/* --------------------------------------------------------------------------
   MARQUEE — retain existing content but refine the editorial edge treatment
   -------------------------------------------------------------------------- */
.mp-motion-07102 .mp0799-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.mp-motion-07102 .mp0799-marquee-track {
    animation-duration: 31s;
}

/* --------------------------------------------------------------------------
   RESPONSIVE / REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .mp-motion-07102 .mp-design-0799 .mp102-sequence .mp102-seq-item {
        transform: translate3d(0, 16px, 0);
        transition-duration: 460ms, 680ms, 680ms;
    }

    .mp-motion-07102 .mp-design-0799 .mp102-sequence :is(h1, h2, h3).mp102-seq-item {
        transform: translate3d(0, 22px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .mp-motion-07102 .mp-design-0799 .mp102-sequence .mp102-seq-item,
    .mp-motion-07102 .mp-design-0799 .mp102-mask,
    .mp-motion-07102 .mp-design-0799 .mp102-mask > img,
    .mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide,
    .mp-motion-07102 .mp-design-0799 [data-mp-slider] .mp-slide .mp-slide-copy > *,
    .mp-motion-07102 .mp-design-0799 :is(.mp-text-link, .mp-product-detail-link)::after {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}

@keyframes mp102-rise {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes mp102-hero-title {
    from {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
        clip-path: inset(0 0 96% 0);
    }
    to {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes mp102-page-old {
    to { opacity: .96; transform: scale(.997); }
}

@keyframes mp102-page-new {
    from { opacity: .72; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}