/* ============================================================
   Scale v3 — F&B identity + calmer atmosphere
   Loads AFTER styles.css. Overrides + additions only:
   - fixes hero edge margins
   - dims / quiets the WebGL background so content stays legible
   - F&B "pipeline" hero diagram + line-art food motifs
   ============================================================ */

/* ---------- softer glow globally ---------- */
:root{ --glow-strong:rgba(120,180,235,.16); }

/* ---------- FIX: hero touched the viewport edges ----------
   .hero-grid set width:100% and won out over .wrap; restore gutters. */
.hero .hero-grid{
  width:min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline:auto;
}
/* keep section content above decorative motifs */
.section .wrap, .hero .wrap{ position:relative; z-index:1; }

/* ---------- calmer background scene ---------- */
#scene.ready{ opacity:.42; }              /* was 1 — far quieter */
body::before{                              /* dim the ambient glows */
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(18,58,96,.30), transparent 60%),
    radial-gradient(90% 60% at 6% 4%, rgba(10,52,88,.20), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--bg) 30%, var(--bg) 70%, var(--void) 100%);
}
/* legibility veil sits above the canvas, below content */
.scene-veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,7,13,.52), rgba(3,7,13,.10) 50%, rgba(3,7,13,.52)),
    radial-gradient(120% 110% at 50% 28%, transparent 30%, rgba(3,7,13,.55) 90%);
}

/* ---------- F&B line-art icon base ---------- */
.ic-fb{ inline-size:24px; block-size:24px; color:var(--ice-3); }
.ic-fb use, .ic-fb path, .ic-fb circle{ vector-effect:non-scaling-stroke; }

/* ---------- HERO: supplier -> kitchen -> POS -> P&L pipeline ---------- */
.hero-visual{ display:flex; flex-direction:column; gap:1.4rem; }
.pipeline{
  position:relative; padding:1.4rem 1.2rem 1rem;
  border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(18,58,96,.30), rgba(7,22,38,.34));
  border:1px solid var(--hair-2); backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 30px 80px -38px rgba(0,0,0,.8), inset 0 1px 0 rgba(238,245,251,.07);
}
.pipeline-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-block-end:.6rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ice-3);
}
.pipeline-head .live{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ice); }
.pipeline-head .live i{ font-size:.5rem; animation:pulse 2s infinite; }
.pipeline svg{ width:100%; height:auto; overflow:visible; display:block; }

.pipe-base{ fill:none; stroke:var(--hair-2); stroke-width:1.5; }
.pipe-path{
  fill:none; stroke:var(--ice-3); stroke-width:2; stroke-linecap:round;
  opacity:.55; stroke-dasharray:1; stroke-dashoffset:1;
  animation:pipeDraw 2.4s var(--ease) .2s forwards;
}
.pipe-flow{
  fill:none; stroke:var(--ice); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:.11 .89; stroke-dashoffset:1;
  filter:drop-shadow(0 0 5px var(--glow-strong));
  animation:pipeFlow 3.4s linear 2.4s infinite;
}
.pipe-flow.b{ animation-delay:4.1s; opacity:.6; }
@keyframes pipeDraw{ to{ stroke-dashoffset:0; } }
@keyframes pipeFlow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.node .node-bg{
  fill:rgba(9,27,46,.92); stroke:var(--hair-2); stroke-width:1.4;
  transform-box:fill-box; transform-origin:center;
}
.node .ic-fb{ color:var(--ice-3); }
.node.dest .node-bg{ stroke:var(--ice-3); }
.node.dest .ic-fb{ color:var(--ice); }
.node .ring{
  fill:none; stroke:var(--ice-3); stroke-width:1.4; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:nodePing 3.4s ease-out infinite;
}
.node:nth-of-type(1) .ring{ animation-delay:2.6s; }
.node:nth-of-type(2) .ring{ animation-delay:3.0s; }
.node:nth-of-type(3) .ring{ animation-delay:3.4s; }
.node:nth-of-type(4) .ring{ animation-delay:3.8s; }
@keyframes nodePing{ 0%{ opacity:.5; transform:scale(.7); } 70%,100%{ opacity:0; transform:scale(1.5); } }
.node-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  fill:var(--muted); text-anchor:middle;
}
.node.dest + .node-label, .node-label.dest{ fill:var(--ice-3); }

.pipe-card{ padding:1.2rem 1.4rem; }
.pipe-card .hc-top{ margin-block-end:1rem; }

/* ---------- line-art food motifs (decorative watermarks) ---------- */
.motif{
  position:absolute; inline-size:clamp(180px,24vw,340px); block-size:auto;
  color:var(--ice-3); opacity:.05; pointer-events:none; z-index:0;
}
.motif .ic-fb{ inline-size:100%; block-size:auto; }
.motif--tr{ inset-block-start:6%; inset-inline-end:3%; }
.motif--bl{ inset-block-end:6%; inset-inline-start:2%; }
.motif--tl{ inset-block-start:8%; inset-inline-start:3%; transform:rotate(-8deg); }

/* ---------- hero pipeline <-> cost card swap ---------- */
.hero-swap{ position:relative; }
.swap-item.swap-pipe{ position:relative; }                 /* defines the swap height */
.swap-item.swap-cost{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;                          /* GSAP fades it in on scroll */
}
.swap-item.swap-cost .hero-card{ inline-size:100%; max-inline-size:340px; margin-inline:0; }

