/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

    .pre-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999991;
        background-color: #fff;
    }

    .loader-inner {
        display: grid;
        justify-content: center;
        align-items: center;
        padding: 25px;
        position: relative;
        text-align: center;
        width: 100%;
    }
    .loader-inner > span { grid-area: 1/ -1; }

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.wall {
  width: 380px;
  height: 460px;
  border: 1.5px solid var(--wdtBorderColor);
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.wall-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 70% at 50% 80%, color-mix(in srgb, var(--wdtPrimaryColor) 30%, transparent) 0%, transparent 70%);
  animation: wallglow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wallglow {
  0%,10%  { opacity: 0; }
  45%,58% { opacity: 1; }
  92%,100%{ opacity: 0; }
}

.corner { position: absolute; width: 18px; height: 18px; border-color: color-mix(in srgb, var(--wdtSecondaryColor) 45%, transparent); border-style: solid; }
.c-tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.c-tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.c-bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.c-br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }

.doorframe {
  width: 196px;
  height: 310px;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 0;
  z-index: 2;
}

.door-void {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.amber-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 95% at 18% 58%, var(--wdtPrimaryColor) 0%, color-mix(in srgb, var(--wdtPrimaryColor) 55%, var(--wdtSecondaryColor)) 30%, color-mix(in srgb, var(--wdtSecondaryColor) 60%, var(--wdtTertiaryColor)) 58%, var(--wdtBodyBGColor) 100%);
  animation: amberbreathe 3s ease-in-out infinite;
}
@keyframes amberbreathe {
  0%,100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
.light-rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from -12deg at 4% 52%, color-mix(in srgb, var(--wdtHeadAltColor) 20%, transparent) 0deg, transparent 5deg, transparent 12deg, color-mix(in srgb, var(--wdtHeadAltColor) 10%, transparent) 16deg, transparent 20deg);
  animation: raybreathe 3s ease-in-out infinite;
}
@keyframes raybreathe {
  0%,10%  { opacity: 0; }
  40%,58% { opacity: 1; }
  85%,100%{ opacity: 0; }
}

/* ── Door — hinged on LEFT, swings toward viewer (positive Y = front) ── */
.door-persp {
  position: absolute;
  inset: 0;
  perspective: 750px;
  perspective-origin: 50% 50%;
}
.door {
  position: absolute;
  inset: 0;
  transform-origin: left center;        /* hinge on the left edge */
  transform-style: preserve-3d;
  animation: doorswing 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes doorswing {
  0%    { transform: rotateY(0deg); }
  8%    { transform: rotateY(0deg); }
  44%   { transform: rotateY(70deg); }  /* positive = swings toward viewer */
  56%   { transform: rotateY(70deg); }
  92%   { transform: rotateY(0deg); }
  100%  { transform: rotateY(0deg); }
}

.door-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, var(--wdtSecondaryColor) 0%, color-mix(in srgb, var(--wdtSecondaryColor) 70%, var(--wdtPrimaryColor)) 45%, color-mix(in srgb, var(--wdtSecondaryColor) 60%, var(--wdtTertiaryColor)) 100%);
  overflow: hidden;
  backface-visibility: visible;
}

.door-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(174deg, transparent 0px, transparent 5px, rgba(0,0,0,0.09) 5px, rgba(0,0,0,0.09) 6px);
}
.door-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(178deg, transparent 0px, transparent 14px, rgba(255,255,255,0.03) 14px, rgba(255,255,255,0.03) 15px);
}

.panels {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}
.panel {
  flex: 1;
  border: 2px solid color-mix(in srgb, var(--wdtBodyTxtColor) 15%, transparent);
  box-shadow:
    inset 2px 2px 0 color-mix(in srgb, var(--wdtBodyTxtColor) 8%, transparent),
    inset -2px -2px 0 rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,0,0,0.35);
  position: relative;
}
.panel::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--wdtBodyTxtColor) 6%, transparent);
}
.panel:first-child { flex: 0.52; }

