.loader {
  position: fixed;
  inset: 0;
  z-index: 300;

  background:
    radial-gradient(120% 92% at 20% 14%, #262626 0%, rgb(38 38 38 / 0) 60%),
    radial-gradient(105% 85% at 84% 90%, #101010 0%, rgb(16 16 16 / 0) 56%),
    linear-gradient(158deg, #1c1c1c 0%, #0d0d0d 46%, #000000 100%);
  overflow: hidden;
  will-change: transform;
}

.loader::before,
.loader::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.loader::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.019' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;

  opacity: .32;
}

.loader::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;

  opacity: .07;
}

.ld-stage {

  --ld-w: 30rem;
  --ld-h: calc(var(--ld-w) * 765 / 1327);

  --blk-w: 78rem;
  --blk-h: calc(var(--blk-w) / 1.8);

  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ld-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  z-index: 1;
  width: var(--blk-w);
  height: 0;
  overflow: hidden;
}
.ld-photo img {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 100vh;
  max-width: none;
  object-fit: cover;
  object-position: center 55%;
  will-change: transform;
}

@media (max-width: 767px) {
  .ld-photo img { object-position: center center; }
}

.ld-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 90% at 50% 50%,
    rgba(17,17,17,.56) 0%, rgba(17,17,17,.74) 100%);
}

.ld-mark {
  position: relative;
  z-index: 2;
  width: var(--ld-w);
  height: var(--ld-h);
}

.ld-base,
.ld-fill,
.ld-glint {
  position: absolute;
  inset: 0;
  display: block;
}

.ld-base { background: #ffffff; }

.ld-fillwrap,
.ld-glintwrap {
  position: absolute;
  inset: 0;
}
.ld-fillwrap { clip-path: circle(0% at 6% 94%); }

.ld-fill {
  background: var(--gold-metal);
}

.ld-glint {
  background: linear-gradient(163deg,
    rgba(255,255,255,0)     46.0%,
    rgba(255,246,226,.22)   47.6%,
    rgba(255,252,240,.66)   49.2%,
    rgba(255,255,255,.95)   50.0%,
    rgba(255,252,240,.66)   50.8%,
    rgba(255,246,226,.22)   52.4%,
    rgba(255,255,255,0)     54.0%,

    rgba(255,250,236,.14)   56.4%,
    rgba(255,253,244,.42)   57.8%,
    rgba(255,250,236,.14)   59.2%,
    rgba(255,255,255,0)     61.4%);

  background-size: 100% 300%;
  background-repeat: no-repeat;
  background-position: 50% 210%;
  mix-blend-mode: screen;
}

.ld-foot {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 3.6rem;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 2rem;

  color: rgba(255,255,255,.34);
}

@media (max-width: 1200px) {
  .ld-stage { --ld-w: 27rem; --blk-w: 82vw; }
}
@media (max-width: 991px) {
  .ld-stage { --ld-w: 25rem; --blk-w: 84vw; --blk-h: calc(var(--blk-w) / 1.5); }
}
@media (max-width: 767px) {
  .ld-stage { --ld-w: 19rem; --blk-w: 88vw; --blk-h: calc(var(--blk-w) / 1.15); }
  .ld-foot { bottom: 2.4rem; }
}

@media (max-height: 560px) {
  .ld-stage { --blk-h: 72vh; --blk-w: calc(var(--blk-h) * 1.8); --ld-w: 21rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-photo { width: 100vw !important; height: 100vh !important; }
  .ld-veil, .ld-mark { display: none; }
}

.ld-bar {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--ld-h) / 2 + 3.6rem);
  transform: translateX(-50%);
  z-index: 2;

  width: var(--ld-w);
  height: var(--hair);
  background: rgba(255,255,255,.18);
  overflow: hidden;
  opacity: 0;
}
.ld-bar i {
  display: block;
  width: 100%;
  height: 100%;

  background: linear-gradient(90deg, var(--gold-deep), var(--gold-lift) 50%, var(--gold-deep));
  transform: scaleX(0);

  transform-origin: center;
}

@media (max-width: 767px) { .ld-bar { top: calc(50% + var(--ld-h) / 2 + 2.8rem); } }

@media (prefers-reduced-motion: reduce) { .ld-bar { display: none; } }