/* ==========================================================================
   CocoaFeast – custom styles (animations + things Tailwind utilities don't cover)
   ========================================================================== */

html { scroll-behavior: smooth; }
body { background: #fdf6e8; color: #4a2318; -webkit-font-smoothing: antialiased; }

/* ---------- Scroll reveal animations ---------- */
.reveal {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal[data-anim="up"], .reveal:not([data-anim]) { transform: translateY(36px); }
.reveal[data-anim="down"]  { transform: translateY(-30px); }
.reveal[data-anim="left"]  { transform: translateX(-48px); }
.reveal[data-anim="right"] { transform: translateX(48px); }
.reveal[data-anim="zoom"]  { transform: scale(.88); }
.reveal[data-anim="fade"]  { transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero-bg { animation: kenburns 16s ease-in-out infinite alternate; transform-origin: right center; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }

.hero-line { opacity: 0; transform: translateY(28px); animation: heroIn .9s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .3s, background-color .3s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(74,35,24,.35); }
.site-logo { transition: width .35s ease, height .35s ease, transform .35s ease; }
.nav-link { position: relative; padding-bottom: 6px; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: #e8912d; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #4a2318; }

.cart-bump { animation: bump .45s ease; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background-color .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(74,35,24,.45); }
.btn:active { transform: translateY(0); }
.btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 130%; }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Cards ---------- */
.lift { transition: transform .35s ease, box-shadow .35s ease; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 22px 40px -18px rgba(74,35,24,.4); }
.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform .7s ease; }
.lift:hover .zoom-wrap img, .zoom-wrap:hover img { transform: scale(1.07); }

/* size pills */
.size-pill { transition: all .2s ease; }
.size-pill.is-active { background: #e8912d; color: #fff; border-color: #e8912d; font-weight: 600; }

/* ---------- Floating / decorative ---------- */
.float-slow { animation: floaty 5s ease-in-out infinite; }
.float-slower { animation: floaty 7s ease-in-out infinite reverse; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-2deg); } }
.heartbeat { animation: heart 1.6s ease-in-out infinite; display: inline-block; }
@keyframes heart { 0%,100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
.icon-pop { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.group:hover .icon-pop { transform: scale(1.18) rotate(-6deg); }

/* ---------- Image edge fades (blend photo into section colour) ---------- */
.fade-r { -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 62%, transparent 100%); }
.fade-l { -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%); mask-image: linear-gradient(to left, #000 62%, transparent 100%); }
@media (max-width: 1023px) {
  .fade-r, .fade-l { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
}

/* ---------- Accordion ---------- */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-panel > div { overflow: hidden; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item .faq-icon { transition: transform .3s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* ---------- Testimonial slider ---------- */
.snap-row { scroll-snap-type: x mandatory; scrollbar-width: none; }
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: center; }
.dot { transition: all .3s ease; }
.dot.is-active { background: #e8912d; width: 18px; }

/* ---------- Toast ---------- */
.toast { transform: translateY(30px); opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(.22,.61,.36,1); }
.toast.is-show { transform: none; opacity: 1; }

/* ---------- Mobile menu ---------- */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.mobile-menu.is-open { max-height: 460px; }

/* ---------- Form ---------- */
.field { transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: #e8912d; box-shadow: 0 0 0 3px rgba(232,145,45,.2); }
.field.is-error { border-color: #c0392b; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-line { opacity: 1; transform: none; animation: none; }
  .hero-bg, .float-slow, .float-slower, .heartbeat { animation: none; }
}

/* header logo shrinks once the page is scrolled (desktop) */
@media (min-width: 1024px) {
  .site-header.is-scrolled .site-logo { width: 68px; }
}

/* filter chips (shop page) */
.filter-btn { border: 1px solid rgba(74,35,24,.2); background: #fff; border-radius: 9999px; padding: .4rem 1rem; font-size: .75rem; transition: all .2s ease; }
.filter-btn:hover { border-color: #e8912d; }
.filter-btn.is-active { background: #4a2318; border-color: #4a2318; color: #fff; }

/* ---------- Basket drawer ---------- */
.cart-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.cart-drawer { transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s .4s; }
body.cart-open { overflow: hidden; }
body.cart-open .cart-overlay { opacity: 1; pointer-events: auto; }
body.cart-open .cart-drawer { transform: none; visibility: visible; transition-delay: 0s; }
.cart-line { animation: lineIn .35s ease both; }
@keyframes lineIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Confirm modal ---------- */
.modal-backdrop { opacity: 0; transition: opacity .25s ease; }
.modal-card { transform: translateY(20px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-card { transform: none; opacity: 1; }
body.modal-open { overflow: hidden; }

/* ---------- Success tick ---------- */
.tick-pop { animation: tickPop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tickPop { from { transform: scale(0); } to { transform: scale(1); } }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-overlay, .modal-card, .modal-backdrop { transition: none; }
  .cart-line, .tick-pop { animation: none; }
}

/* CocoaFeast mobile/tablet bottom navigation */
@media (max-width: 1023px) { body { padding-bottom: 76px; } .site-header .mobile-bottom-nav { position:fixed; z-index:65; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; gap:2px; padding:8px 5px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,249,239,.97); border-top:1px solid rgba(74,35,24,.14); box-shadow:0 -8px 24px rgba(74,35,24,.10); backdrop-filter:blur(12px); } .site-header .mobile-bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:#6c4938; font-size:10px; font-weight:600; text-decoration:none; padding:3px 1px; } .site-header .mobile-bottom-nav a.is-active { color:#d7791d; } .site-header .mobile-bottom-nav svg { width:20px; height:20px; } }
@media (min-width: 1024px) { .site-header .mobile-bottom-nav { display:none!important; } }