/* ============================================================
   Manar Studios: the inner pages (About us, Careers, Products).
   A solid, very dark grey, with the glass cubes as a frame around
   the column. Blocks fade in as they arrive, and at the bottom of
   every page the cubes come together into the mark (frame.js).
   About us and Products carry the .lux layer at the end of this
   file: centred, light, quiet, slow.
   Loaded after base.css, which carries the type and the pill.
   ============================================================ */

:root{
  /* the ground: frame.js paints the same value, so page and scene meet */
  --ground:#121316;
  --ink:#EDEEF0;
  --line:rgba(255,255,255,.1);
}

html,body{ background:var(--ground); }
body{ color:var(--ink); min-height:100svh; }
::selection{ background:rgba(10,98,245,.6); color:#fff; }
:focus-visible{ outline-color:var(--cyan); }
.skip{ background:var(--ink); color:var(--ground); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* the cubes sit behind everything and never take a click */
.frame{
  position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block;
  pointer-events:none; opacity:0; transition:opacity 1.4s var(--ease);
}
.frame.is-on{ opacity:1; }

/* text softens away under the pill instead of scrolling into it: a band of the
   same ground, blurred and faded out. Desktop only, since on small screens the
   pill scrolls away with the page. */
@media (min-width: 900px){ body::before{
  content:""; position:fixed; z-index:2; left:0; right:0; top:0; height:clamp(96px, 15svh, 140px);
  pointer-events:none;
  background:var(--ground);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent);
          mask-image:linear-gradient(to bottom, #000 30%, transparent);
} }

/* ── the pill and menu, in dark glass ────────────────── */
.pill{
  color:var(--ink);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 16px 40px -18px rgba(0,0,0,.7);
}
.pill:hover{ background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 18px 44px -18px rgba(0,0,0,.8); }
.pill__chev{ color:var(--ink); }
/* the navy cell would vanish on a dark pill, so the reversed mark lights it */
.pill__core{ fill:#EDEEF0; }

.menu{
  background:rgba(28,29,33,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 40px 90px -30px rgba(0,0,0,.85);
}
.menu__link{ color:var(--ink); }
.menu__link:hover{ background:rgba(255,255,255,.07); }
.pill--switch{ color:var(--ink); background:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.pill--switch:hover{ background:rgba(255,255,255,.12); }
.pill--switch[aria-current="page"]{ background:rgba(255,255,255,.16); box-shadow:0 0 0 1px rgba(255,255,255,.24) inset; }
.menu__sub .pill{ color:var(--ink); background:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.menu__sub .pill:hover{ background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; }

/* ── the page column ─────────────────────────────────── */
.page{
  position:relative; z-index:1;
  width:min(1040px, calc(100vw - 48px)); margin:0 auto;
  padding:clamp(150px, 24svh, 240px) 0 0;
}

.page__title{
  margin:0 0 clamp(36px, 6svh, 64px);
  font-size:clamp(3.2rem, 8vw, 7.4rem); font-weight:640; line-height:.92; letter-spacing:-.058em;
  opacity:0; transform:translateY(22px);
  animation:rise 1.1s var(--ease) .25s forwards;
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* the paragraph under a title: large, regular, never wider than it reads */
.lead{
  margin:0; max-width:24em;
  font-size:clamp(1.45rem, 2.4vw, 2.15rem); font-weight:400; line-height:1.3; letter-spacing:-.03em;
  text-wrap:pretty;
}

/* ── the ending: room for the cubes to become the mark ── */
.coda{
  position:relative; z-index:1; height:92svh;
  display:grid; place-items:center;
}
.coda__mark{ width:clamp(130px, 17vw, 230px); height:auto; }
/* frame.js draws the mark in glass; the flat one is only for when it can't */
.coda.is-live .coda__mark{ visibility:hidden; }

/* ── reveal on view: pages.js adds .is-in, once ──────── */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }


/* ============================================================
   .lux: About us and Products.
   Luxury rather than tech: everything centred, light weights at
   large sizes, a warm ivory ink, no dividers at all, only space,
   and reveals that come slowly out of a soft blur.
   ============================================================ */
.lux{ --ink:#ECE9E3; --line:rgba(236,233,227,.14); --slow:cubic-bezier(.16,.8,.2,1); }
.lux .pill__core{ fill:#ECE9E3; }
.lux .page{ padding-top:0; text-align:center; }

/* the reveal, slower and out of focus */
.js .lux .reveal{
  filter:blur(8px); transform:translateY(16px);
  transition:opacity 1.6s var(--slow), transform 1.8s var(--slow), filter 1.6s var(--slow);
  transition-delay:calc(var(--i, 0) * 160ms);
}
.js .lux .reveal.is-in{ filter:none; transform:none; }

/* the opening screen: a title and one quiet line, alone */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12svh 0 6svh;
}
.lux .page__title{
  margin:0 0 clamp(26px, 4svh, 40px);
  font-size:clamp(3.4rem, 8.6vw, 8.2rem); font-weight:300; line-height:.95; letter-spacing:-.055em;
  animation-duration:1.8s;
}
.lux .lead{
  margin:0 auto; max-width:27em;
  font-size:clamp(1.08rem, 1.45vw, 1.28rem); font-weight:300; line-height:1.7; letter-spacing:-.005em;
  opacity:0; animation:rise 1.8s var(--slow) .8s forwards;
}

/* ── pairs: the label and statement pattern, centred and stacked, held apart by space alone ── */
.pairs{ margin:0 auto; max-width:38em; }
.pair{ padding:clamp(56px, 10svh, 96px) 0; }
.pair dt{ margin-bottom:18px; font-size:.95rem; font-weight:500; letter-spacing:.01em; }
.pair dd{ margin:0; font-size:clamp(1.2rem, 1.9vw, 1.55rem); font-weight:300; line-height:1.55; letter-spacing:-.015em; text-wrap:pretty; }

/* a line on its own, large and light, with the part that lands in regular */
.lux .statement{
  margin:clamp(110px, 20svh, 220px) auto; max-width:17em;
  font-size:clamp(1.9rem, 4vw, 3.6rem); font-weight:300; line-height:1.14; letter-spacing:-.045em;
  text-wrap:balance;
}
.lux .statement b{ font-weight:500; }

/* ── trio: three short claims, side by side ── */
.trio{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin:0 auto; max-width:980px;
}
.trio > div{ padding:8px clamp(20px, 3vw, 44px); }
.trio h3{ text-wrap:balance; margin:0 0 14px; font-size:clamp(1.12rem, 1.5vw, 1.32rem); font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.trio p{ margin:0; font-size:1rem; font-weight:300; line-height:1.65; letter-spacing:-.005em; }

/* the closing words before the mark forms */
.outro{ margin:clamp(110px, 20svh, 220px) auto 0; }
.outro h2{ margin:0 0 20px; font-size:clamp(2rem, 4.4vw, 3.8rem); font-weight:300; line-height:1; letter-spacing:-.05em; }
.outro p{ margin:0; font-size:clamp(1.05rem, 1.4vw, 1.22rem); font-weight:300; line-height:1.7; }

/* ── products: each one arrives like a launch ──
   One section per product; the next one is a copy of the block. */
.product .statement{ margin-bottom:0; }
.intro{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10svh 0;
}
.intro__kicker{ margin:0 0 clamp(14px, 2.4svh, 26px); font-size:clamp(1.05rem, 1.5vw, 1.3rem); font-weight:400; letter-spacing:-.005em; }
.intro__name{
  margin:0; padding:0 .06em .08em;
  font-size:clamp(3.6rem, 11.5vw, 11rem); font-weight:300; line-height:.95; letter-spacing:-.058em;
  /* one soft pass of light across the name as it settles, then plain ivory */
  /* the gradient is three times the name's width and always covers it; moving it
     from its right end to its left carries the light across once */
  background:linear-gradient(105deg, var(--ink) 0 43%, #fff 50%, var(--ink) 57% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intro__claim{
  margin:clamp(22px, 3.6svh, 36px) 0 0; max-width:18em;
  font-size:clamp(1.4rem, 2.6vw, 2.3rem); font-weight:300; line-height:1.2; letter-spacing:-.035em;
  text-wrap:balance;
}
/* the drop: "Introducing", then the name out of focus and a touch wide, then the claim */
.js .intro > *{ opacity:0; }
.js .intro__kicker{ transform:translateY(8px); transition:opacity 1.4s var(--slow), transform 1.4s var(--slow); }
.js .intro__name{
  filter:blur(18px); letter-spacing:-.01em; transform:scale(1.04);
  transition:opacity 2.2s var(--slow) .5s, filter 2.2s var(--slow) .5s, letter-spacing 2.6s var(--slow) .5s, transform 2.6s var(--slow) .5s;
}
.js .intro__claim{ transform:translateY(12px); transition:opacity 1.6s var(--slow) 1.6s, transform 1.6s var(--slow) 1.6s; }
.js .intro.is-in > *{ opacity:1; transform:none; }
.js .intro.is-in .intro__name{ filter:none; letter-spacing:-.058em; animation:sheen 2.6s var(--slow) 2.2s both; }
@keyframes sheen{ from{ background-position:100% 0; } to{ background-position:0 0; } }

.product__line{
  margin:0 auto clamp(90px, 16svh, 170px); max-width:26em;
  font-size:clamp(1.12rem, 1.6vw, 1.36rem); font-weight:300; line-height:1.6; letter-spacing:-.012em;
}


/* ── a stage inside a product: a line, something to look at, a note ── */
.stage{ margin:clamp(70px, 12svh, 140px) 0 clamp(80px, 14svh, 150px); }
/* the one that comes straight after a launch screen sits closer to it */
.stage--first{ margin-top:0; }

/* the big arrival: out of the dark, out of focus, and up to size */
.js .lux .epic{
  opacity:0; transform:scale(.9) translateY(50px); filter:blur(24px) brightness(.5);
  transition:opacity 1.9s var(--slow), transform 2.5s var(--slow), filter 2.2s var(--slow);
}
.js .lux .epic.is-in{ opacity:1; transform:none; filter:none; }

/* ── the launch: the name holds the screen, and the thing itself grows
   out of it as the page scrolls (pages.js sets the transforms) ── */
.launch{ position:relative; height:300svh; }
.launch__in{ position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden; }
.launch__in > *{ grid-area:1 / 1; }
.launch .intro{ min-height:0; padding:0; }
.emerge{ width:min(1060px, 92vw); transform-origin:50% 45%; will-change:transform, filter, opacity; }
.emerge .spiral{ height:min(58svh, 520px); }
.stage__line{
  margin:0 auto clamp(46px, 8svh, 86px); max-width:30em;
  font-size:clamp(1.12rem, 1.7vw, 1.5rem); font-weight:300; line-height:1.5; letter-spacing:-.02em;
  text-wrap:pretty;
}
.stage__note{ margin:clamp(26px, 4svh, 44px) auto 0; max-width:36em; font-size:.9rem; font-weight:300; line-height:1.6; }

/* ── the call: a phone talking, a sheet being filled in ── */
.scene{
  display:grid; grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);
  align-items:center; text-align:left;
}
.phone{
  position:relative; margin-left:auto; width:min(100%, 390px);
  padding:30px 26px 24px; border-radius:38px;
  background:#17181C;
  box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 50px 100px -60px #000;
}
.phone__talk{ display:flex; flex-direction:column; gap:15px; }
.ln{ margin:0; font-size:.94rem; font-weight:300; line-height:1.45; letter-spacing:-.01em; }
.ln b{ display:block; margin-bottom:4px; font-size:.8rem; font-weight:500; }
.wave{ display:flex; align-items:flex-end; gap:4px; height:30px; margin-top:24px; }
.wave i{
  flex:1; height:100%; border-radius:2px; background:var(--ink); transform-origin:50% 100%;
  animation:wave 1.15s var(--ease) infinite; animation-delay:var(--d, 0s);
}
@keyframes wave{ 0%,100%{ transform:scaleY(.18); } 50%{ transform:scaleY(1); } }

/* the line between them, with the call's work running along it */
.link{ width:96px; height:130px; overflow:visible; }
.link path{ fill:none; stroke:rgba(236,233,227,.22); stroke-width:1.4; }
.link .go{ stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-dasharray:10 260; animation:flow 2.8s linear infinite; }
@keyframes flow{ from{ stroke-dashoffset:270; } to{ stroke-dashoffset:0; } }

/* the intake sheet */
.paper{
  position:relative; width:min(100%, 430px); padding:30px 30px 34px; border-radius:5px;
  background:#F3F0E9; color:#171A20; transform:rotate(-1.1deg);
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(23,26,32,.08) 31px 32px);
  box-shadow:0 40px 80px -50px #000, 0 1px 0 rgba(255,255,255,.25) inset;
}
.paper__head{ margin:0 0 16px; font-size:.94rem; font-weight:600; letter-spacing:-.01em; }
.pr{ display:grid; grid-template-columns:8.6em minmax(0,1fr); gap:10px; padding:5px 0; }
.pr dt{ font-size:.9rem; font-weight:400; }
.pr dd{ margin:0; font-size:.94rem; font-weight:600; letter-spacing:-.01em; }
.paper__note{ margin:18px 0 0; font-size:.78rem; font-weight:400; line-height:1.5; }
.pen{ position:absolute; right:-34px; bottom:-26px; width:clamp(120px, 15vw, 168px); height:auto; }

/* ── the spiral: many strands, and they answer the pointer ── */
.spiral{ display:block; width:100%; height:min(62svh, 560px); }
.spiral__hint{ margin:14px 0 0; font-size:.9rem; font-weight:300; }
@media (hover: none){ .spiral__hint{ display:none; } }

/* ── small screens ───────────────────────────────────── */
@media (max-width: 899px){
  .page{ width:calc(100vw - 40px); padding-top:clamp(120px, 20svh, 170px); }
  .coda{ height:78svh; }
  .lux .page{ padding-top:0; }
  /* nothing pins on a phone: the name gets its screen, the thing follows it */
  .launch{ height:auto; }
  .launch__in{ position:static; height:auto; display:block; overflow:visible; }
  .launch__in > *{ grid-area:auto; }
  .launch .intro{ min-height:74svh; }
  .emerge{ margin-top:4svh; }
  .emerge .spiral{ height:42svh; }
  .scene{ grid-template-columns:1fr; justify-items:center; gap:46px; }
  .phone{ margin:0; }
  .link{ display:none; }
  .paper{ transform:none; }
  .pen{ right:-18px; bottom:-20px; }
  .trio{ grid-template-columns:1fr; }
  .trio > div{ padding:clamp(34px, 6svh, 48px) 0; }
}

@media (prefers-reduced-motion: reduce){
  .page__title,.lux .lead{ animation:none; opacity:1; transform:none; }
  .js .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .js .intro > *{ opacity:1; transform:none; filter:none; transition:none; }
  .wave i,.link .go{ animation:none; }
  .js .intro.is-in .intro__name{ animation:none; }
  .frame{ transition:none; }
}