/*
  Ceramigeek experience layer — the "living ceramic atelier" interactions.
  Tokens only (black/white/red). Every animation is gated behind prefers-reduced-motion; the static and
  no-JS states are the source of truth. No inline styles anywhere (CSP-safe).
*/

/* =====================================================================================
   Product hand-turn (image-only tilt)
   ===================================================================================== */
.product-card__media {
    perspective: 700px;
}

.product-card__media img {
    transition: transform var(--transition-base);
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
}

.product-card__media.is-turning img {
    transition: transform 60ms linear;
}

/* =====================================================================================
   Favorite maker's stamp
   ===================================================================================== */
.favorite-toggle__btn {
    position: relative; /* positioning context for the stamp ripple ::after */
}

@keyframes cg-stamp {
    0% { transform: scale(1); }
    35% { transform: scale(0.72); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.favorite-toggle__btn.is-stamping {
    animation: cg-stamp 320ms ease-out;
}

.favorite-toggle__btn.is-stamping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    border: 2px solid color-mix(in srgb, var(--cg-red) 60%, transparent);
    animation: cg-stamp-ripple 420ms ease-out forwards;
    pointer-events: none;
}

@keyframes cg-stamp-ripple {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* =====================================================================================
   Add-to-cart "atelier shelf" confirmation
   ===================================================================================== */
.add-to-cart__feedback:not(:empty) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-success-soft);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.add-to-cart__feedback:not(:empty)::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    /* A small ceramic-shelf glyph, inlined as a data URI (no external asset). */
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bc2231' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='9' cy='11' r='3'/%3E%3Cpath d='M15 14V8h4v6'/%3E%3C/svg%3E");
}

/* =====================================================================================
   Mascot help / contact panel
   ===================================================================================== */
.mascot-help {
    position: fixed;
    right: max(var(--space-md), env(safe-area-inset-right));
    bottom: max(var(--space-md), env(safe-area-inset-bottom));
    z-index: var(--z-drawer);
}

.mascot-help__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs);
    background: var(--cg-black);
    color: var(--cg-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* Hide the default <summary> disclosure triangle. */
.mascot-help__trigger::-webkit-details-marker { display: none; }
.mascot-help__trigger { list-style: none; }

.mascot-help__mascot {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    background: var(--cg-white);
    border-radius: var(--radius-pill);
    padding: 3px;
}

.mascot-help__trigger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-md);
}

.mascot-help__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-sm));
    width: min(20rem, calc(100vw - 2 * var(--space-md)));
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--cg-red);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.mascot-help__panel:focus {
    outline: none;
}

.mascot-help__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.mascot-help__title {
    font-size: var(--text-lg);
}

.mascot-help__close {
    border: 0;
    background: transparent;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-muted);
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.mascot-help__close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.mascot-help__intro {
    margin-top: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.mascot-help__list {
    list-style: none;
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.mascot-help__list a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: var(--color-surface-muted);
}

.mascot-help__list a:hover {
    color: var(--cg-red);
}

@media (max-width: 32rem) {
    .mascot-help__trigger-text { display: none; } /* compact bottom-edge control on small screens */
}

/* =====================================================================================
   Reduced motion — disable every optional effect; keep information + CTAs intact.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
    .product-card__media img,
    .product-card__media.is-turning img {
        transition: none;
        transform: none;
    }

    .favorite-toggle__btn.is-stamping,
    .favorite-toggle__btn.is-stamping::after {
        animation: none;
    }
}