@font-face {
    font-family: "Oxanium";
    src: url("../fonts/Oxanium-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Oxanium";
    src: url("../fonts/Oxanium-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #2e2e2e #0a0a0a;
}

        body {
            background: #0a0a0a;
            color: #fff;
            font-size: 16px;
            font-family: "Oxanium", sans-serif;
            margin: auto;
            scroll-behavior: smooth;
        }

        header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    background: #0a0a0a;
    margin-bottom: 10px;
        }

        header img {
            width: 200px;
        }

.container {
   display: flex;
   width: 1200px;
   margin: 0 auto;
   justify-content: center;
   margin-bottom: 20px;
}

.main__wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 32px;
   width: 550px;
   padding: 40px;
   border-radius: 32px;
   background: linear-gradient(135deg,
         #0a0a0a 0%,
         #1a1a1a 30%,
         rgba(26, 26, 26, 0.95) 50%,
         rgba(18, 18, 18, 0.9) 70%,
         rgba(18, 18, 18, 0.8) 85%,
         rgba(18, 18, 18, 0.7) 100%);
   background-size: 300% 100%;
   animation: bgFlow 15s ease infinite alternate;
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7);
   animation: bgFlow 15s ease infinite alternate, contentFade 1s ease;
   border: 1px solid rgba(255, 67, 0, 0.1);
}

@keyframes bgFlow {
   0% {
      background-position: 0% 0%;
   }

   25% {
      background-position: 50% 0%;
   }

   50% {
      background-position: 100% 0%;
   }

   75% {
      background-position: 150% 0%;
   }

   100% {
      background-position: 200% 0%;
   }
}

@keyframes contentFade {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

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

.main__wrapper::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(135deg,
         transparent 0%,
         rgba(255, 67, 0, 0.2) 15%,
         rgba(255, 67, 0, 0.5) 25%,
         rgba(255, 107, 74, 0.8) 35%,
         rgba(255, 140, 105, 0.9) 45%,
         rgba(255, 107, 74, 0.7) 55%,
         rgba(255, 67, 0, 0.4) 65%,
         rgba(255, 67, 0, 0.2) 75%,
         transparent 90%);
   background-size: 400% 100%;
   border-radius: 34px;
   animation: borderFlow 10s linear infinite;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   padding: 2px;
   z-index: 0;
   filter: drop-shadow(0 0 8px rgba(255, 67, 0, 0.4));
   pointer-events: none;
}

@keyframes borderFlow {
   0% {
      background-position: 0% 0%;
   }

   100% {
      background-position: 400% 0%;
   }
}

.main__wrapper::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 70% 30%, rgba(255, 67, 0, 0.15) 0%, transparent 70%);
   filter: blur(40px);
   border-radius: 32px;
   z-index: 1;
   pointer-events: none;
   opacity: 0.6;
}

.main__wrapper>* {
   position: relative;
   z-index: 2;
}

