/* Foxx Studio preview: About hero "glass shards" (.gh). Script: js/about-glass.js.
   Three layers of support:
   1. No JS: plain stacked text, then the five lines.
   2. JS, no WebGL or reduced motion (default look once html.js is set): visible text on a CSS glass panel.
   3. JS + WebGL (.gh.gh-gl, set by the script): the canvas draws the glass; the DOM text stays in place, transparent. */

/* ---------- 1. base / no JS ---------- */
.gh{position:relative;--vh:100vh;padding:calc(var(--hh) + clamp(28px,6vw,64px)) var(--pad) clamp(40px,7vw,80px);
  background:radial-gradient(62% 48% at 50% 56%,rgba(59,130,255,.12),transparent 72%),var(--bg);
  background:radial-gradient(62% 48% at 50% 56%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 72%),radial-gradient(50% 40% at 88% 8%,rgba(150,175,255,.06),transparent 70%),var(--bg)}
@supports (height:100svh){.gh{--vh:100svh}}
.gh-glow,.gh-c{display:none}
.gh-dom,.five{max-width:1120px;margin-inline:auto}
.gh-k{font:700 .8rem/1.5 var(--fb);letter-spacing:.18em;color:var(--acc);color:color-mix(in srgb,var(--acc) 52%,#fff)}
.gh h1{margin-top:.45em;font-size:clamp(3rem,12vw,8.4rem);line-height:.95}
.gh h1 span,.gh h1 em{display:block}
.gh-story{display:inline-flex;align-items:center;min-height:44px;margin-top:1.3rem;font:700 1.05rem/1 var(--fb);color:var(--ink);white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:.34em}

/* five lines: label + text rows */
.five{margin-top:clamp(40px,7vw,80px)}
.five:focus{outline:0}
.five h2{font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1;max-width:11ch}
.five ol{counter-reset:five;margin-top:26px}
.five li{counter-increment:five;display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:8px;padding:13px 0;border-top:1px solid var(--line)}
.five li:last-child{border-bottom:1px solid var(--line)}
.five li::before{content:counter(five,decimal-leading-zero);grid-row:1/span 2;font:500 .78rem/1.75 var(--fb);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--acc)}
.five li b{font:700 .95rem/1.35 var(--fb);color:var(--ink)}
.five li span{grid-column:2;font-size:.98rem;line-height:1.5;color:var(--mut)}
.gh-back{display:none}
@media(min-width:900px){
  .five{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:clamp(40px,6vw,104px);align-items:start}
  .five ol{grid-column:2;grid-row:1/span 2;margin-top:0}
  .five li{grid-template-columns:2.6rem minmax(8.5rem,11rem) minmax(0,1fr);column-gap:20px;padding:19px 0;align-items:baseline}
  .five li::before{grid-row:auto;line-height:1.35}
  .five li span{grid-column:auto}
}
@media(max-height:700px) and (max-width:899px){
  .five h2{font-size:1.55rem}.five ol{margin-top:14px}.five li{padding:7px 0}.five li b{font-size:.88rem}.five li span{font-size:.9rem;line-height:1.42}
}

/* ---------- 2. JS on: one-screen hero, CSS glass panel ---------- */
html.js .gh{display:grid;place-items:center;min-height:var(--vh);padding:calc(var(--hh) + 20px) 16px 20px;overflow:hidden;isolation:isolate}
html.js .gh-glow{display:block;position:absolute;z-index:0;left:50%;top:calc(50% + var(--hh)/2);width:min(150vw,980px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform;
  background:radial-gradient(closest-side,rgba(59,130,255,.2),rgba(59,130,255,.07) 45%,transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc) 7%,transparent) 45%,transparent)}
html.js .gh-c{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}

