/* =====================
   PRELOADER WRAPPER
   ===================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

/* =====================
   ACCESSIBILITY
   ===================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =====================
   LOADER WRAPPER
   ===================== */
.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;align-content;
	position: absolute;       /* ← add this */
    top: 50%;                 /* ← add this */
    left: 50%;                /* ← add this */
    transform: translate(-50%, -50%);  /* ← add this */
}

/* =====================
   SPINNER
   ===================== */
#spinner {
    width: 120px;
    height: 120px;
    animation: spin 5s ease-in-out infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg);   }
    85%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* =====================
   TRIANGLE BOX
   ===================== */
#triangle-box {
    position: relative;
    width: 120px;
    height: 120px;
    background-color: #1a1a1a;
}

/* =====================
   SHARED TRIANGLE BASE
   ===================== */
.tri {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #8B0020;
    animation-duration: 3.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-iteration-count: infinite;
}

/* =====================
   CLIP PATHS
   ===================== */
#tri-A { clip-path: polygon(3% 0%, 48% 0%, 48% 45%);    animation-name: anim-A; animation-delay: 0.00s; }
#tri-H { clip-path: polygon(0% 48%, 0% 3%, 46% 48%);    animation-name: anim-H; animation-delay: 0.25s; }
#tri-B { clip-path: polygon(52% 0%, 96% 0%, 52% 45%);   animation-name: anim-B; animation-delay: 0.15s; }
#tri-C { clip-path: polygon(98% 3%, 98% 48%, 54% 48%);  animation-name: anim-C; animation-delay: 0.30s; }
#tri-D { clip-path: polygon(98% 52%, 98% 96%, 54% 52%); animation-name: anim-D; animation-delay: 0.45s; }
#tri-E { clip-path: polygon(94% 98%, 52% 98%, 52% 56%); animation-name: anim-E; animation-delay: 0.20s; }
#tri-F { clip-path: polygon(48% 98%, 4% 98%, 48% 56%);  animation-name: anim-F; animation-delay: 0.35s; }
#tri-G { clip-path: polygon(0% 96%, 0% 52%, 46% 52%);   animation-name: anim-G; animation-delay: 0.10s; }

/* =====================
   KEYFRAMES
   ===================== */
@keyframes anim-A {
    0%,  25% { transform: translate(0px,   0px);   opacity: 1;    }
    30%      { transform: translate(4px,   4px);   opacity: 1;    }
    52%      { transform: translate(-32px, -28px); opacity: 0.78; }
    62%      { transform: translate(-36px, -22px); opacity: 0.72; }
    72%      { transform: translate(-28px, -30px); opacity: 0.75; }
    82%      { transform: translate(-8px,  -6px);  opacity: 0.92; }
    90%      { transform: translate(7px,   5px);   opacity: 1;    }
    95%      { transform: translate(-2px,  -1px);  opacity: 1;    }
    100%     { transform: translate(0px,   0px);   opacity: 1;    }
}

@keyframes anim-B {
    0%,  25% { transform: translate(0px,   0px);   opacity: 1;    }
    30%      { transform: translate(-4px,  4px);   opacity: 1;    }
    52%      { transform: translate(27px,  -31px); opacity: 0.8;  }
    62%      { transform: translate(22px,  -36px); opacity: 0.73; }
    72%      { transform: translate(30px,  -26px); opacity: 0.76; }
    82%      { transform: translate(7px,   -7px);  opacity: 0.93; }
    90%      { transform: translate(-6px,  4px);   opacity: 1;    }
    95%      { transform: translate(2px,   -1px);  opacity: 1;    }
    100%     { transform: translate(0px,   0px);   opacity: 1;    }
}

@keyframes anim-C {
    0%,  25% { transform: translate(0px,   0px);   opacity: 1;    }
    30%      { transform: translate(-4px,  4px);   opacity: 1;    }
    52%      { transform: translate(35px,  -24px); opacity: 0.76; }
    62%      { transform: translate(30px,  -30px); opacity: 0.7;  }
    72%      { transform: translate(38px,  -18px); opacity: 0.74; }
    82%      { transform: translate(9px,   -5px);  opacity: 0.91; }
    90%      { transform: translate(-8px,  4px);   opacity: 1;    }
    95%      { transform: translate(2px,   -1px);  opacity: 1;    }
    100%     { transform: translate(0px,   0px);   opacity: 1;    }
}

