/* Last full read through 27/12/2020

*
*##############################################
*# Landing sass        /_sass/env/landing.sass
*##############################################
*
*/

// Fallback for browsers that do not support Custom Properties $landing-height: 100vh

body

animation: fadeInAnimation ease 1s
animation-iteration-count: 1
animation-fill-mode: forwards

@keyframes fadeInAnimation

0%
  opacity: 0

100%
  opacity: 1

.landing__page

display: flex
flex-direction: column
height: $landing-height
height: calc(var(--vh, 1vh) * #{strip-unit($landing-height)})

.page__half

align-items: flex-end
display: flex
height: 50vh
width: 100vw

.env__text

color: $white
display: flex
flex-direction: column

.landing__strap

display: none

.landing__link

color: $white
text-decoration: none

.landing__title

font-size: $font-size
padding: 2rem 0
text-align: center
width: 100vw

.hero__overlay

// additional css from glocal
height: 50%
position: absolute

.hero__filter

@include image-filter--mix

.env–walk

background-color: $opd-coral

.env–data

background-color: $opd-blue

@media screen and ( min-width: 768px )

.landing__page
  flex-direction: row

.page__half
  display: block
  height: 100vh
  width: 50vw

.env__text
  flex-direction: column
  position: absolute
  top: 50vh
  transition: .6s ease-in-out

  &:focus-within > .landing__strap
    @include reveal-landing-strap

  &:hover > .landing__strap
    @include reveal-landing-strap

.landing__strap
  @include default-trans
  display: flex
  flex-direction: column
  max-height: 0
  justify-content: space-around
  max-width: 400px
  overflow: hidden
  width: 40vw
  padding: 0 3rem

.landing__cta
  font-size: $sm-font-size
  display: flex
  flex-direction: row
  justify-content: space-between
  padding: $font-size 0

  > a
    align-self: center
    border-radius: 6px
    box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
    padding: 1rem 0
    text-align: center
    text-decoration: none
    transition: .3s ease-in-out
    width: 40%

.primary__cta
  background-color: $opd-light-blue
  border: solid 1px $opd-light-blue
  color: $opd-blue
  &:hover
    background-color: transparent
    color: $opd-light-blue

.secondary__cta
  background-color: transparent
  border: solid 1px $white
  color: $white
  &:hover
    background-color: $white
    color: $opd-blue

.primary__cta, .secondary__cta
  &:hover
    box-shadow: 0 10px 15px -5px rgba($pure-black, .5)

.env__text.env--walk
  @include build-in(slide-from-left)
  border-radius: 6px 0 0 6px
  box-shadow: -12px 10px 10px -10px $grey
  right: 50%
  transform: translateX(0)
  &:hover
    box-shadow: -20px 20px 20px -10px $grey

.env__text.env--data
  @include build-in(slide-from-right)
  border-radius: 0 6px 6px 0
  box-shadow: 12px 10px 10px -10px $grey
  left: 50%
  transform: translateX(0)
  &:hover
    box-shadow: 20px 20px 20px -10px $grey

.landing__title
  width: auto
  padding: 3rem 2rem

.hero__overlay
  width: 50%
  height: 100%
  top: 0

.env--walk
  .landing__title
    text-align: right

.env--data
  .landing__title
    text-align: left

@include slide-from-right

@include slide-from-left