/* ==========================================================================
   AlBasali — Phase 5B.1 production visual layer
   Loaded after albasali.css. Presentation only: nothing here alters behaviour,
   routing, state or copy. Every value traces to design-tokens.json.
   ========================================================================== */

/* ---------------------------------------------------------------- pattern
   Fish scales over a woven ground. Both come from the brand's own material:
   the wavy strokes inside the secondary fish mark, and the plaid textile it
   was photographed on. Pure SVG in a data URI — no bitmap, no extra request,
   sharp at any DPI. Deliberately at low alpha: it should be felt before it is
   noticed, and it must never compete with Arabic text. */
:root{
  --pattern-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32' viewBox='0 0 56 32'%3E%3Cg fill='none' stroke='%231B3E5B' stroke-opacity='.085' stroke-width='1.1'%3E%3Cpath d='M0 24c7 0 7-16 14-16s7 16 14 16 7-16 14-16 7 16 14 16'/%3E%3Cpath d='M-28 8c7 0 7-16 14-16s7 16 14 16 7-16 14-16 7 16 14 16'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-weave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%231B3E5B' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 6h24M0 18h24M6 0v24M18 0v24'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-scale-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32' viewBox='0 0 56 32'%3E%3Cg fill='none' stroke='%23E0B87F' stroke-opacity='.16' stroke-width='1.1'%3E%3Cpath d='M0 24c7 0 7-16 14-16s7 16 14 16 7-16 14-16 7 16 14 16'/%3E%3Cpath d='M-28 8c7 0 7-16 14-16s7 16 14 16 7-16 14-16 7 16 14 16'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-scales{background-image:var(--pattern-scale);background-size:56px 32px}
.pattern-weave{background-image:var(--pattern-weave);background-size:24px 24px}

/* A quiet scale field behind the page. Fixed, so it does not swim against the
   content as it scrolls. */
body{
  background-image:var(--pattern-scale);
  background-size:56px 32px;
  background-attachment:fixed;
}

/* ---------------------------------------------------------------- header */
.hdr{backdrop-filter:saturate(140%) blur(8px);background:rgba(247,233,207,.86)}
/* The emblem itself now lives on .logo in the base sheet, so every screen that
   shows the mark gets it — including the ones with no header. */
.hdr--navy .logo{filter:drop-shadow(0 0 0 1px rgba(224,184,127,.4))}

/* ---------------------------------------------------------------- hero */
/* No negative margins: the hero is a sibling of .screen, not a child, so it is
   already full-bleed inside .app. Pulling it wider than its parent is what
   pushed the whole page sideways and clipped the Arabic off the right edge. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin:0 0 var(--s-5);
  border-end-start-radius:var(--r-2xl);border-end-end-radius:var(--r-2xl);
  background:var(--c-navy-deep);
}

/* Belt and braces: nothing may ever scroll the page sideways. */
html,body{overflow-x:hidden;max-width:100%}
.app{overflow-x:clip}
.hero__media{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  transform:scale(1.06);
  animation:hero-drift 30s var(--e-breathe) infinite alternate;
}
/* Navy rising from the foot so the type always has contrast, whatever the
   photograph is doing behind it. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    var(--c-navy-deep) 0%,
    rgba(14,52,73,.95) 24%,
    rgba(14,52,73,.58) 54%,
    rgba(14,52,73,.16) 100%);
}
.hero__body{
  position:relative;z-index:2;
  padding:var(--s-6) var(--s-5) var(--s-8);
  min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-3);
}
.hero__brand{display:flex;align-items:center;gap:var(--s-3);margin-block-end:auto;
  /* Full width so the switcher's margin-inline-start:auto actually reaches the
     far edge. Without it the row shrink-wraps the brand and the switcher lands
     beside the seal — two badges in one corner read as one control with a mark
     on it. */
  width:100%}
.hero__seal{
  width:60px;height:60px;flex:none;border-radius:50%;
  box-shadow:0 0 0 2px rgba(224,184,127,.45),0 8px 24px rgba(0,0,0,.35);
}
/* margin-inline-end here, not margin-inline-start on the switcher.
   The switcher carries dir="ltr" when it offers English — it is labelled in the
   language it leads TO — and a logical margin resolves against the ELEMENT's own
   direction, not the page's. So an auto margin on the switcher lands on its
   left in both languages, which in Arabic is the wrong side. The wordmark has
   no direction of its own, so its auto margin follows the page and pushes
   whatever comes after it to the far edge. */