html.js .gh-dom{grid-area:1/1;position:relative;z-index:2;display:flex;flex-direction:column;max-width:none;margin:0;box-sizing:border-box;
  --w:max(260px,min(100vw - 2*var(--pad) - 20px,1120px,(var(--vh) - var(--hh) - 150px)*1.7));
  --h:calc(var(--w)/1.7);width:var(--w);height:var(--h);padding:calc(var(--w)*.058) calc(var(--w)*.066);container-type:inline-size;
  align-self:start;margin-top:max(0px,(var(--vh) - var(--hh) - 40px - var(--h))/2);
  border:1px solid rgba(255,255,255,.16);border-radius:calc(var(--w)*.018);
  background:linear-gradient(152deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 46%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 50px 110px -50px #000,0 0 140px -40px rgba(59,130,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 50px 110px -50px #000,0 0 140px -40px color-mix(in srgb,var(--acc) 55%,transparent)}
/* faint cut lines on the CSS panel, echoing the shards */
html.js .gh-dom::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(97deg,transparent calc(33% - 1px),rgba(255,255,255,.1) 33%,transparent calc(33% + 1px)),
    linear-gradient(98deg,transparent calc(73% - 1px),rgba(255,255,255,.1) 73%,transparent calc(73% + 1px)),
    linear-gradient(164deg,transparent calc(62% - 1px),rgba(255,255,255,.07) 62%,transparent calc(62% + 1px))}
html.js .gh-dom>*{position:relative}
html.js .gh-k{font-size:clamp(12px,1.6cqw,16px)}
html.js .gh h1{margin-top:auto;font-size:clamp(2.6rem,10vw,8.6rem);font-size:16.5cqw}
html.js .gh-story{align-self:flex-start;margin-top:1rem;margin-top:2.2cqw;font-size:clamp(16px,2.1cqw,21px)}

/* portrait phones and tablets: taller, narrower slab */
@media(max-aspect-ratio:5/6){
  html.js .gh-dom{--w:max(240px,min(100vw - 32px,560px,(var(--vh) - var(--hh) - 64px)/1.5));
    --h:min(var(--vh) - var(--hh) - 64px,var(--w)*1.45);padding:calc(var(--w)*.085) calc(var(--w)*.075) calc(var(--w)*.07);border-radius:calc(var(--w)*.035)}
  html.js .gh-k{font-size:clamp(11.5px,3.6cqw,15px);letter-spacing:.16em}
  html.js .gh h1{font-size:clamp(2.6rem,14vw,5.4rem);font-size:19cqw}
  html.js .gh-story{margin-top:4.5cqw;font-size:clamp(16px,4.5cqw,21px)}
}

/* short landscape screens (phones on their side) */
@media(max-height:480px) and (min-aspect-ratio:5/6){
  html.js .gh-dom{--w:max(260px,min(100vw - 2*var(--pad) - 20px,1120px,(var(--vh) - var(--hh) - 48px)*1.7))}
  html.js .gh-story{margin-top:0}
}

/* the two panels share one grid cell; the script toggles .is-open */
html.js .gh .five{grid-area:1/1;position:relative;z-index:3;width:min(1120px,100vw - 2*var(--pad) - 20px);max-width:none;margin:0;visibility:hidden;opacity:0}
html.js .gh.is-open .five{visibility:visible;opacity:1}
html.js .gh.is-open .gh-dom{visibility:hidden}

/* Back: a glass sliver */
html.js .gh-back{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-self:start;min-height:48px;margin-top:24px;padding:0 34px 0 28px;
  font:700 .95rem/1 var(--fb);color:var(--ink);white-space:nowrap}
html.js .gh-back::before,html.js .gh-back::after{content:"";position:absolute;z-index:-1;clip-path:polygon(13px 0,100% 0,calc(100% - 22px) 100%,0 100%);transition:background .4s var(--ex)}
html.js .gh-back::before{inset:0;background:linear-gradient(100deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 40%,rgba(255,255,255,.34))}
html.js .gh-back::after{inset:1px;background:linear-gradient(100deg,#1b2a4c,#101b36 55%,#18294d);background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 16%,#182440),#0f1932 55%,color-mix(in srgb,var(--acc) 24%,#162243))}
html.js .gh-back:hover::after,html.js .gh-back:focus-visible::after{background:linear-gradient(100deg,#243a6c,#14213f 55%,#22386a);background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 34%,#182440),#14203d 55%,color-mix(in srgb,var(--acc) 44%,#162243))}
html.js .gh-back:active::after{background:#0d1730}
@media(min-width:900px){html.js .gh-back{grid-column:1;grid-row:2;align-self:end;margin-top:34px}}
@media(max-height:700px) and (max-width:899px){html.js .gh-back{min-height:44px;margin-top:14px}}
@media(max-width:899px){html.js .gh .five{width:min(640px,100vw - 32px)}}

/* ---------- 3. WebGL on: canvas draws the glass, DOM text is kept but transparent ---------- */
html.js .gh.gh-gl .gh-c{display:block}
html.js .gh.gh-gl .gh-dom{border-color:transparent;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.js .gh.gh-gl .gh-dom::before{display:none}
html.js .gh.gh-gl .gh-dom,html.js .gh.gh-gl .gh-k,html.js .gh.gh-gl .gh-story{color:transparent;text-decoration-color:transparent}
html.js .gh.gh-gl .gh-dom ::selection{color:transparent;background:rgba(59,130,255,.45);background:color-mix(in srgb,var(--acc) 45%,transparent)}
html.js .gh.gh-gl .five{transition:opacity .3s ease,visibility 0s linear .3s}
html.js .gh.gh-gl.is-open .five{transition:opacity .2s ease,visibility 0s}
html.js .gh.gh-gl .five>h2,html.js .gh.gh-gl .five li,html.js .gh.gh-gl .gh-back{opacity:0;transform:translate3d(0,18px,0);transition:opacity .25s ease,transform 0s linear .3s}
html.js .gh.gh-gl.is-open .five>h2,html.js .gh.gh-gl.is-open .five li,html.js .gh.gh-gl.is-open .gh-back{opacity:1;transform:none;transition:opacity .9s var(--ex) var(--dl,.45s),transform 1.1s var(--ex) var(--dl,.45s)}
html.js .gh.gh-gl .five li:nth-child(1){--dl:.55s}html.js .gh.gh-gl .five li:nth-child(2){--dl:.62s}html.js .gh.gh-gl .five li:nth-child(3){--dl:.69s}
html.js .gh.gh-gl .five li:nth-child(4){--dl:.76s}html.js .gh.gh-gl .five li:nth-child(5){--dl:.83s}html.js .gh.gh-gl .gh-back{--dl:.92s}
/* static mode (slow device): no shatter to wait for */
html.js .gh.gh-gl[data-fx=static].is-open .five>h2,html.js .gh.gh-gl[data-fx=static].is-open .five li,html.js .gh.gh-gl[data-fx=static].is-open .gh-back{transition-delay:0s}

html.rm .gh *,html.rm .gh *::before,html.rm .gh *::after{transition:none!important}