:root {
  --primary-h: 76;
  --primary-s: 62%;
  --primary-l: 50%;

  /* --primary   : #a5cf30; */
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));

  --secondary-h: 210;
  --secondary-s: 2%;
  --secondary-l: 64%;
  /* --secondary   : #a2a3a5; */
  --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));

  --accent-1-h: 100;
  --accent-1-s: 89%;
  --accent-1-l: 75%;
  /* --accent-1   : #AAF683; */
  --accent-1: hsl(var(--accent-1-h), var(--accent-1-s), var(--accent-1-l));

  --accent-2-h: 100;
  --accent-2-s: 66%;
  --accent-2-l: 17%;

  /* --accent-2   : #234119; */
  --accent-2: hsl(var(--accent-2-h), var(--accent-2-s), var(--accent-2-l));

  --accent-3-h: 262;
  --accent-3-s: 45%;
  --accent-3-l: 14%;
  /* --accent-3   : #201335; */
  --accent-3: hsl(var(--accent-3-h), var(--accent-3-s), var(--accent-3-l));

  --tileBackground: var(--accent-3);
  --tileHeadingFont: "Geologica", serif;
  --tileHeadingSize: clamp(1rem, 2.5vw + 1.5rem, 2rem);
  --tileDescriptionSize: clamp(0.9rem, 2.5vw + 1.5rem, 1.1rem);
  --tileHeadingWeight: 500;
  --tileHeadingColor: #404042;
  --tileHeadingColorHover: #404042;
  /* --tileOverlayGradient: rgba(0, 0, 0, 0.7); */
  --tileOverlayGradient: var(--primary);
  --tileOverlayGradientHover: rgba(255, 255, 255, 0.9);
  --tileGap: 20px;
  --tileBorderRadius: 0.5rem;
  --tileShadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
  --tileShadowHover: 0 0 0 8px var(--accent-3);
  --tileBorder: 0px solid transparent;
  --tileBorderHover: 0px solid var(--accent-1);
}

.tm-header .uk-navbar-container,
.dark-image-bg {
  /* background-image:url("../../../images/assets/carbonfiber2.jpg"); */
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
  background-image: url("../../../images/assets/bg-dark.jpg");
  background-repeat: repeat;
  border-bottom: 10px solid var(--primary);
  &.uk-section {
    border-bottom-width: 25px;
    position: relative;
    &:after {
      content: "";
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -25px;
      height: 25px;
    }
  }
  &.footer {
    border-bottom: 0px;
  }
  &.section-border-bottom {
    border-bottom: 15px solid var(--primary);
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  .uk-h1,
  .uk-h2,
  .uk-h3,
  .uk-h4,
  .uk-h5,
  .uk-h6,
  .uk-heading-2xlarge,
  .uk-heading-3xlarge,
  .uk-heading-large,
  .uk-heading-medium,
  .uk-heading-small,
  .uk-heading-xlarge,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }
}

.section-border-bottom {
  position: relative;
  border-bottom: 15px solid var(--primary);
  &:after {
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 15px;
  }
}

.uk-accent-1 {
  background-color: var(--accent-1);
}

.uk-accent-2 {
  background-color: var(--accent-2);
}
.uk-accent-3 {
  background-color: var(--accent-3);
}

.border-top-1 {
  border-top: 10px solid rgba(255, 255, 255, 0.5);
  position: relative;
  box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.3);
  &:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 20px;
    background: var(--primary);
    display: block;
    top: -10px;
    left: calc(50% - 25px);
    z-index: 100;
    border-radius: 0 0 12px 12px;
  }
}

