@import "../pages/mixins";

.home-header {
  @add-mixin absolute-expand;
}

.dynamic-home-header {
  /* sizing */
  width: 100%;
  height: 200px;
  /* pin to bottom */
  position: absolute;
  bottom: 0;
  left: 0; /* IE fix */
  z-index: 1;

  /* main image container */
  & .dynamic-home-image {
    z-index: -1;

    & .dynamic-home-items {
      /* sizing */
      width: 100%;
      max-width: 80rem;
      margin-left: auto;
      margin-right: auto;

      /* hidden elements during transition */
      &.is-transitioning {
        /* illustration and hotspots hidden */
        & .dynamic-home-illustration-img,
        & .dynamic-home-hotspots {
          opacity: 0;
        }
        /* illustration will float up from underneath */
        & .dynamic-home-illustration-img {
          transform: translateY(5px);
        }
      }

      /* transition in */
      &:not(.is-transitioning) {
        & .dynamic-home-illustration-img,
        & .dynamic-home-hotspots {
          transition:
            opacity 0.5s ease-out,
            transform 0.5s ease-out;
        }
        /* hotspots fade in more gradually */
        & .dynamic-home-hotspots {
          transition-duration: 1s;
        }
      }

      & .dynamic-home-hotspots,
      & .dynamic-home-illustration {
        /* sizing */
        width: 80rem;
        height: 200px;
        /* positioning */
        @add-mixin absolute-horizontal-center;
        /* transitions */
        animation: fadein 2s;
        /* keep home-slider buttons clickable */
        overflow: hidden;

        /* show entire tooltip when hovering parent */
        &:hover {
          overflow: visible;
        }
      }

      /* hotspots & tooltip container */
      & .dynamic-home-hotspots {
        z-index: 1;

        /* prevent random div from obscuring tabs */
        & > div {
          max-height: 200px;
        }

        /* individual hotspot theming */
        & .hotspot {
          /* hotspots = links */
          cursor: pointer;
          /* transitions */
          opacity: 0.666;
          transition: opacity 0.5s;

          /* prevent "+" from obscuring hover target ¯\_(ツ)_/¯ */
          & .st1 {
            pointer-events: none;
          }

          /* prevent tooltips from triggering unnecessarily */
          & [id*=draw] {
            display: none;
          }

          /* interactions */
          &:hover {
            opacity: 1;
          }
        }

        /* hide hotspots on small screens */
        @add-mixin for-sm {
          display: none;
        }
      }

      /* illustration image sizing */
      & .dynamic-home-illustration-img {
        width: 100%; /* sized via container */
      }
    }

    /* tooltip styling */
    & .tooltip-home {
      background-color: var(--dark-2);
      width: 150px;
      height: auto;
      opacity: 0;
      position: absolute;
      /* prevent from obscuring slider buttons */
      pointer-events: none;
      z-index: -1;
      /* transitions */
      transition: opacity 0.2s ease-out;

      & .tooltip-title {
        @add-mixin heading-font;
        @add-mixin font-uppercase;
        color: var(--white);
        padding: var(--gutter-half);
      }
      & .tooltip-body {
        padding: calc(var(--gutter)/2);
        & .tooltip-data-title {
          @add-mixin font-xxs;
          @add-mixin heading-font;
          color: var(--light-1);
        }
        & .tooltip-data-value {
          @add-mixin font-sm;
          @add-mixin body-font;
        }
      }
    }
  }

  /* change bg color as image fades in and out */
  & + .dynamic-home-bg {
    @add-mixin absolute-expand;
    z-index: -11;
    opacity: 0.4;
    transition: background-color 1s ease-in;
  }
}

/* keyframe animations */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
