/* ============================================================
   Manar Studios: what every page shares.
   Type, tokens, the logo pill and its menu. The homepage scene
   is in styles.css, the dark inner pages are in pages.css.
   ============================================================ */

@font-face{
  font-family:"Inter"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("fonts/InterVariable-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("fonts/InterVariable-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#01123A; --blue:#0A62F5; --cyan:#00D8F4;
  /* the room: the same values cubes.js paints, so page and scene meet without a seam */
  --room:#EFF4FB; --room-low:#DCE6F4;
  --ink-2:#44536E;
  --glass:rgba(255,255,255,.56);
  --glass-edge:0 0 0 1px rgba(255,255,255,.85) inset;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }

/* Lenis, from the package stylesheet */
html.lenis, html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }

html,body{ margin:0; background:var(--room); }
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--navy);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
button{ font:inherit; color:inherit; }

.skip{ position:absolute; left:-999px; top:0; z-index:60; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; }
.skip:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:10px; }

/* ── the logo pill and its menu ──────────────────────── */
.top{
  position:fixed; z-index:30; top:clamp(14px,2.4svh,24px); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  width:min(560px, calc(100vw - 28px));
  pointer-events:none;
}
.top > *{ pointer-events:auto; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px 11px 18px; border:0; border-radius:999px; cursor:pointer;
  font-size:.92rem; font-weight:560; letter-spacing:-.02em; white-space:nowrap;
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--glass-edge), 0 14px 38px -18px rgba(1,18,58,.34);
  opacity:0; transform:translateY(-8px);
  animation:drop .9s var(--ease) .5s forwards;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.pill:hover{ background:rgba(255,255,255,.78); box-shadow:var(--glass-edge), 0 18px 44px -18px rgba(1,18,58,.4); }
.pill__mark{ width:20px; height:20px; display:block; flex:none; }
.pill__chev{ width:12px; height:12px; display:block; color:var(--navy); transition:transform .45s var(--ease); }
.pill[aria-expanded="true"] .pill__chev{ transform:rotate(180deg); }
@keyframes drop{ to{ opacity:1; transform:none; } }

/* the menu the pill opens: the site's navigation */
.menu{
  margin-top:10px; width:min(300px, 100%);
  padding:6px; border-radius:24px;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(34px) saturate(180%); backdrop-filter:blur(34px) saturate(180%);
  box-shadow:var(--glass-edge), 0 40px 90px -40px rgba(1,18,58,.42), 0 12px 30px -18px rgba(1,18,58,.2);
  transform-origin:50% 0;
  opacity:0; transform:translateY(-10px) scale(.97);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; transform:none; }
.menu__link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-radius:18px;
  font-size:1rem; font-weight:520; letter-spacing:-.02em; color:var(--navy); text-decoration:none;
  transition:background .25s var(--ease);
}
.menu__link:hover{ background:rgba(1,18,58,.05); }
.menu__link[aria-current="page"]{ font-weight:680; }
.menu__arrow{ width:14px; height:14px; flex:none; opacity:0; transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .35s var(--ease); }
.menu__link:hover .menu__arrow, .menu__link:focus-visible .menu__arrow{ opacity:1; transform:none; }
.menu__link[aria-current="page"] .menu__arrow{ display:none; }

/* on a product page, the two products sit under the logo button: the same pill,
   without the mark, one of them current. They step aside while the menu is open. */
.switch{ margin-top:10px; display:flex; justify-content:center; gap:8px; transition:opacity .3s var(--ease); }
.top.is-menu .switch{ opacity:0; pointer-events:none; }
.pill--switch{
  animation:none; opacity:1; transform:none; text-decoration:none; color:var(--navy);
  padding:11px 20px; font-weight:500;
  background:rgba(255,255,255,.5); box-shadow:var(--glass-edge), 0 10px 26px -16px rgba(1,18,58,.3);
}
.pill--switch:hover{ background:rgba(255,255,255,.72); }
.pill--switch[aria-current="page"]{ font-weight:680; background:rgba(255,255,255,.85); }

@media (max-width: 899px){
  .top{ position:absolute; }
}
@media (prefers-reduced-motion: reduce){
  .pill{ animation:none; opacity:1; transform:none; }
  .menu,.menu__link,.menu__arrow{ transition:none; }
}