/**
* 404 Error
*
* @package Manu_Portfolio
*/

/* =========================================================
  404
  ========================================================= */

.error-404 {
   position: relative;
   overflow: hidden;
   min-height: calc(100vh - var(--header-height));
   background:
       radial-gradient(
           circle at 50% 45%,
           rgba(139, 92, 246, 0.09),
           transparent 38%
       ),
       var(--color-background);
}

.error-404__section {
   display: flex;
   align-items: center;
   min-height: calc(100vh - var(--header-height));
   padding-block: 100px;
}

.error-404__inner {
   position: relative;
   max-width: 900px;
   margin-inline: auto;
   text-align: center;
}


/* EYEBROW */

.error-404__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 15px;
   color: var(--color-primary-soft);
   font-family: var(--font-mono);
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

.error-404__eyebrow::before {
   width: 24px;
   height: 1px;
   background: var(--color-primary);
   content: "";
}


/* NUMBER */

.error-404__number {
   margin: 0;
   color: transparent;
   font-size: clamp(150px, 28vw, 360px);
   font-weight: 800;
   letter-spacing: -0.12em;
   line-height: 0.78;
   -webkit-text-stroke: 1px rgba(139, 92, 246, 0.22);
   user-select: none;
}


/* TITLE */

.error-404__title {
   position: relative;
   margin: -5px 0 0;
   color: var(--color-text);
   font-size: clamp(42px, 6vw, 75px);
   font-weight: 700;
   letter-spacing: -0.07em;
   line-height: 0.92;
   text-transform: uppercase;
}

.error-404__title span {
   color: transparent;
   -webkit-text-stroke: 1px var(--color-primary);
}


/* DESCRIPTION */

.error-404__description {
   max-width: 560px;
   margin: 30px auto 0;
   color: var(--color-text-muted);
   font-size: 14px;
   line-height: 1.8;
}


/* ACTIONS */

.error-404__actions {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 35px;
}

.error-404__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   min-height: 52px;
   padding: 0 22px;
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-decoration: none;
   text-transform: uppercase;
   transition:
       transform var(--transition-fast),
       color var(--transition-fast),
       border-color var(--transition-fast),
       background var(--transition-fast),
       box-shadow var(--transition-fast);
}

.error-404__button--primary {
   border-color: var(--color-primary);
   color: var(--color-text);
   background: rgba(139, 92, 246, 0.08);
}

.error-404__button--secondary {
   color: var(--color-text-muted);
   background: rgba(255, 255, 255, 0.015);
}

.error-404__button:hover {
   transform: translateY(-2px);
}

.error-404__button--primary:hover {
   background: rgba(139, 92, 246, 0.15);
   box-shadow: var(--shadow-primary);
}

.error-404__button--secondary:hover {
   border-color: var(--color-primary);
   color: var(--color-primary-soft);
   background: rgba(139, 92, 246, 0.05);
}

.error-404__button-arrow {
   color: var(--color-primary-soft);
   font-size: 14px;
   transition: transform var(--transition-fast);
}

.error-404__button:hover .error-404__button-arrow {
   transform: translateX(4px);
}


/* MOBILE */

@media (max-width: 700px) {

   .error-404__section {
       min-height: calc(100vh - var(--header-height));
       padding-block: 70px;
   }

   .error-404__number {
       font-size: clamp(130px, 38vw, 220px);
   }

   .error-404__title {
       font-size: clamp(38px, 11vw, 58px);
   }

   .error-404__description {
       font-size: 13px;
   }

   .error-404__actions {
       flex-direction: column;
       width: 100%;
   }

   .error-404__button {
       width: 100%;
       max-width: 300px;
   }
}