/* Foxx Studio: Services hero. Glass cube service slider.
   Owns every .cube / .cb-* rule. Reuses .wrap, .btn and "h1 em" from style.css. */

.cube{
  position:relative;isolation:isolate;overflow:hidden;
  height:100vh;height:100svh;min-height:600px;
  background:var(--bg);color:var(--ink);
  touch-action:pan-y; /* page keeps scrolling up/down; sideways drags turn the cube */
}
/* soft fade into the next section, keeps the info text readable */
.cube::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
}

/* WebGL canvas: fills the section, shown once the first frame is ready */
.cb-c{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:0;
  opacity:0;transition:opacity .7s ease;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.cube.cb-gl .cb-c{opacity:1}
.cube.cb-drag .cb-c{cursor:grabbing}

/* UI layer: a 3-row grid (headline / free zone for the cube / info) */
.cb-ui{
  position:relative;z-index:2;height:100%;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;
  padding-top:calc(var(--hh,72px) + clamp(14px,2.6vh,28px));
  padding-bottom:clamp(20px,4.5vh,48px);
  pointer-events:none;
}
.cb-h1,.cb-info,.cb-arrows,.cb-dots{pointer-events:auto}

/* real HTML headline: modest, top-left under the header */
.cube .cb-h1{
  grid-area:1/1/2/3;justify-self:start;margin:0;max-width:22ch;
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.3rem,1.02rem + 1.05vw,2rem);line-height:1.08;
  letter-spacing:calc(-.045em*var(--tr,1));text-wrap:balance;
}

/* info block: bottom-left. --cb-ih (set by JS) keeps its top edge steady between services */
.cb-info{
  grid-area:3/1/4/3;justify-self:start;align-self:end;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  width:min(30rem,100%);min-height:var(--cb-ih,0px);
}
.cube .cb-t{
  margin:0 0 .5rem;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.45rem,1.18rem + 1.25vw,2.25rem);line-height:1.08;
  letter-spacing:calc(-.045em*var(--tr,1));text-wrap:balance;
}
.cube .cb-d{
  margin:0 0 1.2rem;max-width:36ch;color:var(--mut);
  font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.5;
}

/* arrows: bottom-right on phones/tablets, bottom-centre on wide screens */
.cb-arrows{grid-area:3/1/4/3;justify-self:end;align-self:end;display:flex;gap:10px;margin-bottom:2px}
.cb-ab{
  width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .25s ease,border-color .25s ease,transform .35s var(--ex,ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cb-ab svg{width:20px;height:20px;display:block}
.cb-ab:hover{background:rgba(255,255,255,.12);border-color:var(--acc)}
.cb-ab:active{transform:scale(.92)}
.cb-ab:focus-visible,.cb-dots button:focus-visible{outline:2px solid var(--acc2,var(--acc));outline-offset:3px}

/* dots: right edge, vertically centred. 44px touch targets around small marks */
.cb-dots{
  position:absolute;right:-17px;top:50%;transform:translateY(-50%);
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
}
.cb-dots li{margin:0;padding:0;display:block}
.cb-dots button{
  position:relative;display:block;width:44px;height:44px;padding:0;border:0;border-radius:12px;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cb-dots button::before{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:3px;
  background:var(--ink);opacity:.38;
  transition:height .45s var(--ex,ease),margin .45s var(--ex,ease),opacity .25s ease,background .25s ease;
}
.cb-dots button:hover::before{opacity:.8}
.cb-dots button[aria-current="true"]::before{height:24px;margin-top:-12px;background:var(--acc);opacity:1}

/* giant outlined number: behind the UI. Above the info block on phones (never over its text) */
.cb-num{
  grid-area:2/1/3/3;justify-self:end;align-self:end;z-index:-1;pointer-events:none;
  font-family:var(--fd);font-weight:900;font-size:min(38vw,19vh);line-height:.8;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(242,246,253,.2);
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 20%,transparent);
  transform:translateX(9%);margin-bottom:12px;
  -webkit-user-select:none;user-select:none;
}

/* text swap when the service changes */
@keyframes cbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cbNum{from{opacity:0}to{opacity:1}}
.cb-info.cb-sw>.cb-t,.cb-info.cb-sw>.cb-d{animation:cbIn .6s var(--ex,ease) backwards}
.cb-info.cb-sw>.cb-d{animation-delay:.07s}
.cb-num.cb-sw{animation:cbNum .7s ease both}

/* static fallback (no WebGL, slow device, or reduced motion): CSS headline + glass square */
.cb-fb{
  display:none;position:absolute;z-index:1;left:var(--pad,20px);right:var(--pad,20px);
  top:var(--cb-cy,46%);transform:translateY(-50%);pointer-events:none;
  font-family:var(--fd);font-weight:900;font-size:var(--cb-fs,clamp(3rem,13vw,13rem));
  line-height:.86;letter-spacing:-.05em;color:var(--ink);
}
.cb-fb span{display:block;white-space:nowrap}
.cb-fb span+span{text-align:right}
.cb-fb::after{
  content:"";position:absolute;left:var(--cb-cx,50%);top:50%;width:var(--cb-s,30vmin);height:var(--cb-s,30vmin);
  transform:translate(-50%,-50%) rotate(-9deg);border-radius:13%;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 46%,rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -26px 46px -22px var(--acc),0 34px 80px -34px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(7px) saturate(1.6);backdrop-filter:blur(7px) saturate(1.6);
}
.cube.cb-static .cb-fb{display:block}
.cube.cb-static .cb-c{display:none}
.cube.cb-static{
  background:
    radial-gradient(60% 50% at 56% 46%,color-mix(in srgb,var(--fx2,var(--acc)) 16%,transparent),transparent 70%),
    radial-gradient(70% 60% at 100% 100%,color-mix(in srgb,var(--fx3,var(--acc)) 12%,transparent),transparent 70%),
    var(--bg);
}

/* wide screens: arrows bottom-centre, number bleeding off the bottom-right corner */
@media (min-width:1100px){
  .cb-arrows{justify-self:center;margin-bottom:2px}
  .cb-num{
    grid-area:2/1/4/3;margin-bottom:0;font-size:min(34vw,44vh);
    transform:translate(5%,calc(24% + clamp(20px,4.5vh,48px)));
  }
}

@media (prefers-reduced-motion:reduce){
  .cb-c,.cb-ab,.cb-dots button::before{transition:none}
  .cb-info.cb-sw>.cb-t,.cb-info.cb-sw>.cb-d,.cb-num.cb-sw{animation:none}
}