/* ==========================================================================
   mySeraph Living — motion layer
   Loaded last. Owns every transition/animation so motion stays one system:
   ease-out for things entering or responding, no overshoot, UI under 250ms,
   longer only for the rare staged page entrance. Hover motion is gated to
   real pointers; reduced motion keeps opacity, drops movement.
   ========================================================================== */

/* ---------- Page to page: a quiet crossfade (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: var(--ease);
}

/* ---------- Buttons: color on hover, a firm press, no growing ---------- */
.btn,
.btn--primary,
.btn--ghost,
.btn--danger,
.btn--light {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-press);
    transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--ease-out);
}
.btn:hover,
.btn--primary:hover,
.btn--ghost:hover,
.btn--danger:hover { transform: none; }
.btn--primary:hover { box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2); }
.btn:active,
.btn--primary:active,
.btn--danger:active,
.btn--ghost:active { transform: scale(0.96); }
.btn .arrow { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover .arrow { transform: translateX(3px); }
}
@media not ((hover: hover) and (pointer: fine)) {
    .btn:hover .arrow { transform: none; }
}

/* Loading: the label steps back, a fast spinner takes its place. Width never changes. */
.btn.is-loading::after { animation-duration: 0.55s; }

/* Other pressables get the same tactile response */
.variant-opt,
.qty button,
.header__tool,
.card__wishlist,
.cat-tile {
    transition-property: background-color, border-color, color, opacity, transform;
    transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-press);
    transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--ease-out);
}
.variant-opt:active,
.qty button:active,
.header__tool:active,
.card__wishlist:active { transform: scale(0.96); }

/* ---------- Product cards: still card, the image does the talking ---------- */
.card {
    transition-property: border-color;
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease);
}
.card:hover { transform: none; box-shadow: none; }
.card__media img,
.card__media .alt {
    transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out), scale 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .card:hover { border-color: var(--border-strong); }
    .card:hover .card__media img { transform: scale(1.03); }
}
@media not ((hover: hover) and (pointer: fine)) {
    .card:hover .card__media img { transform: none; }
    .hero__image-tile:hover,
    .hero__image-tile:hover .hero__image-img { transform: none; }
}

/* ---------- Image loading: calm placeholder, image settles in ---------- */
.skeleton,
.card__skeleton {
    animation: none;
    background: var(--surface);
}
.card__media img[data-card-img] { scale: 1.015; }
.card__media img[data-card-img].is-loaded { scale: 1; }
.js [data-fade-img] { opacity: 0; scale: 1.015; transition: opacity 0.5s var(--ease-out), scale 0.7s var(--ease-out); }
.js [data-fade-img].is-loaded { opacity: 1; scale: 1; }

/* ---------- Home hero: first visit per session only ---------- */
@keyframes fbRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fbMaskUp {
    from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(0.18em); }
    to   { opacity: 1; clip-path: inset(0 0 -0.2em 0); transform: none; }
}
@keyframes fbCurtain {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.first-visit .hero [data-hero-eyebrow] { animation: fbRise var(--dur-enter) var(--ease-out) both; }
.first-visit .hero [data-hero-title]   { animation: fbMaskUp 0.8s var(--ease-out) 90ms both; }
.first-visit .hero [data-hero-sub]     { animation: fbRise var(--dur-enter) var(--ease-out) 200ms both; }
.first-visit .hero [data-hero-ctas]    { animation: fbRise var(--dur-enter) var(--ease-out) 280ms both; }
.first-visit .hero .hero__image-tile   { animation: fbCurtain 0.9s var(--ease-in-out) both; }
.first-visit .hero .hero__image-tile:nth-child(1) { animation-delay: 360ms; }
.first-visit .hero .hero__image-tile:nth-child(2) { animation-delay: 430ms; }
.first-visit .hero .hero__image-tile:nth-child(3) { animation-delay: 500ms; }
.first-visit .hero .hero__image-tile:nth-child(4) { animation-delay: 570ms; }

/* ---------- Scroll reveal: grids only, small travel, short stagger ---------- */
.js [data-reveal-grid] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(min(var(--i, 0), 7) * 45ms);
}
.js [data-reveal-grid].is-in > * { opacity: 1; transform: none; }
/* Once shown, children go back to their own hover/transform transitions */
.js [data-reveal-grid].is-done > * { transition-delay: 0s; }