.hardware {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 2;
}
.escutcheon {
  width: 13px;
  height: 24px;
  background: linear-gradient(135deg, var(--wdtPrimaryColor) 0%, color-mix(in srgb, var(--wdtSecondaryColor) 80%, var(--wdtTertiaryColor)) 45%, color-mix(in srgb, var(--wdtPrimaryColor) 70%, var(--wdtSecondaryColor)) 70%, color-mix(in srgb, var(--wdtSecondaryColor) 90%, var(--wdtTertiaryColor)) 100%);
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb,var(--wdtHeadAltColor) 25%, transparent);
  position: relative;
}
.escutcheon::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  box-shadow: 0 -3px 0 rgba(0,0,0,0.4);
}
.knob {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,var(--wdtHeadAltColor), var(--wdtSecondaryColor));
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 color-mix(in srgb,var(--wdtHeadAltColor) 30%, transparent);
}

/* Door edge — right side visible when open toward viewer */
.door-edge {
  position: absolute;
  right: 0; top: 0; bottom: 0;   /* edge shown on the right when door swings forward */
  width: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wdtAccentTxtColor) 60%, var(--wdtSecondaryColor)), var(--wdtAccentTxtColor));
  transform: rotateY(-90deg);     /* face outward on the right */
  transform-origin: right center;
}

.frame-top {
  position: absolute;
  top: 0px; left: 0px; right: 0px;
  height: 0;
  background: var(--wdtTertiaryColor);
  border-top: 3px solid var(--wdtSecondaryColor);
  border-left: 3px solid var(--wdtSecondaryColor);
  border-right: 3px solid var(--wdtSecondaryColor);
  z-index: 10;
}
.frame-sides {
  position: absolute;
  top: 0; left: 0px; right: 0px; bottom: 0;
  z-index: 10;
  pointer-events: none;
}
.frame-sides::before,
.frame-sides::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--wdtSecondaryColor);
}
.frame-sides::before { left: 0px; }
.frame-sides::after  { right: 0px; }

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.progress-track {
  width: 200px;
  height: 2px;
  background: color-mix(in srgb, var(--wdtBorderColor) 60%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wdtAccentTxtColor), var(--wdtSecondaryColor), var(--wdtPrimaryColor));
  border-radius: 2px;
  animation: progressbar 3s ease-in-out infinite;
}
@keyframes progressbar {
  0%    { transform: scaleX(0); transform-origin: left; }
  44%   { transform: scaleX(1); transform-origin: left; }
  45%   { transform: scaleX(1); transform-origin: right; }
  92%   { transform: scaleX(0); transform-origin: right; }
  100%  { transform: scaleX(0); transform-origin: left; }
}

.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  color: color-mix(in srgb, var(--wdtSecondaryColor) 55%, transparent);
  font-size: 10px;
}
.ornament::before, .ornament::after {
  content: '';
  width: 44px;
  height: 1px;
}
.ornament::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wdtSecondaryColor) 55%, transparent)); }
.ornament::after  { background: linear-gradient(90deg, color-mix(in srgb, var(--wdtSecondaryColor) 55%, transparent), transparent); }

.loader-text {
  font-size: clamp(1.125rem, 1.0834rem + 0.1388vw, 1.25rem);/* 18 - 20 */
  color: color-mix(in srgb, var(--wdtPrimaryColor) 70%, transparent);
  animation: textpulse 3s ease-in-out infinite;
  text-transform: capitalize;
}

@keyframes textpulse {
  0%,100% { opacity: 0.45; }
  44%,56% { opacity: 1; color: var(--wdtPrimaryColor); }
}


/* =========================================================
   Responsive Design : 1920px → 350px
========================================================= */