@keyframes anim-D {
    0%,  25% { transform: translate(0px,   0px);  opacity: 1;    }
    30%      { transform: translate(-4px,  -4px); opacity: 1;    }
    52%      { transform: translate(30px,  26px); opacity: 0.79; }
    62%      { transform: translate(36px,  22px); opacity: 0.72; }
    72%      { transform: translate(24px,  32px); opacity: 0.76; }
    82%      { transform: translate(8px,   7px);  opacity: 0.92; }
    90%      { transform: translate(-7px,  -6px); opacity: 1;    }
    95%      { transform: translate(2px,   2px);  opacity: 1;    }
    100%     { transform: translate(0px,   0px);  opacity: 1;    }
}

@keyframes anim-E {
    0%,  25% { transform: translate(0px,   0px);  opacity: 1;    }
    30%      { transform: translate(-4px,  -4px); opacity: 1;    }
    52%      { transform: translate(22px,  33px); opacity: 0.81; }
    62%      { transform: translate(28px,  28px); opacity: 0.74; }
    72%      { transform: translate(18px,  36px); opacity: 0.77; }
    82%      { transform: translate(5px,   8px);  opacity: 0.93; }
    90%      { transform: translate(-5px,  -7px); opacity: 1;    }
    95%      { transform: translate(1px,   2px);  opacity: 1;    }
    100%     { transform: translate(0px,   0px);  opacity: 1;    }
}

@keyframes anim-F {
    0%,  25% { transform: translate(0px,   0px);   opacity: 1;    }
    30%      { transform: translate(4px,   -4px);  opacity: 1;    }
    52%      { transform: translate(-33px, 30px);  opacity: 0.77; }
    62%      { transform: translate(-28px, 36px);  opacity: 0.71; }
    72%      { transform: translate(-36px, 24px);  opacity: 0.75; }
    82%      { transform: translate(-9px,  7px);   opacity: 0.92; }
    90%      { transform: translate(8px,   -6px);  opacity: 1;    }
    95%      { transform: translate(-2px,  2px);   opacity: 1;    }
    100%     { transform: translate(0px,   0px);   opacity: 1;    }
}

@keyframes anim-G {
    0%,  25% { transform: translate(0px,   0px);   opacity: 1;    }
    30%      { transform: translate(4px,   -4px);  opacity: 1;    }
    52%      { transform: translate(-28px, 26px);  opacity: 0.8;  }
    62%      { transform: translate(-22px, 32px);  opacity: 0.73; }
    72%      { transform: translate(-33px, 20px);  opacity: 0.77; }
    82%      { transform: translate(-7px,  6px);   opacity: 0.93; }
    90%      { transform: translate(6px,   -5px);  opacity: 1;    }
    95%      { transform: translate(-2px,  1px);   opacity: 1;    }
    100%     { transform: translate(0px,   0px);   opacity: 1;    }
}

@keyframes anim-H {
    0%,  25% { transform: translate(0px,   0px);    opacity: 1;    }
    30%      { transform: translate(4px,   4px);    opacity: 1;    }
    52%      { transform: translate(-26px, -33px);  opacity: 0.78; }
    62%      { transform: translate(-32px, -26px);  opacity: 0.71; }
    72%      { transform: translate(-22px, -34px);  opacity: 0.75; }
    82%      { transform: translate(-6px,  -9px);   opacity: 0.92; }
    90%      { transform: translate(5px,   7px);    opacity: 1;    }
    95%      { transform: translate(-1px,  -2px);   opacity: 1;    }
    100%     { transform: translate(0px,   0px);    opacity: 1;    }
}

/* =====================
   LOADING TEXT
   ===================== */
.loading-text {
    color: #8B0020;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    animation: text-fade 3.8s ease-in-out infinite;
}

@keyframes text-fade {
    0%,  22%  { opacity: 1;   }
    40%, 75%  { opacity: 0.2; }
    92%, 100% { opacity: 1;   }
}

/* =====================
   REDUCED MOTION
   ===================== */
@media (prefers-reduced-motion: reduce) {
    #spinner      { animation: none; }
    .tri          { animation: none; }
    .loading-text { animation: none; }
}