/* =========================
   VARIABLES
========================= */
:root{
  --text: #2b1f25;
}

/* =========================
   GLOBAL
========================= */
*{
  box-sizing: border-box;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: "Sofia Sans", sans-serif;
  color: var(--text);
}

/* =========================
   SPLIT LAYOUT (NO CARD)
========================= */
.split{
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* =========================
   LEFT SIDE
========================= */
.left{
  background: #ffffff;
  padding: 72px 64px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.gifBox{
  width: 420px;
  height: 420px;
  border-radius: 50%;
  overflow: hidden;

  display: grid;
  place-items: center;

  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
}

.gifBox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leftText{
  width: min(820px, 100%);
  text-align: center;
}

.leftText h1{
  margin: 0 0 12px;
  font-size: 76px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.6px;
}

.leftText .sub{
  margin: 0;
  font-size: 25px;
  opacity: .6;
}

/* =========================
   RIGHT SIDE
========================= */
.right{
  background-color: #f0dcef;

  padding: 72px 64px;

  display: grid;
  place-items: center;
}

.lock{
  width: 100%;
  max-width: 440px;
  display: grid;
  justify-items: center;
}

/* =========================
   DOTS (PIN)
========================= */
.dots{
  display:flex;
  justify-content:center;
  gap:18px;
  margin: 16px 0 22px;
}

.dot{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.365);
  background: transparent;
  transition: transform .12s ease, border-color .18s ease;
}

.dot.filled{
  background: #ff5df4;
  border-color: #ff5df4;
  transform: scale(1.25);
}

/* =========================
   KEYPAD
========================= */
.keypad{
  display:grid;
  grid-template-columns: repeat(3, 96px);
  gap: 20px;
  justify-content: center;
  margin: 12px auto 0;
}

.key{
  width:96px;
  height:96px;
  border-radius:999px;
  border: 3px solid rgba(0, 0, 0, 0.365);
  background: white;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;

  display:grid;
  place-items:center;

  transition: transform .12s ease;
}

.key:hover{
  box-shadow: 0 3px 14px rgba(80, 39, 82, 0.502);
  transform: scale(1.12) rotate(360deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.key:active{
  transform: scale(.95) rotate(360deg);
  background:#ffe3ef;
}

.key.ghost{
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  font-size: 26px;
}

/* =========================
   ENTER BUTTON
========================= */
.enterBtn{
  display: block;
  margin: 28px auto 0;
  width: 220px;
  height: 64px;

  background-color:#b4879d;
  border-radius: 32px;
  border-color: transparent;
  color: #ffffff;

  font-size: 22px;
  font-weight: 800;
  letter-spacing: .6px;

  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.enterBtn:hover{
  box-shadow: 0 0 14px rgba(161, 69, 114, 0.502);
  transform: scale(1.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.enterBtn:active{
  transform: translateY(3px);
  box-shadow: 0 8px 18px rgba(255,77,157,.35);
}

/* =========================
   ------WRONG PAGE-------
========================= */

.retryLink{
  margin-top: 8px;
  font-size: 25px;
  font-weight: 700;
  color: #b4879d;
  text-decoration:none;
}

.retryLink:hover{
  text-decoration:underline;
}

.sub1{
  font-size:32px;
  font-weight: 700;
  opacity:.7;
  margin-top: 6px;
}

.floatIn{
  opacity:0;
  transform: translateY(28px);
  animation: floatInAnim .6s ease forwards;
}

.sub1.floatIn{
  animation-fill-mode: forwards;
  animation-name: floatInSub;
}

@keyframes floatInSub{
  to{
    opacity: .7;
    transform: translateY(0);
  }
}

.titleAnimation{ animation-delay: .15s;}
.subAnimation{ animation-delay: 1.5s;}
.linkAnimation{ animation-delay: 2.2s;}

@keyframes floatInAnim {
  to{
    opacity:1;
    transform: translateY(0);
    
  }
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 900px){
  .split{
    grid-template-columns: 1fr;
    height: auto;           /* не форсира 100vh на мобилен */
    min-height: 100vh;
  }

  .left,
  .right{
    padding: 48px 28px;
  }

  /* GIF кутията да се свива спрямо екрана */
  .gifBox{
    width: min(320px, 80vw);
    height: min(320px, 80vw);
  }

  .leftText h1{
    font-size: 36px;
  }

  .leftText .sub{
    font-size: 18px;
  }

  /* Клавишите да се свиват на малък екран */
  .keypad{
    grid-template-columns: repeat(3, min(80px, 24vw));
    gap: 12px;
  }

  .key{
    width: min(80px, 24vw);
    height: min(80px, 24vw);
    font-size: 24px;
  }
}