/* SA Sushi -- shared visual layer (Andrew, 2026-10-24: "a huge visual upgrade,
   high quality, button effects, page movement, transitions, everything").
   Loaded by home.html and order.html AFTER their own styles, so it refines
   rather than replaces. Visual only: no behaviour lives here.
   Everything that moves is switched off under prefers-reduced-motion. */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(18,30,20,.06), 0 4px 14px rgba(18,30,20,.06);
  --sh-2: 0 2px 6px rgba(18,30,20,.08), 0 18px 44px rgba(18,30,20,.14);
  --gold-grad: linear-gradient(135deg, #EBC38A 0%, #D9A056 45%, #C68B45 100%);
}

/* ---------- page transitions (same-site navigations: / <-> /order) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: fxOut .32s var(--ease-out) both; }
::view-transition-new(root){ animation: fxIn .45s var(--ease-out) both; }
@keyframes fxOut{ to{ opacity:0; transform:translateY(-10px) scale(.995); } }
@keyframes fxIn{ from{ opacity:0; transform:translateY(14px); } }
#nav{ view-transition-name: site-header; }          /* the header stays put while the page changes */
/* A plain fade-in on load for browsers without view transitions. CSS-only, so
   the page can never get stuck hidden. */
body{ animation: fxPage .55s var(--ease-out) both; }
@keyframes fxPage{ from{ opacity:0; } }

/* ---------- one button system ---------- */
.btn, .add-btn, .submit-btn, #nav .navcta{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:999px !important;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), background .25s ease, color .25s ease, border-color .25s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.btn-gold, #nav .navcta{
  background: var(--gold-grad) !important; border-color: transparent !important; color:#121E14 !important;
  box-shadow: 0 6px 18px rgba(217,160,86,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
/* the light sweep */
.btn-gold::after, #nav .navcta::after, .add-btn::after, .submit-btn::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.add-btn::after, .submit-btn::after{ background: linear-gradient(105deg, transparent 30%, rgba(217,160,86,.35) 48%, transparent 66%); }
@media (hover:hover){
  .btn:hover, #nav .navcta:hover, .add-btn:hover, .submit-btn:hover{ transform: translateY(-2px); }
  .btn-gold:hover, #nav .navcta:hover{ box-shadow: 0 12px 30px rgba(217,160,86,.42), inset 0 1px 0 rgba(255,255,255,.4); }
  .btn-gold:hover::after, #nav .navcta:hover::after, .add-btn:hover::after, .submit-btn:hover::after{ transform: translateX(120%); }
  .btn-dark:hover{ box-shadow: 0 12px 28px rgba(18,30,20,.32); }
  .btn-ghost:hover{ box-shadow: 0 0 0 1px rgba(217,160,86,.6), 0 10px 26px rgba(0,0,0,.25); }
}
.btn:active, #nav .navcta:active, .add-btn:active, .submit-btn:active{ transform: scale(.96) !important; transition-duration:.08s !important; }
.btn-dark{ background: linear-gradient(135deg,#24402A,#121E14) !important; }

/* tap ripple (fx.js adds the span) */
.fx-ripple{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background: rgba(255,255,255,.45); transform: scale(0); animation: fxRipple .6s var(--ease-out) forwards; }
@keyframes fxRipple{ to{ transform: scale(1); opacity:0; } }

/* keyboard focus that matches the brand */
:focus-visible{ outline: 2px solid #D9A056 !important; outline-offset: 3px; border-radius: 6px; }

/* ---------- header: frosted glass once it turns solid ---------- */
html #nav.solid{
  background: rgba(18,30,20,.9) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(217,160,86,.22), 0 10px 30px rgba(0,0,0,.22) !important;
}
html #nav .hicon, html #nav .lang, html #menuBtn{ transition: transform .25s var(--ease-out), background .2s ease, color .2s ease, border-color .2s ease !important; }
@media (hover:hover){ html #nav .hicon:hover{ transform: translateY(-2px); } }

/* ---------- fly-to-cart dot (fx.js) ---------- */
.fx-fly{ position:fixed; z-index:200; width:16px; height:16px; border-radius:50%; pointer-events:none;
  background: var(--gold-grad); box-shadow: 0 0 0 4px rgba(217,160,86,.25), 0 6px 16px rgba(0,0,0,.25); }
.fx-bump{ animation: fxBump .5s var(--ease-spring); }
@keyframes fxBump{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---------- reduced motion: keep it still ---------- */
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  body{ animation:none; }
  .btn-gold::after, #nav .navcta::after, .add-btn::after, .submit-btn::after{ display:none; }
  .fx-ripple, .fx-fly{ display:none; }
  .btn, .add-btn, .submit-btn, #nav .navcta{ transition:none !important; }
}