/* =====================================================
   SPLASH SCREEN
===================================================== */

#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: #eee3d2;
    color: #241521;
  
    transition:
      opacity 1.2s ease,
      visibility 1.2s ease;
  }
  
  
  /* Logo */
  
  .splash-logo {
    text-align: center;
  
    animation: splashEntrance 1.8s
      cubic-bezier(.22,1,.36,1)
      forwards;
  }
  
  
  /* Lua */
  
  .splash-moon {
    font-family: Georgia, serif;
    font-size: 38px;
  
    margin-bottom: 12px;
  
    opacity: 0;
  
    animation: splashMoon 1.2s ease forwards;
  }
  
  
  /* ARUANÃ */
  
  .splash-name {
    font-family: "Cormorant Garamond", Georgia, serif;
  
    font-size: clamp(55px, 9vw, 110px);
  
    font-weight: 400;
  
    letter-spacing: .12em;
  
    line-height: .8;
  
    opacity: 0;
  
    animation:
      splashLogo 1.5s
      .3s
      cubic-bezier(.22,1,.36,1)
      forwards;
  }
  
  
  /* NATURAL */
  
  .splash-subtitle {
    margin-top: 25px;
  
    font-family: "Montserrat", sans-serif;
  
    font-size: 11px;
  
    letter-spacing: .55em;
  
    text-transform: uppercase;
  
    opacity: 0;
  
    animation:
      splashSubtitle 1.2s
      .8s
      ease
      forwards;
  }
  
  
  /* Linha */
  
  .splash-line {
    width: 0;
    height: 1px;
  
    background: #b49a70;
  
    margin: 28px auto 0;
  
    animation:
      splashLine 1.2s
      1.1s
      ease
      forwards;
  }
  
  
  /* =====================================================
     ANIMAÇÕES
  ===================================================== */
  
  @keyframes splashEntrance {
  
    from {
      transform: translateY(15px);
    }
  
    to {
      transform: translateY(0);
    }
  
  }
  
  
  @keyframes splashMoon {
  
    from {
      opacity: 0;
      transform: translateY(15px);
    }
  
    to {
      opacity: .8;
      transform: translateY(0);
    }
  
  }
  
  
  @keyframes splashLogo {
  
    from {
      opacity: 0;
      transform: translateY(25px);
      letter-spacing: .3em;
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
      letter-spacing: .12em;
    }
  
  }
  
  
  @keyframes splashSubtitle {
  
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  
    to {
      opacity: .75;
      transform: translateY(0);
    }
  
  }
  
  
  @keyframes splashLine {
  
    from {
      width: 0;
    }
  
    to {
      width: 90px;
    }
  
  }
  
  
  /* =====================================================
     SAÍDA DA SPLASH
  ===================================================== */
  
  #splash-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }