/* Movimiento breve: cada interacción confirma una acción concreta. */
body {
    animation: page-in .55s cubic-bezier(.22, 1, .36, 1) both;
}

.announcement {
    animation: announcement-in .7s ease both;
}

.site-header {
    animation: header-in .7s .04s cubic-bezier(.22, 1, .36, 1) both;
}

.intro,
.featured,
.quote,
.site-footer {
    animation: rise-in .7s .14s cubic-bezier(.22, 1, .36, 1) both;
}

.button {
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.button:active {
    transform: translateY(1px) scale(.98);
}

.button-dark:hover {
    box-shadow: 0 8px 18px rgba(48, 37, 31, .16);
}

.product-card {
    transition: border-color .25s ease, box-shadow .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.product-card .product-tag {
    transition: background .2s ease, color .2s ease, transform .25s ease;
}

.product-card:hover .product-tag {
    background: var(--terracotta);
    color: var(--paper);
    transform: translateY(-2px);
}

.product-card .quick-add {
    transition: background .2s ease, box-shadow .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.product-card .quick-add:hover {
    box-shadow: 0 6px 14px rgba(48, 37, 31, .2);
    transform: scale(1.08) rotate(90deg);
}

.product-card .quick-add.added:hover,
.product-card .quick-add.added {
    box-shadow: 0 6px 14px rgba(200, 125, 98, .28);
    transform: scale(1.08);
}

.cart-link.bump .cart-icon {
    animation: cart-bump .45s cubic-bezier(.22, 1, .36, 1);
}

.cart-link.bump #cart-count {
    animation: count-pop .4s cubic-bezier(.22, 1, .36, 1);
}

.cart-toast {
    animation: toast-shadow 2s ease-in-out infinite alternate;
}

.cart-toast.is-visible {
    animation-play-state: running;
}

/* La torta es el gesto vivo de la portada: movimiento lento, casi artesanal. */
.hero-arch {
    background: #d58a91;
    animation: cake-drift 7s ease-in-out infinite;
}

.hero-cake-visual {
    bottom: -10px;
    filter: drop-shadow(0 20px 16px rgba(78, 42, 39, .18));
    height: min(100%, 560px);
    overflow: hidden;
    position: absolute;
    right: -2%;
    width: min(88%, 440px);
    z-index: 1;
    animation: hero-cake-float 6s ease-in-out infinite;
}

.hero-cake-visual img {
    display: block;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    width: 100%;
}

@media (max-width: 700px) {
    .hero-cake-visual {
        bottom: auto;
        height: 360px;
        margin: 44px auto 0;
        position: relative;
        right: auto;
        width: min(92%, 330px);
    }
}

.hero-arch::before {
    background: rgba(255, 235, 231, .24);
}

.cake-bottom {
    background: #d7a27e;
    box-shadow: inset 0 -14px #a9655b;
}

.cake-top {
    background: #fff0e5;
    box-shadow: inset 0 -13px #efc4b5;
    animation: frosting-breathe 4.5s ease-in-out infinite;
}

.cake-top::after {
    background: #f3b7b8;
    border-radius: 50%;
    box-shadow: 22px 8px 0 #f3b7b8, 45px -2px 0 #efaaad;
    content: '';
    height: 13px;
    left: 23%;
    position: absolute;
    top: 12px;
    width: 13px;
}

.berry-one {
    animation: berry-bob 3.4s ease-in-out infinite;
}

.berry-two {
    animation: berry-bob 3.8s .25s ease-in-out infinite;
}

.berry-three {
    animation: berry-bob 3.2s .5s ease-in-out infinite;
}

.hero-sticker {
    animation: sticker-drift 5s .4s ease-in-out infinite;
}

.art-caption {
    color: var(--cacao);
}

@keyframes page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes announcement-in {
    from { opacity: 0; letter-spacing: .04em; }
    to { opacity: 1; letter-spacing: .12em; }
}

@keyframes header-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cart-bump {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-10deg) scale(1.12); }
    70% { transform: rotate(8deg) scale(1.08); }
}

@keyframes count-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@keyframes toast-shadow {
    from { box-shadow: 0 14px 34px rgba(48, 37, 31, .18); }
    to { box-shadow: 0 16px 38px rgba(200, 125, 98, .24); }
}

@keyframes cake-drift {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-6px) rotate(.6deg); }
}

@keyframes hero-cake-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-9px) rotate(1deg); }
}

@keyframes frosting-breathe {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.018); }
}

@keyframes berry-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes sticker-drift {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -4px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}