/* ---------- Toast: rises from the edge it lives on, leaves faster ---------- */
.toast {
    transform: translateX(-50%) translateY(calc(100% + var(--sp-6)));
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.hide {
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    transition: transform 0.18s var(--ease-out), opacity 0.18s var(--ease-out);
}

/* ---------- Account dropdown: grows from the button that opened it ---------- */
.header__user-dropdown {
    transform-origin: top right;
    animation: fbPopover 0.16s var(--ease-out);
}
@keyframes fbPopover {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Mobile menu: drawer curve, links follow the panel ---------- */
.mobile-menu { transition: transform 0.42s var(--ease-drawer); }
.mobile-menu__links > * {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.mobile-menu.open .mobile-menu__links > * { opacity: 1; transform: none; }
.mobile-menu.open .mobile-menu__links > :nth-child(1) { transition-delay: 90ms; }
.mobile-menu.open .mobile-menu__links > :nth-child(2) { transition-delay: 120ms; }
.mobile-menu.open .mobile-menu__links > :nth-child(3) { transition-delay: 150ms; }
.mobile-menu.open .mobile-menu__links > :nth-child(4) { transition-delay: 180ms; }
.mobile-menu.open .mobile-menu__links > :nth-child(5) { transition-delay: 210ms; }
.mobile-menu.open .mobile-menu__links > :nth-child(n+6) { transition-delay: 240ms; }

/* ---------- Confirm modal: centered, quick in, quicker out ---------- */
.modal__overlay { transition: opacity 0.2s var(--ease-out); }
.modal__dialog {
    transform: scale(0.96);
    transition: opacity 0.2s var(--ease-out), transform 0.22s var(--ease-out);
}
.modal:not(.is-open) .modal__overlay,
.modal:not(.is-open) .modal__dialog { transition-duration: 0.14s; }

/* ---------- Accordions (product details): height eases open where supported ---------- */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s var(--ease-out), content-visibility 0.3s allow-discrete;
    }
    details[open]::details-content { height: auto; }
}
details summary span:last-child { display: inline-block; transition: transform var(--dur) var(--ease-out); }
details[open] summary span:last-child { transform: rotate(45deg); }

/* ---------- Bag count: a single, small acknowledgement ---------- */
@keyframes fbBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.is-bumped { animation: fbBump 0.36s var(--ease-out); }

/* ---------- Empty states ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
    padding: clamp(48px, 8vw, 96px) var(--sp-6);
    background: var(--surface);
    border-radius: var(--r-comfortable);
}
.empty-state .empty-state__title {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: var(--w-bold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.empty-state .empty-state__body {
    max-width: 40ch;
    margin: var(--sp-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.55;
    text-wrap: pretty;
}
.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}
.empty-state--compact { padding: var(--sp-8) var(--sp-5); }
.empty-state--compact .empty-state__title { font-size: var(--fs-lg); }
.js .empty-state { animation: fbRise 0.4s var(--ease-out) both; }

/* ---------- Reduced motion: keep opacity changes, remove movement ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .first-visit .hero [data-hero-eyebrow],
    .first-visit .hero [data-hero-title],
    .first-visit .hero [data-hero-sub],
    .first-visit .hero [data-hero-ctas],
    .first-visit .hero .hero__image-tile,
    .js .empty-state { animation: none; }
    .js [data-reveal-grid] > *,
    .mobile-menu__links > * { transform: none; transition: opacity 0.2s linear; }
    .js [data-fade-img],
    .card__media img[data-card-img] { scale: 1; }
    .modal__dialog { transform: none; }
    .is-bumped { animation: none; }
}