/* Bagdad Bread Factory - "human touch" polish layer.
   Visual-only: no text, colours, fonts or features are changed. It only adds soft motion, gentle depth
   and tactile feedback so the site feels warm and hand-made, like a real neighbourhood bakery. */

/* ---- soft page arrival ---- */
@keyframes hzPageIn { from { opacity: 0 } to { opacity: 1 } }
body { animation: hzPageIn .45s ease-out; -webkit-tap-highlight-color: rgba(8,127,62,.14); }

/* ---- brand-coloured text selection + calm scrollbar ---- */
::selection { background: rgba(8,127,62,.2); color: #123c29; }
html { scrollbar-color: #b9c9bd transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c4d2c8; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9fb5a6; background-clip: content-box; border: 2px solid transparent; }

/* ---- friendly keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(8,127,62,.35); outline-offset: 3px; border-radius: 10px;
}

/* ---- header gets a soft shadow once you scroll (JS toggles .hz-scrolled) ---- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.hz-scrolled { box-shadow: 0 8px 28px rgba(18,60,41,.10); }

/* ---- buttons feel pressable ---- */
button, .btn, .primary, .primary-btn, [role="button"], .account-action-btn {
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
button:active:not(:disabled), .btn:active, .primary:active, .primary-btn:active, [role="button"]:active { transform: scale(.97); }

/* ---- links in the footer nudge toward you ---- */
.site-footer a { transition: color .2s ease, transform .2s ease; }
@media (hover: hover) { .site-footer a:hover { transform: translateX(2px); } }

/* ---- cards: gentle lift + warm shadow on hover (desktop only) ---- */
.menu-product, .category-tile, .promise-card, .bp-card, .cat-tile, .hs-card, .hs-stat {
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .menu-product:hover, .category-tile:hover, .promise-card:hover, .bp-card:hover, .cat-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(28,55,39,.14);
  }
  .menu-product-image img, .category-tile img, .cat-tile img { transition: transform .7s cubic-bezier(.2,.8,.3,1); }
  .menu-product:hover .menu-product-image img, .category-tile:hover img, .cat-tile:hover img { transform: scale(1.06); }
}
.menu-product-image { overflow: hidden; }

/* ---- photos fade in softly instead of popping ---- */
img.hz-img { opacity: 0; transition: opacity .6s ease; }
img.hz-img.hz-loaded { opacity: 1; }

/* ---- scroll reveal (classes are added by humanize.js only to things below the fold) ---- */
.hz-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); transition-delay: var(--hz-d, 0ms); will-change: opacity, transform; }
.hz-reveal.hz-in { opacity: 1; transform: none; will-change: auto; }

/* ---- respect people who prefer less motion ---- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .hz-reveal { opacity: 1; transform: none; transition: none; }
  img.hz-img { opacity: 1; transition: none; }
  .menu-product, .category-tile, .promise-card, .bp-card, .cat-tile, .hs-card, .hs-stat { transition: none; }
  .menu-product:hover, .category-tile:hover, .promise-card:hover, .bp-card:hover, .cat-tile:hover { transform: none; }
  .menu-product:hover .menu-product-image img, .category-tile:hover img, .cat-tile:hover img { transform: none; }
}