/* ============================================================
   Ally Ops Designs — shared demo chrome
   Only the studio bar, resets and motion utilities live here.
   Each demo brings its own palette, type and personality.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- studio bar (fixed, on every demo) ---------- */
.studio-bar{
  position:fixed;inset:0 0 auto 0;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem clamp(.9rem,4vw,2rem);
  font-family:'Inter',system-ui,sans-serif;font-size:.74rem;letter-spacing:.02em;
  color:var(--bar-fg,#f4efe6);
  background:var(--bar-bg,rgba(16,16,18,.82));
  border-bottom:1px solid var(--bar-line,rgba(201,169,97,.32));
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.studio-bar__mark{display:flex;align-items:center;gap:.55rem;min-width:0}
.studio-bar__mark svg{width:17px;height:17px;flex:none;color:var(--bar-fg,#f4efe6)}
.studio-bar__mark span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.studio-bar__mark b{font-weight:600}
.studio-bar__links{display:flex;align-items:center;gap:.45rem;flex:none}
.studio-bar__links a{
  padding:.34rem .78rem;border-radius:100px;white-space:nowrap;
  border:1px solid var(--bar-line,rgba(201,169,97,.32));
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.studio-bar__links a:hover{background:var(--bar-hover,rgba(201,169,97,.18))}
.studio-bar__links a.is-primary{
  background:var(--bar-accent,#c9a961);color:var(--bar-accent-fg,#16150f);border-color:transparent;font-weight:600;
}
.studio-bar__links a.is-primary:hover{filter:brightness(1.08)}
body{padding-top:44px}
@media(max-width:560px){
  .studio-bar{font-size:.66rem;padding:.5rem .8rem}
  .studio-bar__mark span em{display:none}
  .studio-bar__links a{padding:.3rem .6rem}
}

/* ---------- motion utilities ---------- */
[data-reveal]{opacity:0;transform:translateY(22px)}
.no-motion [data-reveal]{opacity:1!important;transform:none!important}
.gl-fallback{position:absolute;inset:0}
.gl-on .gl-fallback{opacity:0;transition:opacity .8s ease}
canvas.gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.gl-on canvas.gl{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}