/* ---------- elevated nav: segmented glass capsule + active section ---------- */
.header .nav-links{
  gap:.15rem; padding:.3rem; border:1px solid var(--hair); border-radius:999px;
  background:rgba(238,245,251,.025); backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(238,245,251,.05);
}
.header .nav-links a{
  padding:.52rem 1.05rem; border-radius:999px; font-size:.9rem; font-weight:500;
  color:var(--muted); transition:color .22s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.header .nav-links a::after{ display:none; }              /* capsule shows state, not the underline */
.header .nav-links a:hover{ color:var(--white); background:rgba(238,245,251,.05); }
.header .nav-links a.active{
  color:var(--ice); background:rgba(238,245,251,.10);
  box-shadow:inset 0 0 0 1px rgba(238,245,251,.12), 0 0 18px -8px var(--glow-strong);
}
.mobile-menu a.active{ color:var(--ice); }

/* ---------- brand logo ---------- */
.brand-logo{ block-size:30px; inline-size:auto; display:block; }
.footer .brand-logo{ block-size:36px; }

/* ---------- pipeline: Remix-icon nodes over an SVG line layer ---------- */
.pipe-stage{ position:relative; inline-size:100%; aspect-ratio:460 / 380; overflow:visible; }
.pipeline .pipe-svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; overflow:visible; }
.pnode{
  /* physical left/top so the nodes stay locked to the SVG path in RTL too */
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.pnode-ic{
  position:relative; inline-size:48px; block-size:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(9,27,46,.94); border:1px solid var(--hair-2); color:var(--ice-3); font-size:1.4rem;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(238,245,251,.06);
}
.pnode-ic::after{                                           /* themed ping */
  content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--ice-3);
  opacity:0; animation:nodePing 3.4s ease-out infinite;
}
.pnode:nth-of-type(2) .pnode-ic::after{ animation-delay:2.6s; }
.pnode:nth-of-type(3) .pnode-ic::after{ animation-delay:3.0s; }
.pnode:nth-of-type(4) .pnode-ic::after{ animation-delay:3.4s; }
.pnode:nth-of-type(5) .pnode-ic::after{ animation-delay:3.8s; }
.pnode.dest .pnode-ic{ border-color:var(--ice-3); color:var(--ice); box-shadow:0 0 24px -4px var(--glow-strong); }
.pnode-lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.pnode.dest .pnode-lbl{ color:var(--ice-3); }

/* ---------- marquee: each word brightens as it crosses center (JS-driven) ---------- */
.marquee{
  position:relative;
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track .mq-w{          /* word: dim by default, JS lifts it near center */
  inline-size:auto; block-size:auto; margin-inline:0; border-radius:0; background:none;
  opacity:1; font-size:1.4rem; color:rgba(238,245,251,.18); transition:color .12s linear;
}
.marquee-track .mq-sep{        /* bullet separator */
  display:inline-block; inline-size:8px; block-size:8px; margin-inline:1.5rem;
  border-radius:50%; background:var(--ice-3); opacity:.32; vertical-align:middle;
}

/* ---------- wireframe assembly (initial state for the GSAP build-in) ---------- */
/* pieces are only hidden once motion.js arms them, so no-JS still shows everything */
.assemble-armed .m-card,
.assemble-armed .m-hero-kpi,
.assemble-armed .m-pill,
.assemble-armed .m-bars > div,
.assemble-armed .pos-item,
.assemble-armed .pos-line,
.assemble-armed .tbl,
.assemble-armed .m-table tbody tr{ will-change:transform, opacity; }

/* ---------- hero background video, graded to brand (navy duotone + scrim) ---------- */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; isolation:isolate; pointer-events:none; }
.hero-video{
  position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover;
  opacity:.5; filter:saturate(.5) contrast(1.04) brightness(.9);
}
.hero-duotone{ position:absolute; inset:0; background:var(--navy-deep); mix-blend-mode:color; opacity:.6; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,7,13,.55), rgba(3,7,13,.34) 42%, rgba(3,7,13,.9)),
    linear-gradient(90deg, rgba(5,16,28,.62), rgba(5,16,28,.12) 50%, rgba(5,16,28,.62));
}

/* ---------- mobile hardening: keep everything inside the viewport ---------- */
@media (max-width:600px){
  :root{ --gutter:1.05rem; }

  /* let flex/grid children shrink instead of forcing horizontal overflow */
  .showcase > *, .showcase-copy, .bento > *, .bi > *, .offline-stage > *,
  .frame, .mock, .m-main, .pipeline, .pipe-stage{ min-inline-size:0; max-inline-size:100%; }
  .frame{ padding:8px; }

  /* dashboards: collapse inner grids + stack the table/side panels */
  .mock{ font-size:11px; }
  .m-grid{ grid-template-columns:1fr !important; }
  .m-body{ flex-direction:column !important; }
  .m-side{ inline-size:auto !important; flex-direction:row; flex-wrap:wrap; }
  .m-table{ font-size:10.5px; }
  .m-table th, .m-table td{ padding:6px 5px; }

  /* top bars: drop the wide nowrap tab strip on phones */
  .pos-tabs{ display:none; }
  .pos-top{ flex-wrap:wrap; gap:6px; padding:8px 10px; }
  .pos-meta{ font-size:10px; }
  .pos-prod{ grid-template-columns:repeat(2,1fr); }
  .floor-grid{ grid-template-columns:repeat(2,1fr); }
  .floor-leg{ font-size:10px; gap:8px 10px; }

  /* hero pipeline labels a touch smaller */
  .pnode-lbl{ font-size:10px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scene-veil{ display:none; }
  .hero-video{ display:none; }
  .pipe-path{ animation:none; stroke-dashoffset:0; }
  .pipe-flow{ display:none; }
  .node .ring{ animation:none; display:none; }
  .pnode-ic::after{ animation:none; display:none; }
  .pipeline-head .live i{ animation:none; }
  .marquee-track .mq-w{ color:rgba(238,245,251,.42) !important; text-shadow:none !important; }
  .swap-item.swap-cost{ display:none; }                    /* show pipeline only */
}