.brand-loader {
  --loader-wine: #241017;
  --loader-wine-deep: #10070b;
  --loader-wine-soft: #5b2235;
  --loader-gold: #b08d2e;
  --loader-gold-soft: #f6dfb9;
  --loader-paper: #f6f0e3;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--loader-gold-soft);
  background:
    radial-gradient(circle at 52% 46%, rgba(246, 223, 185, 0.2) 0 8%, transparent 35%),
    radial-gradient(circle at 50% 105%, rgba(176, 141, 46, 0.16), transparent 38%),
    linear-gradient(115deg, var(--loader-wine-deep) 0%, var(--loader-wine) 42%, var(--loader-wine-soft) 100%);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
}

.brand-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.brand-loader::before {
  content: "1839";
  position: absolute;
  right: clamp(-5rem, -3vw, -2rem);
  bottom: clamp(-3rem, -4vw, -1rem);
  color: rgba(246, 223, 185, 0.055);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(13rem, 33vw, 30rem);
  font-weight: 800;
  line-height: 0.72;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.brand-loader::after {
  content: "";
  position: absolute;
  inset: -20% -18%;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 41%, rgba(246, 223, 185, 0.12) 48%, rgba(176, 141, 46, 0.16) 50%, transparent 59%),
    repeating-linear-gradient(0deg, rgba(246, 223, 185, 0.035) 0 1px, transparent 1px 14px);
  opacity: 0.72;
  transform: translateX(-12%) skewX(-10deg);
  animation: lhardy-loader-light var(--brand-loader-duration, 1200ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.brand-loader__frame {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 1.7vw, 1.12rem);
  width: min(38rem, calc(100vw - 2rem));
  padding: clamp(1.6rem, 4vw, 3rem) 1rem;
  text-align: center;
}

.brand-loader__frame::before {
  content: "MADRID 1839";
  order: -1;
  color: rgba(246, 223, 185, 0.62);
  font-family: var(--font-gazette, Georgia, serif);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateY(0.45rem);
  animation: lhardy-loader-rise 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}

.brand-loader__progress {
  display: block;
  width: min(18rem, 68vw);
  height: 0.38rem;
  margin-top: clamp(0.2rem, 0.7vw, 0.45rem);
  border: 1px solid rgba(246, 223, 185, 0.18);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16, 7, 11, 0.56), rgba(91, 34, 53, 0.42));
  box-shadow:
    inset 0 0 0 1px rgba(16, 7, 11, 0.28),
    0 0 22px rgba(176, 141, 46, 0.2);
  overflow: hidden;
}

.brand-loader__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--loader-gold) 0%, var(--loader-gold-soft) 48%, var(--loader-gold) 100%);
  box-shadow: 0 0 18px rgba(246, 223, 185, 0.22);
  transform: scaleX(0);
  transform-origin: left center;
  animation: lhardy-loader-progress var(--brand-loader-duration, 1200ms) linear forwards;
}

.brand-loader__percent {
  display: block;
  min-width: 4ch;
  color: rgba(246, 223, 185, 0.72);
  font-family: var(--font-gazette, Georgia, serif);
  font-size: clamp(0.74rem, 0.95vw, 0.88rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  line-height: 1;
  opacity: 0;
  transform: translateY(0.35rem);
  animation: lhardy-loader-rise 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.brand-loader__logo {
  width: clamp(220px, 34vw, 410px);
  height: auto;
  opacity: 0;
  filter:
    drop-shadow(0 22px 38px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 20px rgba(176, 141, 46, 0.18));
  transform: translateY(0.75rem) scale(0.965);
  animation: lhardy-loader-logo 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.brand-loader__name {
  display: none;
}

.brand-loader__line {
  display: block;
  max-width: min(25rem, 76vw);
  color: rgba(246, 240, 227, 0.78);
  font-family: var(--font-gazette, Georgia, serif);
  font-size: clamp(0.92rem, 1.25vw, 1.1rem);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.035em;
  opacity: 0;
  transform: translateY(0.45rem);
  animation: lhardy-loader-rise 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

.brand-loader__line::before {
  content: "";
  display: block;
  width: min(8rem, 34vw);
  height: 0.34rem;
  margin: 0 auto clamp(0.65rem, 1.4vw, 0.9rem);
  background:
    linear-gradient(var(--loader-gold-soft), var(--loader-gold-soft)) top / 100% 1px no-repeat,
    linear-gradient(var(--loader-gold-soft), var(--loader-gold-soft)) bottom / 100% 1px no-repeat;
  opacity: 0.52;
  transform: scaleX(0);
  animation: lhardy-loader-rule 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

html.brand-loader-lock,
html.brand-loader-lock body {
  overflow: hidden;
}

@keyframes lhardy-loader-logo {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lhardy-loader-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lhardy-loader-rule {
  to {
    transform: scaleX(1);
  }
}

@keyframes lhardy-loader-progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes lhardy-loader-light {
  to {
    opacity: 0.24;
    transform: translateX(10%) skewX(-10deg);
  }
}

@media (max-width: 520px) {
  .brand-loader::before {
    right: -3.8rem;
    bottom: -1.2rem;
    font-size: clamp(10rem, 54vw, 16rem);
  }

  .brand-loader__frame {
    width: min(25rem, 88vw);
  }

  .brand-loader__logo {
    display: block;
    width: clamp(178px, 68vw, 270px);
  }

  .brand-loader__line {
    max-width: 19rem;
    font-size: clamp(0.86rem, 4vw, 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-loader,
  .brand-loader::after,
  .brand-loader__frame::before,
  .brand-loader__logo,
  .brand-loader__progress-fill,
  .brand-loader__percent,
  .brand-loader__line,
  .brand-loader__line::before {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .brand-loader__frame::before,
  .brand-loader__logo,
  .brand-loader__percent,
  .brand-loader__line {
    opacity: 1;
    transform: none;
  }

  .brand-loader__line::before {
    transform: scaleX(1);
  }

  .brand-loader__progress-fill {
    transform: scaleX(1);
  }
}