/* Home page only (docs/preview-checkout.md, Home hero; dist/home-cart-reveal.js). The hero spans
   the full frame. From 1200px the fixed cart card waits while the hero shows and rises into its
   lane as the hero scrolls off. Every other page keeps the cart always visible. */

/* The header order pill: count and total while the hero shows, so the order is never hidden. */
.home-order-pill { margin-left:auto; margin-right:28px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px 0 14px; border:1px solid rgba(213,169,0,.55); border-radius:999px; background:rgba(213,169,0,.1); color:var(--cream); font:600 13px/1 'DM Sans',sans-serif; letter-spacing:.02em; white-space:nowrap; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity 200ms cubic-bezier(.22,1,.36,1),transform 200ms cubic-bezier(.22,1,.36,1),visibility 0s linear 200ms,background-color 150ms ease; }
.home-order-pill.is-shown { opacity:1; visibility:visible; transform:none; transition:opacity 200ms cubic-bezier(.22,1,.36,1),transform 200ms cubic-bezier(.22,1,.36,1),background-color 150ms ease; }
.home-order-pill:hover { background:rgba(213,169,0,.2); }
.home-order-pill:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.home-order-pill svg { flex:0 0 auto; color:var(--gold); }
.home-order-pill-total { color:var(--gold); font-variant-numeric:tabular-nums; }
.home-order-pill-total::before { content:"·"; color:var(--muted); margin-right:8px; }
@media (max-width:800px) {
  .home-order-pill { margin-right:8px; padding:0 14px 0 12px; }
}
@media (max-width:400px) {
  .home-order-pill { gap:6px; padding:0 12px 0 10px; font-size:12.5px; letter-spacing:0; }
  .home-order-pill svg { display:none; }
  .home-order-pill-total::before { margin-right:6px; }
}

@media (min-width:1200px) {
  /* The hero takes the full frame: it reaches over the cart lane, which starts below it. */
  body[data-page="home"] .uc-page-layout > main > .hero { margin-right:calc(-1 * (var(--cart-lane) + var(--lane-gap))); grid-template-columns:minmax(0,1fr) clamp(340px,32vw,500px); column-gap:clamp(48px,5vw,96px); }
  body[data-page="home"] .uc-page-layout .hero h1 { font-size:clamp(96px,23cqw,200px); }
  body[data-page="home"] .uc-page-layout .hero .script { font-size:clamp(42px,7.5cqw,60px); }
  /* Room for the tilt and the sparkles, so neither passes the frame edge. */
  body[data-page="home"] .uc-page-layout .hero-art { justify-self:end; width:calc(100% - 16px); max-width:none; margin-right:16px; }
  /* Script fallback where scroll-driven animation is missing: the module sets these values. */
  body[data-page="home"].home-reveal-js .unified-checkout { opacity:var(--home-reveal-o,0); visibility:var(--home-reveal-v,hidden); transform:translateY(var(--home-reveal-y,0px)); }
}

/* The fixed card rises a little slower than the page (90% of its speed at most) and fades in. It
   starts low in the window and settles under the header as the eyebrow of the section after the
   hero reaches it, so the card's top meets that section's first content. --home-align is that
   eyebrow's offset in its section, measured by the module. Hidden cards take no clicks. */
@supports (animation-timeline:view()) and (timeline-scope:--a) {
  @media (min-width:1200px) {
    body[data-page="home"] .uc-page-layout { timeline-scope:--home-next; }
    body[data-page="home"] .uc-page-layout > main > .hero + * { view-timeline:--home-next block; view-timeline-inset:var(--uc-top) 0; }
    body[data-page="home"] .unified-checkout { animation:home-cart-rise linear both,home-cart-fade linear both; animation-timing-function:cubic-bezier(.4,.4,.7,1),linear; animation-timeline:--home-next,--home-next; animation-range:cover var(--home-align,calc(var(--section-y) + 13px)) exit-crossing var(--home-align,calc(var(--section-y) + 13px)); }
  }
}
@keyframes home-cart-rise { from { transform:translateY(calc(.9 * (100vh - var(--uc-top)))); } to { transform:none; } }
@keyframes home-cart-fade { 0% { opacity:0; visibility:hidden; } 55%, 100% { opacity:1; visibility:visible; } }

/* Below 1200px the bottom bar waits until the hero has scrolled past, then behaves as everywhere. */
@media (max-width:1199px) {
  body.home-hero-showing .unified-checkout.has-order:not(.is-open) .uc-bar { transform:translateY(110%); visibility:hidden; transition:transform var(--uc-open) var(--uc-ease),visibility 0s linear var(--uc-open); }
}

/* Reduced motion, and the layout check (?check), show the card at once, with no movement, once the
   hero has scrolled past. */
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .unified-checkout { animation:none!important; opacity:1!important; visibility:visible!important; transform:none!important; }
  body[data-page="home"].home-cart-waiting .unified-checkout { opacity:0!important; visibility:hidden!important; }
  .home-order-pill, .home-order-pill.is-shown { transition:none!important; transform:none!important; }
}
.uc-still body[data-page="home"] .unified-checkout { animation:none!important; opacity:1!important; visibility:visible!important; transform:none!important; }
.uc-still body[data-page="home"].home-cart-waiting .unified-checkout { opacity:0!important; visibility:hidden!important; }
.uc-still .home-order-pill { transition:none!important; }