:root{

    --future-dusk-trend: hsla(250,60%,25%,1);
    --deep-emerald: hsla(174,96%,12%,1);
    --trend-aquatic-awe: hsla(190,60%,25%,1);
    --byzantium: hsla(290,40%,25%,1);
    --retrofuture-ultra-magenta: hsla(310,100%,55%,0.7);
    --electric-purple: hsla(275,100%,50%,1);
    --retrofuture-plasma-pink: hsla(335,95%,65%,1);
    --retrofuture-neon-green: hsla(140,100%,50%,1);
    --cyberpunk-hot-red: hsla(5,100%,55%,1);
    --cyberpunk-teal: hsla(175,90%,45%,0.8);
    --color-main-dark-1: hsla(224, 43%, 10%, 1);
    --color-main-dark-2: hsla(220, 29%, 18%, 1);
    --color-main-dark-3: rgb(52, 91, 88);
    --color-main-dark-3-1: rgb(60, 79, 105);
    --color-main-green-1:hsla(175, 82%, 31%, 1);
    --color-main-green-2: hsla(171, 80%, 40%, 1);
    --color-main-green-3: hsla(169, 65%, 51%, 1);
    --color-main-light-1: hsla(156, 65%, 70%, 1);
    --color-main-light-2: hsla(152, 72%, 81%, 1);
    --color-main-light-3: hsla(168, 68%, 65%, 1);
    --ocean-glass-teal: hsla(172, 84%, 32%, 0.15);
    --ocean-glass-red: hsla(0, 100%, 50%, 0.294);
    --ocean-border-green: hsla(172, 84%, 32%, 0.4);
    --ocean-border-red: hsla(0, 84%, 32%, 0.4);
    --ocean-glass-dark: #1e293b66;
    --ocean-border-dark:  oklab(0.372 -0.009 -0.038 / 0.302);
    --read-color-data: oklch(0.704 0.191 22.216);
}

body{
    /*background-color: var(  --trend-aquatic-awe);*/
    /*  background-color: var(--color-main-dark-2);*/
    /* background: linear-gradient(var(--color-main-dark-3), var(--color-main-dark-1) 70%);*/
    background: linear-gradient(to bottom right in oklab, #0c1426 0%, #334155 100%);
    min-height: 100vh;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    position: relative;
}


main{
    z-index: 2;
}

header{
    position: fixed;
    top:0;
    left:0;
    height: 60px;
    width: 100vw;
    color: white;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--color-main-green-1);
    box-shadow: 0 0 20px 10px var(--color-main-dark-2);
    background-color: var(--color-main-dark-2);
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    z-index: 1000;;

}
header .icon-image{
    width: 40px;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

header .icon-image img{
    height: 40px;
}

.main-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 60vh;
    justify-content: center
}


.icon-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.3s ease-in-out;
    width: 150px;
}

.icon-container:hover{
    transform: scale(1.1);
}

.label-name{
    font-weight: bold;
}
.icon-container:hover .label-name{
        color: var(--color-main-green-1) !important;
}

