// Import Data
@import "partials/data"
/*! File name: main-demo.css
   ------------------------------------------------

   ------------------------------------------------
   Table of Contents
   ------------------------------------------------
    1. Loader Styles
    2. Loading Animation
    3. Animations
    4. Fonts
    5. Base CSS Styles
    6. Typography Styles
    7. Buttons & Triggers Styles
    8. Intro Styles
    9. Preview Styles
    10. Footer Styles
   ------------------------------------------------
   Table of Contents End
   ------------------------------------------------ */

// Import Bourbon
@import "bourbon"

// Import Libs, Mixins and Variables
@import "partials/layout"
@import "partials/mixins"
@import "partials/variables"

/* ------------------------------------------------*/
/* Loader Styles Start
/* ------------------------------------------------*/
.loader
  +position(fixed, 0 0 0 0)
  z-index: 9999
  background-color: transparent
  opacity: 1
  visibility: visible
  transition: all .0s ease-in-out

  &.loaded
    opacity: 0
    visibility: hidden

  &.is-animated
    .loader__darkscreen
      animation: 1s 0.3s ease-in-out 1 both blockMove
    .loader__container
      animation: 1s 0.3s ease-in-out 1 both itemsOpacity

.loader__container
  +position(absolute, 0 null null 0)
  width: 100%
  height: 100%
  background-color: tint($base-color, 2%)
  .loader-content
    position: absolute
    +center
    .loader-logo
      width: 100px
      img
        display: block
        width: 100%
        height: auto

.loader__darkscreen
  +position(absolute, 0 null null 0)
  width: 100%
  height: 100%
  background-color: $black
  transform: translateY(102%)

.fadeIn
  animation: fadeIn .3s 1
  animation-fill-mode: both

.fadeOut
  animation: fadeOut .3s 1
  animation-fill-mode: both

@keyframes blockMove
  0%
    transform: translateY(102%)
  35%
    transform: translateY(0)
  55%
    transform: translateY(0)
  100%
    transform: translateY(-102%)

@keyframes itemsOpacity
  0%
    opacity: 1
  35%
    opacity: 1
  60%
    opacity: 0
  100%
    opacity: 0

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes fadeOut
  from
    opacity: 1
  to
    opacity: 0
/* ------------------------------------------------*/
/* Loader Styles End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Loading Animation Start
/* ------------------------------------------------*/
body
  .intro__header,
  .headline__subtitle,
  h1,
  .demo
    opacity: 0
  &.loaded
    .headline__subtitle
      animation: 0.4s 0.3s ease-in-out 1 both slideInUp
    h1
      animation: 0.4s 0.4s ease-in-out 1 both slideInUp
    .intro__header,
    .demo
      animation: 0.8s 0.6s ease-in-out 1 both fadeIn
/* ------------------------------------------------*/
/* Loading Animation End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Animations Start
/* ------------------------------------------------*/
@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes slideInUp
  from
    transform: translate3d(0, 10px, 0)
    opacity: 0
    visibility: visible
  to
    transform: translate3d(0, 0, 0)
    opacity: 1
/* ------------------------------------------------*/
/* Animations End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Fonts Start
/* ------------------------------------------------*/
// Poppins Font
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
/* ------------------------------------------------*/
/* Fonts End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Base CSS Styles Start
/* ------------------------------------------------*/
*, *::before, *::after
  box-sizing: border-box

button:active, button:focus
  outline: none !important

button::-moz-focus-inner
  border: 0 !important

input::-moz-focus-inner
  border: 0 !important

::selection
  background-color: rgba($white, 0.6)
  color: $text-dark
  text-shadow: none

::-webkit-scrollbar
  display: none
  width: 5px
  background: tint($base-color, 10%)
  +MQ(M)
    display: block

::-webkit-scrollbar-track
  border-radius: 20px
  background-color: tint($base-color, 10%)

::-webkit-scrollbar-thumb
  background-color: tint($base-color, 30%)
  border-radius: 10px

html
  font-family: sans-serif
  font-size: 62.5%
  +font-smoothing

html,
body
  width: 100%
  height: 100%

body
  position: relative
  min-width: 360px
  overflow-x: hidden !important
  font: normal 400 1.6rem/1.6 $default-font
  text-rendering: optimizeLegibility
  color: $text-light-base
  background-color: $base-color

section
  position: relative
  min-width: 360px

a
  text-decoration: none
  outline: none
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  transition: all $animation-duration ease-in-out

img
  display: block
  width: 100%
  height: auto

.overflow-hidden
  overflow: hidden !important