.auth__desc {
   display: flex;
   gap: 20px;
   animation: slideInLeft 0.8s ease;
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-20px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

.auth__desc_left {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.auth__desc_number {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 100%;
   background: linear-gradient(135deg, rgba(255, 67, 0, 0.15), rgba(255, 67, 0, 0.05));
   border: 1px solid rgba(255, 67, 0, 0.8);
   color: #ff4300;
   font-weight: 700;
   font-size: 20px;
   box-shadow: 0 0 15px rgba(255, 67, 0, 0.3);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.auth__desc_number::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.auth__desc_number:hover {
   transform: scale(1.1);
   box-shadow: 0 0 25px rgba(255, 67, 0, 0.5);
}

.auth__desc_number:hover::before {
   opacity: 1;
}

.auth__desc_line {
   width: 2px;
   height: 24px;
   background: linear-gradient(to bottom, #ff4300, rgba(255, 67, 0, 0.3));
   margin: 12px 0;
   box-shadow: 0 0 10px rgba(255, 67, 0, 0.5);
}

/* Правая часть с информацией */
.auth__desc_right {
   display: flex;
   flex-direction: column;
   gap: 25px;
   flex: 1;
}

.auth__desc_info {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 15px;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 67, 0, 0.1);
   transition: all 0.3s ease;
   animation: fadeInUp 0.8s ease;
   animation-fill-mode: both;
}

.auth__desc_info:nth-child(1) {
   animation-delay: 0.2s;
}

.auth__desc_info:nth-child(2) {
   animation-delay: 0.4s;
}

.auth__desc_info:nth-child(3) {
   animation-delay: 0.6s;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(15px);
   }

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

.auth__desc_info:hover {
   background: rgba(255, 67, 0, 0.05);
   border-color: rgba(255, 67, 0, 0.3);
   transform: translateX(5px);
   box-shadow: 0 5px 20px rgba(255, 67, 0, 0.1);
}

.auth__desc_label {
   font-weight: 700;
   color: #ffffff;
   font-size: 16px;
   letter-spacing: 0.5px;
}

.auth__desc_more {
   font-size: 14px;
   color: #b0b0b0;
   line-height: 1.5;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.auth__main {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 25px;
   padding: 25px;
   border-radius: 24px;
   background: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 67, 0, 0.15);
   animation: scaleIn 0.8s ease 0.4s both;
}

@keyframes scaleIn {
   from {
      opacity: 0;
      transform: scale(0.95);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.auth__logo {
   position: relative;
   padding: 10px;
}

.auth__logo::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 50px;
   height: 2px;
   background: linear-gradient(90deg, transparent, #ff4300, transparent);
}

.auth__logo img {
   display: block;
   height: 40px;
   filter: drop-shadow(0 0 15px rgba(255, 67, 0, 0.3));
   transition: filter 0.3s ease;
}

.auth__logo img:hover {
   filter: drop-shadow(0 0 25px rgba(255, 67, 0, 0.6));
}

.auth__qr {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 220px;
   height: 220px;
   z-index: 1;
   overflow: hidden;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.02);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.auth__qr::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, transparent, rgba(255, 67, 0, 0.1), transparent);
   animation: rotate 4s linear infinite;
   z-index: 0;
}

@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.qr__first {
   position: absolute;
   width: 200px;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 0 30px rgba(255, 67, 0, 0.2);
   animation: pulse 2s ease-in-out infinite;
   transition: all 0.3s ease;
}

.qr__first:hover {
   transform: scale(1.05);
   box-shadow: 0 0 40px rgba(255, 67, 0, 0.4);
}

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 0 20px rgba(255, 67, 0, 0.3);
   }

   50% {
      box-shadow: 0 0 35px rgba(255, 67, 0, 0.6);
   }
}

.qr__first img {
   width: 180px;
   height: 180px;
   display: block;
   filter: contrast(1.1);
   border-radius: 16px;
}

.auth__button {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   width: 100%;
}

.auth__button>div {
   color: #ff4300;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

   0%,
   100% {
      opacity: 0.8;
   }

   50% {
      opacity: 1;
      text-shadow: 0 0 10px #ff4300;
   }
}

.auth__button_click {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   font-family: "Oxanium", sans-serif;
   outline: none;
   border: none;
   background: #ff4300;
   color: #fff;
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0.5px;
   cursor: pointer;
   padding: 15px 50px;
   border-radius: 50px;
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 5px 20px rgba(255, 67, 0, 0.4);
   width: 100%;
   max-width: 300px;
}

.auth__button_click::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.auth__button_click:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 30px rgba(255, 67, 0, 0.6);
   background: #ff592b;
}

.auth__button_click:hover::before {
   left: 100%;
}

.auth__button_click:active {
   transform: translateY(0);
   box-shadow: 0 3px 15px rgba(255, 67, 0, 0.4);
}

.auth__button_click svg {
   width: 24px;
   height: 24px;
   transition: transform 0.3s ease;
   filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.auth__button_click:hover svg {
   transform: rotate(360deg);
}

.auth__button_click span {
   position: relative;
   z-index: 2;
}

.auth__under {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   padding: 20px 0 10px;
   animation: fadeIn 0.8s ease 0.8s both;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.auth__under_text {
   color: #a0a0a0;
   font-size: 15px;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.auth__under_link {
   color: #ff4300;
   font-weight: 600;
   text-decoration: none;
   font-size: 16px;
   position: relative;
   padding-bottom: 3px;
   transition: all 0.3s ease;
}

.auth__under_link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, #ff4300, transparent);
   transition: width 0.3s ease;
}

.auth__under_link:hover {
   color: #ff884d;
   text-shadow: 0 0 10px rgba(255, 67, 0, 0.5);
}

.auth__under_link:hover::after {
   width: 100%;
}