table.uk-table {
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0.5rem;
  border-collapse: separate;
  background: #ffffff;
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
  thead {
    tr {
      th {
        background-color: var(--primary);
        &:not(:last-child) {
          border-right: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
  tbody {
    td:not(:last-child) {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}

.animated-slide-title {
  color: rgba(0, 0, 0, 0);
  letter-spacing: -0.04em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  animation: shine 3s infinite;
  -webkit-mask-image: linear-gradient(-75deg, rgba(56, 75, 255, 0.15) 50%, #002ff5 50%, rgba(56, 75, 255, 0.15) 100%);
  -webkit-mask-size: 200%;
}

.fs-thead-stacked {
  font-weight: bold;
}

.fs-table-column .uk-text-center:has(.fs-thead-stacked) {
  text-align: left !important;
}

.animated-title-block span {
  display: inline-block;
  opacity: 0;
  /* transform: rotateY(-180deg); */
  animation: flipAnimation 0.7s ease-in-out forwards;
}

.accordion-tiles {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  height: 60vh;
  gap: var(--tileGap);
  transition: all 0.6s ease-in-out 0s;
  z-index: 100;
  position: relative;
  .accordion-tile {
    flex-grow: 1;
    flex-basis: 10%;
    height: 100%;
    position: relative;
    transition: all 0.6s ease-in-out 0s;
    background-color: white;
    border: var(--tileBorder);
    border-radius: var(--tileBorderRadius);
    box-shadow: var(--tileShadow);
    overflow: hidden;
    .overlay {
      position: absolute;

      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      z-index: 3;
      background: linear-gradient(to left, transparent, var(--tileOverlayGradientHover));
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
    .content-group {
      z-index: 3;
      /* position: absolute; */
      position: relative;
      height: 100%;
      /* bottom: 0;
      top: 0;
      left: 0;
      right: 0; */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;

      .v-title {
        writing-mode: vertical-rl;
        rotate: 180deg;
        text-orientation: mixed;
        font-family: var(--tileHeadingFont);
        font-weight: var(--tileHeadingWeight);
        font-size: var(--tileHeadingSize);
        color: var(--tileHeadingColor);
        text-wrap: balance;
        padding: 1rem;
        margin: 0;
        transition: all 0.3s ease-in-out 0.3s;
      }
      .content-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .content-left {
          width: 40%;
          padding-left: 2rem;
          .h-title {
            display: none;
            opacity: 0;
            font-family: var(--tileHeadingFont);
            font-weight: var(--tileHeadingWeight);
            font-size: var(--tileHeadingSize);
            color: var(--tileHeadingColor);
            /* width: 100%; */
            text-wrap: balance;
            hyphens: auto;
            /* padding: 2rem 2rem 2rem 0; */
            margin: 0 0 10px 0;
            /* transition: opacity 0.2s ease-in-out 0s, width 0.1s ease-in-out 0.2s,
                height 0.1s ease-in-out 0.2s, padding 0.1s ease-in-out 0.2s; */
            /* transition: opacity 0.2s ease-in-out 0.4s,
              height 0.1s ease-in-out 0.4s; */
            /*  */
            transition: opacity 1s ease-in 0s;
            /* height: 0; */
            /* width: 0; */
            /* padding: 0; */
          }
          .description {
            display: none;
            opacity: 0;
            /* padding: 0 2rem 2rem; */
            margin: 0 0 10px 0;
            font-size: var(--tileDescriptionSize);
            transition: opacity 1s ease-in 0s;
          }
          .uk-button {
            display: none;
            opacity: 0;
            transition: opacity 1s ease-in 0s;
          }
        }
        .img-wrapper {
          width: 60%;
          img {
            display: none;
            opacity: 0;
            object-fit: contain;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            /* transition: all 0.8s ease-in 0s; */
            /* filter: blur(3px);
            mix-blend-mode: multiply; */
            transition: opacity 1s ease-in 0s;
          }
        }
      }
    }
    &:hover,
    &:focus {
      /* flex-grow: 3; */
      flex-basis: 90%;
      z-index: 1;
      /* cursor: pointer; */
      background-color: #ffffff;
      /* border: var(--tileBorderHover); */
      /* box-shadow: var(--tileShadowHover); */
      img {
        filter: blur(0px);
      }
      /* .overlay {
        animation: changeGradient 1s forwards;
      } */
      .content-group {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        height: 100%;
        align-items: start;
        .v-title {
          opacity: 0;
          color: var(--tileHeadingColorHover);
          /* transition: opacity 0.1s ease-in-out 0s; */
          transition: opacity 0s ease-in-out 0s;
        }
        .content-wrapper {
          .content-left {
            .h-title {
              /* color: var(--tileHeadingColorHover); */
              display: block;
              animation: delayedShow 1s forwards 0.5s;
            }
            .description {
              display: block;
              animation: delayedShow 1s forwards 0.5s;
              color: #121212;
            }
            .uk-button {
              display: inline-block;
              animation: delayedShow 1s forwards 0.5s;
            }
          }
          .img-wrapper {
            img {
              display: block;
              animation: delayedShow 1s forwards 0.5s;
            }
          }
        }
      }
    }
  }
  &:hover {
    .accordion-tile:not(:hover) {
      /* background-color: var(--tileBackground); */
      /* img {
        opacity: 0;
      } */
      .v-title {
        /* color: var(--tileHeadingColor);
        opacity: 0.4; */
      }
    }
  }
}

main {
  video {
    box-shadow:
      0 0 0 10px var(--accent-3),
      0 0 20px -1px rgba(0, 0, 0, 0.8);
    border-radius: 12px;
  }
}

/* @keyframes changeGradient {
  0% {
    background: linear-gradient(
      to left,
      transparent,
      var(--tileOverlayGradient)
    );
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    background: linear-gradient(
      to bottom,
      transparent,
      var(--tileOverlayGradientHover)
    );
    opacity: 1;
  }
} */

.accordion-tile:not(:hover) .overlay {
  animation: revertGradient 1s forwards;
}

.uk-open .uk-slide-active.uk-active:has(img) {
  position: relative;
}
.uk-open .uk-slide-active.uk-active:has(img):after {
  content: "ISOFRUIT.GR";
  position: fixed;
  z-index: 100;
  font-size: clamp(14px, 8vw, 100px);
  opacity: 0.3;
  font-weight: 900;
  transform: rotate(-45deg);
  pointer-events: none;
}

@keyframes delayedShow {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes revertGradient {
  0% {
    background: linear-gradient(to bottom, transparent, var(--tileOverlayGradientHover));
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    background: linear-gradient(
      180deg,
      transparent 0%,
      hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3) 20%,
      var(--tileOverlayGradient) 100%
    );
    opacity: 1;
  }
}

@keyframes flipAnimation {
  0% {
    /*transform: rotateY(-180deg); */
    opacity: 0;
  }
  100% {
    /*transform: rotateY(00deg); */
    opacity: 1;
  }
}

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}