/* ------------------- BACKGROUND --------------------------------*/
#holder{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: -1;}
/* ------------------- /BACKGROUND --------------------------------*/
/* ---------------------- PERSON ---------------------------------*/
.custom-scene{height: 100vh;}
.scene-left{position: relative;}
.scene-wrapper{position: relative;margin: 0 auto;height: 100vh;}
.character{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-height: 100%;max-width: 100%;opacity: 1;transition: all ease-in-out .2s;}
.sphere{position: absolute;width: 200px;top: 22%;transition: all ease-in-out .2s;}
.sphere-floating{animation: float 4s ease-in-out infinite;}
.sphere-left{left: 0;}
.sphere-right {right: 0;}
/* амплитуда ±20px = 40px ход */
@keyframes float{
  0%   {transform: translateY(-20px)}
  50%  {transform: translateY(20px)}
  100% {transform: translateY(-20px)}
}
.sphere-top{transform: translateY(-20px) !important;}
.sphere-bottom{transform: translateY(20px) !important;}
.sphere-bright{filter: brightness(1.4) saturate(1.2);}
.sphere-dim{filter: brightness(0.6) saturate(0.8);}
.scene-right{gap: 2rem;margin: 20px;min-height: 500px;}
.right-menu{min-height: 100vh;display: flex;flex-direction: column;justify-content: center;}
@media (min-width: 992px) and (max-width: 1200px){.sphere{width: 150px}}
@media (max-width: 992px){.scene-left{display: none}}
/* ---------------------- /PERSON ----------------------------------*/
/* ------------------------ MENU -----------------------------------*/
.logo-index{max-width: 450px; color: var(--whitecolor)}
.logo-index .col-7{margin-left: -45px;}
.logo-index p{margin-bottom: -7px;margin-left: 80px;font-size: 13px;}
.logo-index h1{line-height: 1em;font-family: "Peace Sans";color: var(--bluecolor);text-transform: uppercase;letter-spacing: 3px;font-size: 3em;text-shadow: 7px 7px 5px #000;}
.logo-index h2{text-transform: none;letter-spacing: 1px;font-size: 1.1em;white-space: nowrap;margin-top: -15px;margin-left: 20px;text-shadow: 3px 4px #000;}
.link-category{
  position: relative;
  overflow: hidden;
  background: var(--gradientcolor);
  border-radius: 10px;
  transform: perspective(500px) rotateY(-20deg);
  text-shadow: 4px 4px 4px var(--darkcolor);
  transition: all ease-in-out 0.3s;
  letter-spacing: 2px;
  text-decoration: none;
  margin: 0;
  padding: 1.6em;
  line-height: 1em;
  box-shadow: rgba(0, 0, 0, 0.17) 0 -23px 25px 0 inset, rgba(0, 0, 0, 0.15) 0 -36px 30px 0 inset, rgba(0, 0, 0, 0.1) 0 -79px 40px 0 inset, rgba(0, 0, 0, 0.06) 0 2px 1px, rgba(0, 0, 0, 0.09) 0 4px 2px, rgba(0, 0, 0, 0.09) 0 8px 4px, rgba(0, 0, 0, 0.09) 0 16px 8px, rgba(0, 0, 0, 0.09) 0 32px 16px;
}
.link-category > *{position: relative; z-index: 1}
.link-category::before{
  content:"";
  position:absolute;
  top:50%;
  right:-18px;
  width:150px;
  height:150px;
  transform: translate(130%, -50%);
  opacity:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
  transition: transform .3s ease, opacity .3s ease;
  background-image: var(--menu-icon);
}
.link-category:hover::before{transform: translate(0, -50%);opacity:.7;}
/* BACKEND: database */
.link-category[data-sphere="left"]{--menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%235e94de' stroke-width='6' stroke-linejoin='round'%3E%3Cellipse cx='64' cy='28' rx='38' ry='14'/%3E%3Cpath d='M26 28v54c0 8 17 14 38 14s38-6 38-14V28'/%3E%3Cpath d='M26 55c0 8 17 14 38 14s38-6 38-14'/%3E%3Cpath d='M26 78c0 8 17 14 38 14s38-6 38-14'/%3E%3C/g%3E%3C/svg%3E");}
/* FRONTEND: browser window + cursor */
.link-category[data-sphere="right"]{--menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%235e94de' stroke-width='6' stroke-linejoin='round'%3E%3Crect x='18' y='22' width='92' height='70' rx='10'/%3E%3Cpath d='M18 40h92'/%3E%3Ccircle cx='34' cy='31' r='3' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='46' cy='31' r='3' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='58' cy='31' r='3' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M78 98l-10-24 24 10-10 4 6 10-6 4-6-10z' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E");}
/* FULLSTACK: stack/layers */
.link-category[data-sphere="both"]{--menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%235e94de' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M64 18l44 20-44 20-44-20 44-20z'/%3E%3Cpath d='M20 62l44 20 44-20'/%3E%3Cpath d='M20 82l44 20 44-20'/%3E%3C/g%3E%3C/svg%3E");}
.link-category:hover{color: var(--whitecolor);transform: perspective(500px) rotateY(20deg);padding: 1em 1.8em;text-shadow: -4px 2px 3px #000000;}
.link-category span{font-size: 1.2rem; line-height: 1px;color: var(--whitecolor);}
.link-category .title{
  font-size: 2.2rem;
  position: relative;
  display: inline-block;
  line-height: 1em;
  color: var(--whitecolor);
  margin-bottom: 10px;
}
.link-category .title::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--darkcolor);
  animation: animate 2.2s ease-in-out infinite;
  will-change: clip-path;
}
.link-category:hover .title{ color:#fff; }
.link-category:hover .title::after{animation-play-state: paused;clip-path: none;}
@keyframes animate{
  0%, 100%{clip-path: polygon(0% 47%, 19% 43%, 34% 48%, 51% 53%, 69% 55%, 88% 52%, 100% 45%, 100% 100%, 0% 100%)}
  50%{clip-path: polygon(0% 47%, 18% 55%, 33% 57%, 52% 53%, 69% 46%, 85% 43%, 100% 48%, 100% 100%, 0% 100%)}
}
@media (max-width: 576px){
  .logo-index .col-7{margin-left: -30px;margin-top: -10px;}
  .logo-index h1{letter-spacing: 2px;font-size: 2.5em;text-shadow: 4px 4px 5px #000;}
  .logo-index h2{font-size: 1em;}
}
/* ------------------------ /MENU -----------------------------------*/