.hero__word{display:flex;flex-direction:column;line-height:1.15;margin-inline-end:auto}
.hero__word b{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--c-cream)}
.hero__word span{font-size:12px;color:var(--c-gold);letter-spacing:.10em}
.hero h1{color:var(--c-cream);font-size:32px;line-height:1.22;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero__sub{color:var(--c-on-navy-2);font-size:16px;margin:0}
@keyframes hero-drift{from{transform:scale(1.06)}to{transform:scale(1.13)}}

/* ---------------------------------------------------------------- action slab */
.action-slab{
  background:var(--c-surface-raised);border-radius:var(--r-2xl);
  padding:var(--s-5);box-shadow:var(--sh-raised);
  display:flex;flex-direction:column;gap:var(--s-3);
  border:1px solid var(--c-border);
}
.btn--lg{min-height:56px;font-size:18px}
.btn--primary,.btn--secondary,.btn--gold{border-radius:var(--r-pill)}
.btn--primary{box-shadow:0 6px 18px rgba(14,52,73,.20)}
.status-line{display:flex;align-items:center;justify-content:center;gap:var(--s-2);font-size:15px;color:var(--c-text-2)}

/* ---------------------------------------------------------------- accents */
.rule-gold{height:1px;border:0;margin:var(--s-6) 0;
  background:linear-gradient(to left,transparent,var(--c-border-gold),transparent)}
.section-head{display:flex;align-items:center;gap:var(--s-3)}
.section-head::after{content:'';flex:1;height:1px;
  background:linear-gradient(to left,var(--c-border-gold),transparent)}

/* A gold hairline on the leading edge — the brass note, used sparingly. */
.card--accent{border-inline-start:3px solid var(--c-gold)}

/* ---------------------------------------------------------------- cards */
.card{
  border:1px solid var(--c-border);
  transition:transform var(--d-base) var(--e-standard),
             box-shadow var(--d-base) var(--e-standard),
             border-color var(--d-base) var(--e-standard);
}
a.card:hover,.card--interactive:hover{
  transform:translateY(-2px);box-shadow:var(--sh-raised);border-color:var(--c-border-gold);
}
.card:focus-within{border-color:var(--c-border-gold)}

/* Menu placeholder: a woven ground behind the shared fish line-art. Used for
   every item, because we have no photograph of any individual dish and will
   not imply otherwise. */
.mrow__thumb{background:var(--c-surface-muted);border:1px solid var(--c-border);position:relative;overflow:hidden}
.mrow__thumb::after{content:'';position:absolute;inset:0;
  background-image:var(--pattern-weave);background-size:12px 12px;opacity:.75}
.mrow__thumb svg{position:relative;z-index:1}

/* ---------------------------------------------------------------- motion */
@keyframes reveal-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-reveal]{opacity:0}
[data-reveal].is-in{animation:reveal-up var(--d-slow) var(--e-decel) forwards}

.btn{transition:transform var(--d-fast) var(--e-standard),box-shadow var(--d-fast) var(--e-standard)}
.btn:active{transform:translateY(1px)}

/* Gold shimmer — once, slowly, and only on the primary action. */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(238,197,102,.26) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:shimmer 7s ease-in-out 2.5s infinite;
}
@keyframes shimmer{0%,74%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

.bnav a{position:relative}
.bnav a::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:32%;
  height:2px;background:var(--c-gold);border-radius:0 0 2px 2px;
  transform:scaleX(0);transition:transform var(--d-base) var(--e-standard);
}
.bnav a[aria-current="page"]::before{transform:scaleX(1)}

/* ---------------------------------------------------------------- desktop */
@media (min-width:768px){
  .hero__body{min-height:50vh;padding-inline:var(--s-10)}
  .hero h1{font-size:44px}
  .hero__seal{width:76px;height:76px}
  .hero__word b{font-size:30px}
}
@media (min-width:1024px){
  .app{max-width:960px}
  .screen{padding-inline:var(--s-8)}
  .bnav{display:none}
  .app{padding-block-end:0}
  .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
  .menu-grid .card{margin:0}
}

/* ---------------------------------------------------------------- staff
   The same system, tightened. Operations screens get the palette and the
   typography but none of the ornament: no pattern, no shimmer, no reveal.
   A supervisor reading this at arm's length on a busy floor needs contrast
   and density, not atmosphere. */
