/* ========================
   LOADING SCREEN (logo bottom-left sized to image; icon bottom-right)
   ======================== */

/* ---------- Base overlay ---------- */
#site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #3c3b31;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
#site-loader.hidden {
  opacity: 0;
  visibility: hidden;
}
body.no-scroll { overflow: hidden; }

/* ---------- Top Progress Bar ---------- */
#site-loader .loader-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: transparent;
  overflow: hidden;
}
#site-loader .loader-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: #fff;
  will-change: transform;
}

/* =========================================================
   Animated Logo Handoff (container sizes to image)
   ========================================================= */

/* Container (bottom-left). No forced width/ratio — shrinks to image size */
#site-loader .logo-slot {
  position: absolute;
  left: 40px;
  bottom: 40px;
  overflow: hidden;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  user-select: none;
  z-index: 1;
}

/* Both images share the same explicit size; tweak width to scale the logo */
#site-loader .logo-slot .logo {
  display: block;
  width: 200px;   /* ← control the exact visual size here */
  height: auto;
  object-fit: contain;
  object-position: center center;
  -webkit-user-drag: none;
  user-select: none;
  transform: translateY(0);
}

/* Bottom logo stays in normal flow so it SIZEs the container */
#site-loader .logo-slot .logo--bottom {
  position: relative;
  z-index: 1;
  animation: upSwapBottom 1.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

/* Top logo is absolutely stacked on top and slides out */
#site-loader .logo-slot .logo--top {
  position: absolute;
  inset: 0;
  z-index: 2;
  animation: upSwapTop 1.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

/* Text next to logo */
#site-loader .logo-text {
  position: absolute;
  bottom: 40px;
  left: 38%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  white-space: nowrap;
}

/* ---------- Bottom-right animation icon ---------- */
#site-loader .loader-icon {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 20px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#fff 0 0);
  background:
    var(--c) 0    0,
    var(--c) 50%  50%,
    var(--c) 100% 100%;
  animation: l17 1s infinite alternate;
}

/* ---------- Keyframes ---------- */
@keyframes l17 {
  0%, 10%  { background-size:20% 100% }
  50%      { background-size:20% 20% }
  90%,100% { background-size:100% 20% }
}

@keyframes upSwapTop {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-110%); }
}
@keyframes upSwapBottom {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0%); }
}

/* ---------- Responsive tweaks (restored but empty) ---------- */
@media (max-width: 400px) {
  #site-loader .logo-slot { left: 30px; bottom: 30px; }
  #site-loader .logo-slot .logo { width: 100px; }
  #site-loader .logo-text { display: none; }

  /* Icon adjustments */
  #site-loader .loader-icon {
    right: 30px;
    bottom: 30px;
    width: 20px;
  }

   /* Side vertical text */
  #site-loader .side-text-left,
  #site-loader .side-text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0px; 
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-orientation: upright;
     white-space: pre;   /* preserves normal spaces exactly as in HTML */
  }
  #site-loader .side-text-left { left: 30px; }
  #site-loader .side-text-right { right: 30px; }
}

@media (min-width: 401px) and (max-width: 767px) {
  #site-loader .logo-slot { left: 30px; bottom: 30px; }
  #site-loader .logo-slot .logo { width: 120px; }
  #site-loader .logo-text { display: none; }

  /* Icon adjustments */
  #site-loader .loader-icon {
    right: 30px;
    bottom: 30px;
    width: 22px;
  }

   /* Side vertical text */
  #site-loader .side-text-left,
  #site-loader .side-text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0px;
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-orientation: upright;
  }
  #site-loader .side-text-left { left: 30px; }
  #site-loader .side-text-right { right: 30px; }
}

@media (min-width: 768px) and (max-width: 999px) {
  #site-loader .logo-slot { left: 50px; bottom: 50px; }
  #site-loader .logo-slot .logo { width: 160px; }
  #site-loader .logo-text { display: none; }

  /* Icon adjustments */
  #site-loader .loader-icon {
    right: 50px;
    bottom: 50px;
    width: 30px;
  }

   /* Side vertical text */
  #site-loader .side-text-left,
  #site-loader .side-text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 2px;
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-orientation: upright;
  }
  #site-loader .side-text-left { left: 10px; }
  #site-loader .side-text-right { right: 10px; }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  #site-loader .logo-slot { left: 60px; bottom: 60px; }
  #site-loader .logo-slot .logo { width: 180px; }
  #site-loader .logo-text { display: none; }

  /* Icon adjustments */
  #site-loader .loader-icon {
    right: 60px;
    bottom: 60px;
    width: 35px;
  }

  /* Side vertical text */
  #site-loader .side-text-left,
  #site-loader .side-text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 2px;
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-orientation: upright;
  }
  #site-loader .side-text-left { left: 12px; }
  #site-loader .side-text-right { right: 12px; }
}

@media (min-width: 1200px) {
  #site-loader .logo-slot { left: 40px; bottom: 40px; }
  #site-loader .logo-slot .logo { width: 200px; }

  #site-loader .side-text-left,
  #site-loader .side-text-right {
    display: none !important;
  }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  #site-loader .loader-bar { transition: none !important; }
  #site-loader .logo-slot .logo--top,
  #site-loader .logo-slot .logo--bottom { animation: none !important; }
}