.main-font{
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.main-section .title1{
    font-size: 4rem; 
    color: white;
    font-weight: bold;
}


@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.main-section .title2{
    font-size: 4rem; 
    color: transparent;  /*var( --color-main-green-1);*/
    font-weight: bold;
    --angle: 0deg;
    background-image: linear-gradient(var(--angle),  #14b8a6, #1B91B4);
    /*background-image: linear-gradient(90deg, #14b8a6, #06b6d4, #2563eb);*/
    background-size: 200%;          /* чтобы можно было анимировать */
     background-clip: text;
     -webkit-background-clip: text;
     animation: textanimation 10s linear infinite;
}

@keyframes textanimation{
  to{ --angle: 360deg; }
}

.main-section .text{
    width: 60vw; 
    color: var(--color-main-green-2); 
    margin-top: 20px; 
    text-align: center; 
    line-height: 1.5;
}

.class-k-index{
    width: 100%;
    height: 600px;
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.class-info-elem{
    width: 20vw;
    height: 150px;

}

.class-s-index{
    width: 40vw;
    height: 360px;
}

.section-s{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    left: 10vw;
    margin-top: 30px;
}
.index{
    display: flex;
    align-items: center;
}
.index .icon{
    width: 70px; 
    height: 70px; 
    background-color: var(--color-main-green-1); 
    box-shadow: 0 0 20px 0px var(--color-main-dark-1);
    border-radius: 30%;
    margin-right: 10px;
}

.index .text .t1{
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
}
.index .text .t2{
    color: var(--color-main-green-3);
    font-size: 1rem;
}

.first-line{
    display: flex;
    width: 100%;

}

.numbers .number-top{
    color: white;
    font-size: var(--size, 5rem);
    margin-top: 25px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: bold;
}

.numbers .number-bottom{
    display: flex;
    color: var(--color, var(--color-main-green-2));
    font-size: calc(var(--size, 5rem) / 2.5);
    justify-content: space-evenly;
    font-weight: bold;
}

.red-element{
    background-color: var(--ocean-glass-red) !important;
}

.simple-glass{
    background-color: var(--ocean-glass-teal);
    border: 1px solid var(--ocean-border-green);
    box-shadow: 0 8px 32px #0d94884d, 0 4px 16px #0006, inset 0 1px #ffffff1a;
}

.simple-glass-dark{
    color: white;
    border: 1px solid var(--ocean-border-dark);
}

.simple-glass-dark:hover{
  outline: 3px solid
           color-mix(in oklab, var(--ocean-border-dark) 60%, var(--future-dusk-trend));
  outline-offset: -1%;
  transform: scale(1.05);
    box-shadow: 0 8px 32px #0d948826, 0 4px 16px #0006, inset 0 1px #ffffff14;
    border: 1px solid transparent;
    background-color: color-mix(in oklab, var(--future-dusk-trend) 10%, var(--ocean-glass-dark) 90%); 
    /*    background-color: var(--ocean-glass-dark);*/
}


.simple-glass, .simple-glass-dark{

    border-radius: 1rem;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 3%;
    transition: transform 0.3s ease-in-out;
}

.simple-glass:hover{
    outline: 2px solid;
    outline-color: color-mix(in oklab, var(--color-main-light-2) 0%, var(--future-dusk-trend) 100%);
    
    outline-offset: -1%;
    transform: scale(1.05);
}
.glass-element{
    background-color: var(--ocean-glass-teal);
    border: solid 2px var(--ocean-border-green);
    border-radius: 1rem;
    font-weight: bold;
    padding: 2rem 3rem;

    animation: depth-glow 3.6s ease-in-out infinite;
    box-shadow:
        0 24px 80px hsla(172, 84%, 32%, 0.302),
        0 12px 40px hsla(0, 0%, 0%, 0.502),
        inset 0 2px hsla(0, 0%, 100%, 0.149);
    transition: transform 0.3s ease-in-out, outline 0.3s ease;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.glass-element:hover{
    outline: 2px solid;
    outline-color: color-mix(in oklab, var(--color-main-light-2) 50%, transparent);
    outline-offset: 6px;
    transform: scale(1.05);
}

@keyframes depth-glow {
  0%, 100% {
    box-shadow:
      0 0 20px hsla(172, 84%, 32%, 0.2),      /* #0d948833 */
      0 4px 20px hsla(0, 0%, 0%, 0.4),         /* #0006 */
      inset 0 1px hsla(0, 0%, 100%, 0.1);      /* #ffffff1a */
  }
  50% {
    box-shadow:
      0 0 40px hsla(172, 84%, 32%, 0.4),       /* #0d948866 */
      0 8px 40px hsla(0, 0%, 0%, 0.6),         /* #0009 */
      inset 0 1px hsla(0, 0%, 100%, 0.2);      /* #fff3 */
  }
}
.class-plit-1{
    display: flex; 
    justify-content: flex-start; 
    flex-direction: row; 
    margin-top: 50px; 
    width: 80vw;
}

.chart-area {
  filter: drop-shadow(0 0 6px hsla(171, 80%, 40%, 0.6));
}




/* ───────── Контейнер, внутри которого пробегает «блик» ───────── */
.shimmer-ocean{
  position: relative;
  overflow: hidden;                /* обрезаем выступающие лучи */
}

/* полупрозрачная стёклянная карточка, если нужна */
.ocean-glass-hover{
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.ocean-glass-hover:hover{
  transform: translateY(-4px) scale(1.03);
}

/* сам бегущий градиент‑блик */
.shimmer-ocean::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(90deg,
              transparent,
              oklch(78.024% 0.11966 160.075 / .15),
              transparent);*/

  background: linear-gradient(90deg, #0000, #0d948826, #0000);
  transform: translateX(-100%) skewX(-15deg);
  animation: shimmer-wave 3s infinite;
  pointer-events: none;            /* клики проходят сквозь */
}

/* ключевые кадры: скользим слева направо */
@keyframes shimmer-wave{
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX( 200%) skewX(-15deg); }
}

.class-info-data-st{
    display: flex; 
    width: 100%; 
    height: 100%; 
    justify-content: center; 
    font-size: 1.2rem;
    font-weight: bold; 
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.class-info-data-st span:nth-of-type(2){
    color: var(--color-main-green-2);
}

.class-info-data-st span:nth-of-type(3){
    color: var(--ocean-glass-teal);
    font-size: 0.7rem;
}