/* Our layer on top of css/webflow.css: the motion Webflow's IX2 runtime used to drive. */

/* Menu starts closed (IX2 a-68 initial state: display none, height 0) */
.menu-container { display: none; height: 0; }

/* "As seen in" marquee (home-03, IX2 a-33): each panel slides 0 -> -100% in 18s, linear, forever */
.marquee-horizontal-panel-alternate-01 { animation: rb-marquee 18s linear infinite; }
@keyframes rb-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Product card spin (home-02 Burgers + Chicken tabs, IX2 a-15/a-16):
   hover in  = scale 1 -> 1.1 over 700ms + rotate 0 -> 63deg over 500ms, both outQuart
   hover out = both back over 500ms outQuart */
[data-hover="spin"] img.product-image {
  transition: scale .5s cubic-bezier(.165, .84, .44, 1), rotate .5s cubic-bezier(.165, .84, .44, 1);
}
[data-hover="spin"]:hover img.product-image {
  scale: 1.1;
  rotate: 63deg;
  transition: scale .7s cubic-bezier(.165, .84, .44, 1), rotate .5s cubic-bezier(.165, .84, .44, 1);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-horizontal-panel-alternate-01 { animation: none; }
}

/* ================= Lorne's layer (brand pieces the template didn't have) ================= */

/* Delivery tiles (home-01 "Find us all over town") - neighbourhoods set in type, not stock logos */
.logo-word { font: 400 1.5rem/1.05 Anton, sans-serif; text-transform: uppercase; color: #111; text-align: center; }
.logo-card-wrapper:nth-child(3n+2) .logo-word { font: 900 1.35rem/1.05 Jost, sans-serif; color: var(--red); text-transform: none; }
.logo-card-wrapper:nth-child(3n) .logo-word { font: 700 1.1rem/1.1 Inter, sans-serif; letter-spacing: -.02em; }

/* home-03 "Delivering to" marquee */
.marquee-word { flex: none; margin: 0 2rem; font: 900 2rem/1 Jost, sans-serif; color: #fff; white-space: nowrap; letter-spacing: -.02em; }
.marquee-word:nth-child(even) { font: 400 2.1rem/1 Anton, sans-serif; text-transform: uppercase; letter-spacing: .01em; }

/* Footer: brand column + real links + legal bar, over a drifting checker band (the brand's own flag) */
.footer-checker {
  height: 66px;
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 66px 66px;
  animation: rb-checker 6s linear infinite;
}
@keyframes rb-checker { to { background-position: 66px 0; } }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; padding: 5rem 0 3.5rem; border-bottom: 1px solid #fff3; }
.footer-brand { max-width: 30rem; }
.footer-logo { display: block; height: 64px; width: auto; }
.footer-line { color: #fff; font-size: 1.25rem; line-height: 1.4; font-weight: 500; margin: 1.25rem 0 1.75rem; }
.footer-top .new-footer-newsletter { margin: 0; }
.section.footer .footer-nav-link-grid { padding: 3.5rem 0; }
.navigation-link.plain { cursor: default; }
.navigation-link.plain:hover { opacity: 1; }
.section.footer .copyright-text { line-height: 1.4; }
@media screen and (max-width: 767px) {
  .footer-top { flex-direction: column; align-items: flex-start; padding-top: 3.5rem; }
  .section.footer .bottom-copyright-text-box { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .footer-checker { animation: none; } }
.footer-top .footer-form-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.section.footer .footer-nav-link-grid { align-items: start; }
.section.footer .copyright-text { text-align: left; }
/* template bug (the original has it too): on phones the review cards lose position:relative, so all
   four hearts stack in one spot above the heading. Anchor each heart to its own card again. */
@media screen and (max-width: 767px) {
  .instagram-comment-container { position: relative; }
  .instagram-comment-container .heart-image-wrapper { inset: 16px 16px auto auto; }
}