/* ------------------------------------------------*/
/* Base CSS Styles End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Typography Styles Start
/* ------------------------------------------------*/
.headline__subtitle
  display: block
  font: normal 400 1.4rem/1 $default-font
  text-transform: uppercase
  letter-spacing: 0.1rem
  color: $text-light
  margin-bottom: 2.4rem
  +MQ(XXL)
    font-size: 1.6rem

h1
  font: normal 400 2.8rem/1.4 $default-font
  color: $text-light
  +MQ(M)
    font-size: 3.5rem
    max-width: 540px
    margin: 0 auto
  +MQ(XXL)
    font-size: 5rem
    max-width: 780px

h2
  font: normal 300 2rem/1.4 $default-font
  color: $text-mute
  +MQ(M)
    font-size: 2.8rem
    max-width: 440px
  +MQ(XXL)
    font-size: 3.6rem
    max-width: 600px

.links__caption
  p
    font: normal 500 1.6rem/1.4 $default-font
    color: $text-light
    margin-bottom: 0.5rem
  span
    display: block
    font: normal 300 1.1rem/1 $default-font
    text-transform: uppercase
    letter-spacing: 0.1rem
    color: tint($text-mute, 10%)
  +MQ(M)
    p
      font-size: 1.8rem
    span
      font-size: 1.3rem

.footer__caption
  font: normal 300 2rem/1.4 $default-font
  color: $text-light
  margin: 0 auto 3.2rem
  +MQ(M)
    font-size: 2.8rem
    max-width: 320px
  +MQ(XXL)
    font-size: 3.6rem
    max-width: 420px

.footer__links
  p,
  a
    font: normal 400 1.1rem/1.3 $default-font
    text-transform: uppercase
    letter-spacing: 0.1rem
    color: $text-mute
  a
    transition: color 0.5s
    .no-touch &:hover
      color: $text-light
  +MQ(M)
    p,
    a
      font-size: 1.2rem
/* ------------------------------------------------*/
/* Typography Styles End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Buttons & Triggers Styles Start
/* ------------------------------------------------*/
.btn
  position: relative
  display: block
  border: none
  outline: 0
  padding: 0
  font: inherit
  background-color: transparent
  cursor: pointer
  text-decoration: none
  user-select: none
  overflow: hidden
  text-align: center

.btn-l
  height: 4rem
  padding: 0 2rem
  border: 2px solid $white
  border-radius: 2rem
  margin-right: 2rem
  font: normal 600 1.4rem/3.6rem $default-font
  color: $text-light
  &:last-of-type
    margin-right: 0
  .btn-title
    display: block
    position: relative
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .btn-hover
    display: block
    +position(absolute, 0 null null 0)
    width: 100%
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    .btn-title
      transform: translateY(-100%)
    .btn-hover
      transform: translateY(0)

.btn-xl
  display: block
  height: 5.2rem
  padding: 0 2.4rem
  border: 2px solid $white
  border-radius: 2.6rem
  margin-right: 2rem
  font: normal 600 1.6rem/4.9rem $default-font
  color: $text-light
  &:last-of-type
    margin-right: 0
  .btn-title
    display: block
    position: relative
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .btn-hover
    display: block
    +position(absolute, 0 null null 0)
    width: 100%
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    .btn-title
      transform: translateY(-100%)
    .btn-hover
      transform: translateY(0)
  +MQ(M)
    display: inline-block

.to-top
  position: relative
  display: block
  +position(fixed, null 15px 40px null)
  width: 3rem
  height: 4.2rem
  line-height: 3.9rem
  border: 2px solid $white
  color: $text-light
  font-size: 1.4rem
  border-radius: 1.5rem
  overflow: hidden
  text-align: center
  visibility: hidden
  opacity: 0
  transition: opacity 0.3s 0s, visibility 0s 0.3s
  .btn-title
    display: block
    position: relative
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .btn-hover
    display: block
    +position(absolute, 0 null null 0)
    width: 100%
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    opacity: 1
    .btn-title
      transform: translateY(-100%)
    .btn-hover
      transform: translateY(0)
  &.is-visible
    visibility: visible
    opacity: 1
  &.fade-out
    opacity: 0.4
  +MQ(XL)
    +position(fixed, null 28px 28px null)
 
.btn-outline-light
  border: 2px solid $white
  background-color: transparent
  color: $text-light

.btn-light
  border: 2px solid $white
  background-color: $white
  color: $text-dark
/* ------------------------------------------------*/
/* Buttons & Triggers Styles End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Intro Styles Start
/* ------------------------------------------------*/
.intro
  position: relative
  width: 100%

.intro__header
  position: relative
  padding: 4rem 0
  +MQ(M)
    height: 96px
    padding: 0

