/* Mum's Bake and Coffee — custom styles layered on top of Tailwind tokens */

html {
    background-color: #fff8e6;
}
body {
    -webkit-font-smoothing: antialiased;
}

/* Animated marigold "bakery glow" background (storefront) */
.animated-aurora {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background:
        radial-gradient(42% 52% at 15% 18%, rgba(255, 201, 71, 0.55), transparent 62%),
        radial-gradient(46% 56% at 85% 12%, rgba(245, 184, 0, 0.42), transparent 62%),
        radial-gradient(52% 60% at 78% 88%, rgba(255, 219, 77, 0.48), transparent 62%),
        radial-gradient(46% 56% at 18% 92%, rgba(255, 176, 32, 0.38), transparent 62%),
        linear-gradient(125deg, #fff7e0, #fdeeb8 55%, #ffe9a8);
    background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 100% 100%;
    animation: aurora-drift 26s ease-in-out infinite;
}
@keyframes aurora-drift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
    50%      { background-position: 100% 50%, 0% 60%, 0% 40%, 100% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .animated-aurora { animation: none; }
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Rustic bistro dotted leader between item name and price */
.dotted-leader {
    flex-grow: 1;
    border-bottom: 2px dotted #cdc6b5;
    margin: 0 8px 4px 8px;
}

/* Soft "floury" shadows that mimic paper on a wooden table */
.floury-shadow {
    box-shadow: 0 4px 20px -2px rgba(119, 87, 77, 0.05);
}
.floury-shadow-hover {
    transition: box-shadow .3s ease, transform .3s ease;
}
.floury-shadow-hover:hover {
    box-shadow: 0 10px 30px -5px rgba(119, 87, 77, 0.12);
    transform: translateY(-2px);
}
.card-shadow {
    box-shadow: 0 10px 30px -5px rgba(119, 87, 77, 0.05);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-shadow:hover {
    box-shadow: 0 20px 40px -10px rgba(119, 87, 77, 0.12);
    transform: translateY(-2px);
}
.shadow-floury {
    box-shadow: 0 4px 20px -2px rgba(119, 87, 77, 0.05);
}
.custom-shadow {
    box-shadow: 0 10px 30px -10px rgba(119, 87, 77, 0.1);
}

/* Steamy glass navigation */
.glass-nav {
    backdrop-filter: blur(8px);
}

/* Flash toasts */
.flash-toast {
    animation: toast-in .35s ease, toast-out .4s ease 4s forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(-12px); }
}

/* ------------------------------------------------------------------ */
/* Grand-opening celebration: confetti, banner, invitation modal       */
/* ------------------------------------------------------------------ */
.confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    top: -12vh;
    opacity: .95;
    will-change: transform;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-12vh) rotateZ(0deg); }
    100% { transform: translateY(112vh) rotateZ(720deg); }
}

.grand-opening-banner {
    animation: go-bounce 2.4s ease-in-out infinite;
}
@keyframes go-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.go-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.go-modal.is-hidden { display: none; }
.go-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 24, .6);
    backdrop-filter: blur(4px);
}
.go-modal-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow: hidden;            /* no inner scroll — content always fits */
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 30px 60px -15px rgba(119, 87, 77, .45);
    animation: go-pop .4s cubic-bezier(.2, .9, .3, 1.3);
}
.go-modal-img {
    display: block;
    width: 100%;
    flex: 1 1 auto;             /* shrink the poster to leave room for buttons */
    min-height: 0;
    object-fit: contain;        /* keep the whole poster visible, no crop */
    border-radius: 1rem 1rem 0 0;
}
.go-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .92);
    color: #1c1c18;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.go-modal-close:hover { background: #fff; }
.go-modal-actions {
    flex: 0 0 auto;             /* always visible at the bottom */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 16px 20px 18px;
}
@keyframes go-pop {
    from { opacity: 0; transform: scale(.92) translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .grand-opening-banner { animation: none; }
    .go-modal-card { animation: none; }
}

/* Add-to-cart toast */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 9999px;
    background: #31312c;
    color: #f3f0ea;
    font-weight: 500;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateX(-50%) translateY(140%);
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.cart-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cart-toast.is-error { background: #ba1a1a; color: #fff; }
.cart-toast .material-symbols-outlined { font-size: 22px; }

/* Floating WhatsApp contact button */
.whatsapp-fab {
    background: #25d366;
    animation: wa-pulse 2.6s infinite;
}
.whatsapp-fab:hover { background: #1ebe57; }
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-fab { animation: none; }
}

/* Menu lightbox (Our Menu page) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 28, 24, .85);
    backdrop-filter: blur(4px);
}
.lightbox.is-hidden { display: none; }
.lightbox-img {
    max-width: 100%;
    max-height: 92vh;
    border-radius: .5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .92);
    color: #1c1c18;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.lightbox-close:hover { background: #fff; }

/* Section reveal — progressive enhancement: hidden only when JS is active,
   so content is always visible if JavaScript is disabled or fails. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}