.admin,.staff-shell{background:var(--c-surface-raised)}
.admin{background-image:none}
body:has(.admin){background-image:none}
.atable td,.atable th{padding-block:var(--s-2)}
.admin .card{box-shadow:var(--sh-sm)}
.admin .btn--primary::after{display:none}

/* ---------------------------------------------------------------- reduced motion
   One switch stops the whole system. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important}
  .hero__media{animation:none;transform:scale(1.06)}
  .btn--primary::after{display:none}
}

/* ---------------------------------------------------------------- waiting seal
   Overrides the first-pass circle. The winning prototype is an ENGRAVED SEAL on
   cream, not a navy disc: light ground, navy ink, a school of fish around the
   rim and one gold comet marking time. */
.wc{width:260px;height:260px}
.wc__disc{fill:var(--c-surface-raised);animation:none}
.wc__ring-o{fill:none;stroke:var(--c-navy);stroke-width:2.2;opacity:.95}
.wc__ring-i{fill:none;stroke:var(--c-navy);stroke-width:1.1;opacity:.55}
.wc__fish{fill:var(--c-navy);opacity:.82}
.wc__fish-eye{fill:var(--c-surface-raised)}
.wc__school{transform-origin:120px 120px;animation:wc-swim 90s linear infinite}
.wc__num{color:var(--c-navy-deep);font-size:82px;font-weight:800;font-family:var(--font-display)}
.wc__label{color:var(--c-text-2);font-size:16px}

/* Comet: a short arc drawn with dashes, plus a bright head, rotating together. */
.wc__comet{transform-origin:120px 120px;animation:wc-orbit 8s linear infinite}
.wc__comet-trail{
  fill:none;stroke:url(#wc-trail);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:70 615;
}
.wc__comet-head{fill:var(--c-gold-bright);filter:drop-shadow(0 0 6px rgba(238,197,102,.85))}

@keyframes wc-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wc-swim{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* States ------------------------------------------------------------------ */
.wc[data-state="almost"] .wc__comet{animation-duration:4.5s}
.wc[data-state="almost"] .wc__ring-o{stroke:var(--c-gold);stroke-width:2.8}
.wc[data-state="almost"]{filter:drop-shadow(0 0 26px rgba(224,184,127,.45))}
.wc[data-state="called"] .wc__comet,
.wc[data-state="table-ready"] .wc__comet{animation:none;opacity:0}
.wc[data-state="offline"] .wc__comet{animation:none;opacity:0}
.wc[data-state="offline"] .wc__ring-o,
.wc[data-state="offline"] .wc__ring-i{stroke:var(--c-text-3)}
.wc[data-state="offline"] .wc__fish{fill:var(--c-text-3);opacity:.5}

/* Dark variant kept for navy grounds (called / table-ready screens). */
.wc[data-variant="dark"] .wc__disc{fill:var(--c-navy)}
.wc[data-variant="dark"] .wc__ring-o,
.wc[data-variant="dark"] .wc__ring-i{stroke:var(--c-gold)}
.wc[data-variant="dark"] .wc__fish{fill:var(--c-gold);opacity:.75}
.wc[data-variant="dark"] .wc__fish-eye{fill:var(--c-navy)}
.wc[data-variant="dark"] .wc__num{color:var(--c-cream)}
.wc[data-variant="dark"] .wc__label{color:var(--c-on-navy-2)}

@media (prefers-reduced-motion:reduce){
  .wc__comet,.wc__school{animation:none}
  .wc__comet{opacity:1}          /* the marker stays visible, it just stops moving */
}


/* ==========================================================================
   "I'm on my way" on the navy called screen
   The screen is white on navy, so the outline button inherits the wrong ink.
   ========================================================================== */
.called-screen [data-on-the-way] .btn--secondary{
  color:var(--c-cream);border-color:rgba(247,233,207,.55);background:transparent;
}
.called-screen [data-on-the-way] .btn--secondary:hover{border-color:var(--c-gold)}
.called-screen [data-on-the-way] .tiny,
.called-screen [data-on-the-way-done] .tiny{color:var(--c-on-navy-2)}
.called-screen [data-on-the-way-done]{
  background:rgba(247,233,207,.10);border-inline-start-color:var(--c-gold);
}
.called-screen [data-on-the-way-done] strong{color:var(--c-cream)}