/* Návrh A · Sklo: barevná atmosféra a skleněné panely, kurzor nechává na hladině pozadí jemnou stopu */
body.skin-glass{background:var(--bg-deep);overflow-x:hidden}
#water{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.skin-glass .top,.skin-glass main{position:relative;z-index:1}

/* sklo */
.skin-glass .panel,.skin-glass .node,.skin-glass .flow-res,.skin-glass .top{
  position:relative;
  background:color-mix(in oklab,var(--surface) 36%,transparent);
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid color-mix(in oklab,white 13%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,white 24%,transparent),0 24px 60px -30px rgb(0 0 0 / .55);
}
.skin-glass .top{margin:10px clamp(10px,3vw,28px) 0;border-radius:18px;padding:10px 14px}
:root[data-theme="light"] .skin-glass .panel,:root[data-theme="light"] .skin-glass .node,:root[data-theme="light"] .skin-glass .flow-res,:root[data-theme="light"] .skin-glass .top{
  background:color-mix(in oklab,white 55%,transparent);border-color:color-mix(in oklab,white 80%,transparent);box-shadow:inset 0 1px 0 white,0 24px 60px -34px rgb(40 40 90 / .3)}
/* odlesk na hraně podle směru kurzoru */
.skin-glass .panel::before,.skin-glass .flow-res::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang,210deg),transparent 0 72%,color-mix(in oklab,white 50%,transparent) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.skin-glass .btn:not(.btn-primary){background:color-mix(in oklab,var(--ink) 8%,transparent);border-color:color-mix(in oklab,white 14%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.skin-glass .field input,.skin-glass .field textarea{background:color-mix(in oklab,var(--bg-deep) 55%,transparent);border-color:color-mix(in oklab,white 12%,transparent)}

/* úvod: fotka je za sklem v rámu */
.skin-glass .hero .pic{border-radius:32px;padding:10px}
.skin-glass .hero .pic img{position:relative;inset:auto;border-radius:24px;height:100%}
.skin-glass .hero .hello-word{background:linear-gradient(100deg,var(--ink) 30%,var(--brand-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .skin-glass .hero .hello-word{background:linear-gradient(100deg,var(--ink) 30%,var(--brand));-webkit-background-clip:text;background-clip:text}
.skin-glass .hero .welcome{border-radius:18px}

.skin-glass .lang{border-radius:24px}
.skin-glass .lang .code{background:linear-gradient(180deg,var(--ink),color-mix(in oklab,var(--ink) 40%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-glass .flow-lines{display:none}
.skin-glass .flow-n{background:color-mix(in oklab,var(--brand) 85%,white 0%)}
.skin-glass .app{border-radius:36px}
.skin-glass .app .stage{position:relative}
.skin-glass .app .stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--accent);filter:blur(70px);opacity:.25}

/* dlaždice se při najetí přiblíží, zvednou a nakloní ke kurzoru (hover.js přidá .lift) */
.skin-glass .lift{
  --rx:0deg;--ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .55s cubic-bezier(.22,1.25,.36,1),box-shadow .45s var(--ease-out),border-color .3s,opacity .3s;
}
.skin-glass .lift.is-lift{
  z-index:2;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.035);
  background-image:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .09),transparent 60%);
  box-shadow:inset 0 1px 0 color-mix(in oklab,white 28%,transparent),0 36px 70px -30px rgb(0 0 0 / .7);
}
:root[data-theme="light"] .skin-glass .lift.is-lift{background-image:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .6),transparent 60%);box-shadow:inset 0 1px 0 white,0 36px 70px -34px rgb(40 40 90 / .4)}
.skin-glass .lift.is-lift:active{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-1px) scale(1.01);transition-duration:.15s}
.skin-glass .flow-opts:has([aria-pressed="true"]) .node.is-lift{opacity:1}