/* ---------- Large Screens (1920px+) ---------- */
@media screen and (min-width: 1920px) {

    .scene {
        gap: 60px;
    }

    .wall {
        width: 500px;
        height: 500px;
    }

    .doorframe {
        width: 270px;
        height: 400px;
    }

    .progress-track {
        width: 260px;
    }

    .loader-text {
        font-size: 18px;
    }
}


/* ---------- Laptop / Desktop ---------- */
@media screen and (max-width: 1440px) {

    .wall {
        width: 360px;
        height: 430px;
    }

    .doorframe {
        width: 185px;
        height: 295px;
    }
}


/* ---------- Small Laptop ---------- */
@media screen and (max-width: 1200px) {

    .scene {
        gap: 38px;
    }

    .wall {
        width: 330px;
        height: 410px;
    }

    .doorframe {
        width: 175px;
        height: 280px;
    }

    .progress-track {
        width: 180px;
    }
}


/* ---------- Tablet ---------- */
@media screen and (max-width: 991px) {

    .scene {
        gap: 32px;
    }

    .wall {
        width: 300px;
        height: 380px;
    }

    .doorframe {
        width: 160px;
        height: 255px;
    }


    .progress-track {
        width: 170px;
    }

    .loader-text {
        letter-spacing: 0.15em;
    }
}


/* ---------- Mobile ---------- */
@media screen and (max-width: 767px) {

    .loader-inner {
        padding: 20px;
    }

    .scene {
        gap: 28px;
    }

    .wall {
        width: 280px;
        height: 350px;
    }

    .doorframe {
        width: 145px;
        height: 235px;
    }

    .panels {
        inset: 12px;
        gap: 8px;
    }

    .hardware {
        right: 14px;
    }

    .progress-track {
        width: 160px;
    }

    .ornament {
        gap: 10px;
    }

    .ornament::before,
    .ornament::after {
        width: 30px;
    }

    .loader-text {
        text-align: center;
    }
}


/* ---------- Small Mobile ---------- */
@media screen and (max-width: 480px) {

    .scene {
        gap: 24px;
        width: 100%;
    }

    .wall {
        width: 92vw;
        max-width: 280px;
        height: 320px;
    }

    .doorframe {
        width: 135px;
        height: 220px;
    }



    .progress-track {
        width: 145px;
    }

    .loader-text {

        letter-spacing: 0.12em;
    }

    .ornament {
        font-size: 8px;
    }
}


/* ---------- Extra Small Mobile (350px) ---------- */
@media screen and (max-width: 350px) {

    .loader-inner {
        padding: 15px;
    }

    .scene {
        gap: 22px;
    }

    .wall {
        width: 94vw;
        max-width: 250px;
        height: 300px;
        border-width: 1px;
    }

    .corner {
        width: 12px;
        height: 12px;
    }

    .c-tl,
    .c-tr {
        top: 10px;
    }

    .c-bl,
    .c-br {
        bottom: 10px;
    }

    .c-tl,
    .c-bl {
        left: 10px;
    }

    .c-tr,
    .c-br {
        right: 10px;
    }

    .doorframe {
        width: 150px;
        height: 250px;
    }

    .frame-top {
        border-top-width: 2px;
        border-left-width: 2px;
        border-right-width: 2px;
    }
    .panels {
        inset: 10px;
        gap: 7px;
    }

    .panel {
        border-width: 1px;
    }

    .panel::after {
        inset: 3px;
    }

    .hardware {
        right: 12px;
        gap: 2px;
    }

    .escutcheon {
        width: 10px;
        height: 20px;
    }

    .escutcheon::after {
        width: 3px;
        height: 3px;
    }

    .knob {
        width: 10px;
        height: 10px;
    }

    .door-edge {
        width: 10px;
    }

    .footer {
        gap: 12px;
    }

    .progress-track {
        width: 130px;
    }

    .ornament {
        gap: 6px;
        font-size: 7px;
    }

    .ornament::before,
    .ornament::after {
        width: 20px;
    }

    .loader-text {
        letter-spacing: 0.1em;
        line-height: 1.4;
    }


}