/* =========================================================
   COMPONENT : MusiclicArchiveLock
   Version : 1.1
   Rôle : coffre / verrou d'archives à ouvrir avec un code
   ========================================================= */

.musiclic-archive-lock{
  position:absolute;
  left:50%;
  top:50%;
  width:320px;
  transform:translate(-50%,-50%) rotate(0.4deg);

  background:
    linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.05)),
    #4d2f1b;

  color:#f5ead6;
  padding:20px;
  border-radius:8px;
  box-shadow:0 16px 38px rgba(0,0,0,.44);
  font-family:Georgia,"Times New Roman",serif;
  animation:musiclicArchiveLockArrive .55s ease both;
}

.musiclic-archive-lock::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  pointer-events:none;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.musiclic-archive-lock > *{
  position:relative;
  z-index:1;
}

.musiclic-archive-lock-header{
  text-align:center;
  margin-bottom:14px;
}

.musiclic-archive-lock-kicker{
  display:block;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.18em;
  opacity:.72;
  margin-bottom:6px;
}

.musiclic-archive-lock-title{
  display:block;
  font-size:21px;
  font-weight:normal;
}

.musiclic-archive-lock-chest{
  width:125px;
  height:78px;
  margin:0 auto 14px;
  position:relative;
  border-radius:10px 10px 8px 8px;
  background:linear-gradient(145deg,#6b4326,#2d1a0e);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 12px 24px rgba(0,0,0,.34);
}

.musiclic-archive-lock-chest::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:30px;
  border-radius:10px 10px 0 0;
  background:linear-gradient(145deg,#7b4d2b,#3a2111);
  border-bottom:2px solid rgba(0,0,0,.28);
  transition:transform .5s ease;
  transform-origin:top center;
}

.musiclic-archive-lock-chest::after{
  content:"";
  position:absolute;
  left:50%;
  top:31px;
  width:28px;
  height:34px;
  transform:translateX(-50%);
  border-radius:4px;
  background:linear-gradient(145deg,#d3a84f,#8e681f);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 4px 10px rgba(0,0,0,.35);
}

.musiclic-archive-lock.is-open .musiclic-archive-lock-chest::before{
  transform:rotateX(62deg);
}

.musiclic-archive-lock-body{
  text-align:center;
  line-height:1.45;
  font-size:14px;
  max-width:280px;
  margin:0 auto;
}

.musiclic-archive-lock-body p{
  margin:0;
}

.musiclic-archive-lock-form{
  margin-top:14px;
  display:block;
  text-align:center;
}

.musiclic-archive-lock-input{
  width:150px;
  padding:10px 12px;
  border:0;
  border-radius:6px;
  text-align:center;
  font-size:16px;
  letter-spacing:.08em;
  font-weight:bold;
  background:#f5ead6;
  color:#2b2118;
  box-sizing:border-box;
}

.musiclic-archive-lock-button,
.musiclic-archive-lock-reward-button{
  padding:10px 14px;
  border:0;
  border-radius:6px;
  background:#ead8b6;
  color:#2b2118;
  font-weight:bold;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 5px 12px rgba(0,0,0,.24);
}

.musiclic-archive-lock-button{
  display:block;
  margin:10px auto 0;
}

.musiclic-archive-lock-button:hover,
.musiclic-archive-lock-reward-button:hover{
  background:#fff1d4;
}

.musiclic-archive-lock-message{
  display:none;
  margin:14px auto 0;
  max-width:260px;
  padding:12px 14px;
  border-radius:6px;
  background:rgba(0,0,0,.18);
  line-height:1.45;
}

.musiclic-archive-lock-message.is-visible{
  display:block;
}

.musiclic-archive-lock-reward{
  display:none;
  margin-top:16px;
  text-align:center;
}

.musiclic-archive-lock-reward.is-visible{
  display:block;
  animation:musiclicArchiveRewardIn .45s ease both;
}

.musiclic-archive-lock-paper{
  display:inline-block;
  margin-bottom:12px;
  padding:14px 18px;
  background:#efe1c3;
  color:#2b2118;
  border-radius:4px;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  transform:rotate(-2deg);
}

.musiclic-archive-lock.is-shaking{
  animation:musiclicArchiveLockShake .32s ease both;
}

@keyframes musiclicArchiveLockArrive{
  from{
    opacity:0;
    transform:translate(-50%,-43%) rotate(0.4deg);
  }
  to{
    opacity:1;
    transform:translate(-50%,-50%) rotate(0.4deg);
  }
}

@keyframes musiclicArchiveLockShake{
  0%,100%{
    transform:translate(-50%,-50%) rotate(0.4deg);
  }
  25%{
    transform:translate(calc(-50% - 7px),-50%) rotate(0.1deg);
  }
  50%{
    transform:translate(calc(-50% + 7px),-50%) rotate(0.7deg);
  }
  75%{
    transform:translate(calc(-50% - 4px),-50%) rotate(0.2deg);
  }
}

@keyframes musiclicArchiveRewardIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:768px){
  .musiclic-archive-lock{
    width:88%;
    max-width:320px;
    padding:20px;
  }

  .musiclic-archive-lock-title{
    font-size:20px;
  }

  .musiclic-archive-lock-body{
    font-size:14px;
  }

  .musiclic-archive-lock-input,
  .musiclic-archive-lock-button{
    width:100%;
    box-sizing:border-box;
  }
}