/* =========================
   CUSTOMIZATION
========================= */

:root{

  /* COLORS */

  --background-color:#0e2d45;

  --logo-color:#8695a7;

  --text-color:#8695a7;



  /* LOGO */

  --logo-width:340px;

  --logo-max-width:80vw;



  /* TEXT */

  --subtitle-size:22px;

  --subtitle-weight:400;

  --subtitle-spacing:0.5px;



  /* POSITION */

  --content-offset-y:-10px;



  /* TIMING */

  --intro-fade:1.2s;

  --logo-visible-time:2.8s;

  --fade-duration:0.8s;



  /* BLUR */

  --background-blur:0px;
}



/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}



/* =========================
   BODY
========================= */

body{

  width:100%;
  height:100vh;

  overflow:hidden;

  background:var(--background-color);

  font-family:
    Helvetica,
    Arial,
    sans-serif;

  display:flex;
  align-items:center;
  justify-content:center;
}



/* =========================
   HERO
========================= */

.hero{

  display:flex;

  align-items:center;

  justify-content:center;

  transform:
    translateY(var(--content-offset-y));

  filter:
    blur(var(--background-blur));
}



/* =========================
   SWITCH WRAPPER
========================= */

.switch{

  position:relative;

  width:var(--logo-width);

  height:120px;

  display:flex;

  align-items:center;

  justify-content:center;
}



/* =========================
   LOGO
========================= */

.logo{

  position:absolute;

  width:var(--logo-width);

  max-width:var(--logo-max-width);

  user-select:none;

  -webkit-user-drag:none;

  opacity:0;

  animation:
    logoSequence 4.8s ease forwards;
}



/* =========================
   SUBTITLE
========================= */

.subtitle{

  position:absolute;

  color:var(--text-color);

  font-size:var(--subtitle-size);

  font-weight:var(--subtitle-weight);

  letter-spacing:var(--subtitle-spacing);

  opacity:0;

  animation:
    textFade 0.8s ease forwards;

  animation-delay:4s;
}



/* =========================
   ANIMATIONS
========================= */

@keyframes logoSequence{

  0%{
    opacity:0;
  }

  25%{
    opacity:1;
  }

  75%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}



@keyframes textFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}