.header__container,
.intro__container
  position: relative
  padding: 0 calc(10% - 1.5rem)
  +MQ(XL)
    max-width: 1140px
    margin: 0 auto
    padding: 0
  +MQ(XXL)
    max-width: 1320px
  +MQ(XXXL)
    max-width: 1600px

.header__container
  +MQ(M)
    height: 100%

.header__logo
  position: relative
  margin-bottom: 1.2rem
  img
    width: auto
    margin: 0 auto
  +MQ(M)
    margin-bottom: 0
    img
      margin: 0

.header__buttons

.intro__content
  position: relative
  padding: 0

.headline
  position: relative
  padding: 4rem 0 11rem 0
  background-image: url("../img/demo/large-type.svg")
  background-repeat: no-repeat
  background-position: center bottom
  background-size: 100%
  +MQ(M)
    padding: 5rem 0 22.8rem 0
  +MQ(XXL)
    padding: 8rem 0 31rem 0

.intro__decoration
  position: relative
  height: 200px
  width: 100%
  overflow: hidden
  margin-top: -8.6rem
  img
    display: block
    position: absolute
    top: 0
    +center(x)
    height: 100%
    width: auto
    margin: 0 auto
  +MQ(M)
    height: 280px
    margin-top: -16.2rem
  +MQ(XXL)
    height: 400px
    margin-top: -25rem
/* ------------------------------------------------*/
/* Intro Styles End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Preview Styles Start
/* ------------------------------------------------*/
.demo
  position: relative
  width: 100%

.demo__links
  position: relative
  padding: 0 calc(10% - 1.5rem) 3rem calc(10% - 1.5rem)
  overflow: hidden
  +MQ(M)
    padding: 0 calc(10% - 1.5rem) 4rem calc(10% - 1.5rem)
  +MQ(XL)
    max-width: 1140px
    margin: 0 auto
    padding: 5rem 0 4rem 0
  +MQ(XXL)
    max-width: 1320px
    padding: 8rem 0 5rem 0
  +MQ(XXXL)
    max-width: 1600px

.links__headline
  position: relative
  padding: 5rem 0
  +MQ(M)
    padding: 5rem 0 7rem 0
  +MQ(XXL)
    padding: 5rem 0 9rem 0

.links__item
  display: block
  position: relative
  margin-bottom: 5rem
  +MQ(M)
    margin-bottom: 7rem
  +MQ(XL)
    &.left
      padding-right: 1.5rem
    &.right
      padding-left: 1.5rem
  +MQ(XXL)
    margin-bottom: 9rem
    &.left
      padding-right: 2.5rem
    &.right
      padding-left: 2.5rem

.links__image
  display: block
  position: relative
  .image-container
    position: relative
    border: 1px solid shade($text-mute, 60%)
    transition: border 0.5s
    overflow: hidden
    img
      display: block
      transition: filter 0.5s
  .no-touch &:hover
    .image-container
      border: 1px solid $text-mute
      img
        filter: contrast(1.25)

.links__caption
  display: block
  margin-top: 2.4rem

.links__placeholder
  border: 1px solid shade($text-mute, 76%)
  position: absolute
  width: calc(100% - 3rem)
  padding: 1px
  .placeholder-container
    background-color: $base-color
  +MQ(XL)
    bottom: -10rem
    right: 15px
    width: calc(100% - 45px)
  +MQ(XXL)
    bottom: -10rem
    right: 15px
    width: calc(100% - 55px)
  +MQ(XXXL)
    bottom: -18rem
/* ------------------------------------------------*/
/* Preview Sections End
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Footer Styles Start
/* ------------------------------------------------*/
.footer
  position: relative
  width: 100%
  background-image: url("../img/demo/footer-bg.webp")
  background-position: center top
  background-repeat: no-repeat
  background-size: 260%
  +MQ(M)
    background-size: 160%
  +MQ(XL)
    background-size: 100%

.footer__container
  position: relative
  padding: 0 calc(10% - 1.5rem)
  +MQ(XL)
    max-width: 1140px
    margin: 0 auto
    padding: 0
  +MQ(XXL)
    max-width: 1320px
  +MQ(XXXL)
    max-width: 1600px

.footer__content
  padding: 8rem 0
  +MQ(M)
    padding: 11rem 0
  +MQ(XXL)
    padding: 14rem 0

.footer__caption

.footer__btngroup
  position: relative
  overflow: hidden

.footer__links
  position: relative
  padding: 0 0 4rem 0
  +MQ(XL)
    position: absolute
    bottom: 0
    +center(x)
    width: 100%
    padding: 0 1.5rem 2.8rem 1.5rem
/* ------------------------------------------------*/
/* Footer Styles End
/* ------------------------------------------------*/
