/* Post-door Hermes Club destination. The entrance itself remains in hermes-club.css. */
.hermes-club-page {
  --club-ink: #160e0a;
  background: var(--club-ink);
}

.club-place {
  /* This is the calculated bottom edge of the current desktop doorway frame. */
  --club-threshold: calc(50% + min(48.96svh, 30.96rem));
}

.club-doorway__signage {
  top: auto;
  bottom: calc(50% + min(19.04svh, 12.04rem) + clamp(1.4rem, 3svh, 2.75rem));
  z-index: 20;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  width: min(52.5vw, 33.5rem);
  padding: clamp(.82rem, 1.3vw, 1.05rem) clamp(1.35rem, 2.5vw, 2.05rem) clamp(.88rem, 1.4vw, 1.12rem);
  overflow: visible;
  isolation: isolate;
  gap: clamp(.35rem, .65svh, .52rem);
  border: 1px solid rgba(37, 27, 22, .72);
  border-radius: .06rem;
  background: linear-gradient(180deg, rgba(243, 238, 229, .035), transparent 28%, rgba(37, 27, 22, .16)), var(--ink);
  box-shadow: inset 0 1px 0 rgba(243, 238, 229, .055), inset 0 -1px 0 rgba(37, 27, 22, .42), 0 .24rem .46rem rgba(9, 5, 3, .52);
  color: var(--club-bone);
  text-align: center;
}

.club-doorway__signage::before {
  position: absolute;
  z-index: -1;
  top: .12rem;
  right: -.16rem;
  bottom: -.22rem;
  left: .16rem;
  border-radius: .03rem .06rem .1rem .06rem;
  background: rgba(37, 27, 22, .72);
  box-shadow: 0 .15rem .28rem rgba(9, 5, 3, .45);
  content: "";
}

.club-doorway__signage::after {
  position: absolute;
  z-index: 1;
  inset: .33rem;
  border: 1px solid rgba(37, 27, 22, .62);
  border-radius: .025rem;
  box-shadow: inset 0 1px 0 rgba(243, 238, 229, .025), inset 0 0 0 1px rgba(9, 5, 3, .14);
  content: "";
  pointer-events: none;
}

.club-doorway__sign-mark {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(3.3rem, 4.9vw, 4.45rem);
  aspect-ratio: 1;
  background: var(--club-bone);
  filter: drop-shadow(0 1px 0 rgba(246, 240, 228, .12)) drop-shadow(0 .11rem 0 rgba(9, 5, 3, .74)) drop-shadow(0 .22rem .3rem rgba(9, 5, 3, .52));
  -webkit-mask: url('assets/hermes-logo-transparent.png') center / contain no-repeat;
  mask: url('assets/hermes-logo-transparent.png') center / contain no-repeat;
}

.club-doorway__signage strong {
  position: relative;
  z-index: 2;
  font: 500 clamp(1.12rem, 1.85vw, 1.62rem) / .92 'Playfair Display', Georgia, serif;
  letter-spacing: .05em;
  color: var(--club-bone);
  text-shadow: 0 1px 0 rgba(246, 240, 228, .14), 0 .1rem 0 rgba(10, 6, 4, .78), 0 .22rem .32rem rgba(10, 6, 4, .55);
}

.club-doorway__sign-fixing {
  position: absolute;
  z-index: 3;
  width: clamp(.32rem, .48vw, .42rem);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 240, 228, .7);
  border-radius: 50%;
  background: rgba(246, 240, 228, .04);
  box-shadow: inset 0 -1px 0 rgba(37, 27, 22, .42), 0 1px 1px rgba(9, 5, 3, .54);
}

.club-doorway__sign-fixing--top-left { top: clamp(.48rem, .9vw, .64rem); left: clamp(.48rem, .9vw, .64rem); }
.club-doorway__sign-fixing--top-right { top: clamp(.48rem, .9vw, .64rem); right: clamp(.48rem, .9vw, .64rem); }
.club-doorway__sign-fixing--bottom-left { bottom: clamp(.48rem, .9vw, .64rem); left: clamp(.48rem, .9vw, .64rem); }
.club-doorway__sign-fixing--bottom-right { right: clamp(.48rem, .9vw, .64rem); bottom: clamp(.48rem, .9vw, .64rem); }

.club-doorway__wall {
  background: linear-gradient(90deg, rgba(246, 240, 228, .025), transparent 24%, transparent 76%, rgba(246, 240, 228, .025));
  box-shadow: inset 0 -14vh rgba(22, 14, 10, .44);
}

.club-doorway__frame {
  border-color: rgba(246, 240, 228, .38);
  background: #211813;
  box-shadow: 0 1.35rem 3rem rgba(10, 6, 4, .62), inset 0 0 0 clamp(.85rem, 1.8vw, 1.5rem) var(--club-ink), inset 0 0 0 calc(clamp(.85rem, 1.8vw, 1.5rem) + 1px) rgba(246, 240, 228, .16);
}

.club-door {
  border-color: rgba(246, 240, 228, .28);
  background: linear-gradient(100deg, rgba(246, 240, 228, .035), transparent 28%, transparent 74%, rgba(246, 240, 228, .014)), #1c1410;
  box-shadow: inset .3rem 0 .55rem rgba(246, 240, 228, .02), inset -.5rem 0 .7rem rgba(10, 6, 4, .5), 0 .9rem 1.25rem rgba(10, 6, 4, .48);
}

.club-door__panel {
  border-color: rgba(246, 240, 228, .16);
  background: linear-gradient(135deg, rgba(246, 240, 228, .018), rgba(10, 6, 4, .4)), #160e0a;
}

.club-doorway__floor-line {
  z-index: 0;
  top: var(--club-threshold);
  bottom: 0;
  height: auto;
  border-top-color: rgba(246, 240, 228, .1);
  background: linear-gradient(180deg, rgba(246, 240, 228, .014), transparent 44%), #1a120e;
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transition: transform 1.25s var(--club-ease) .56s, opacity 1s var(--club-ease) .7s;
}

.club-doorway__frame {
  transform-origin: 50% 100%;
}

.club-place.is-open .club-doorway__floor-line {
  opacity: 0;
  transform: translateZ(460px) scale(1.35);
}

.club-recovery-room {
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--club-ink);
  opacity: 0;
  pointer-events: none;
  transform: scale(.975);
  transition: opacity .52s var(--club-ease) .24s, transform 1.35s var(--club-ease) .24s;
}

.club-screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  isolation: isolate;
}

.club-screen::before {
  display: none;
}

.club-screen::after {
  display: none;
}

.club-screen__watermark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(19rem, 64vw, 52rem);
  aspect-ratio: 1;
  pointer-events: none;
  background: var(--club-bone);
  opacity: .09;
  transform: translate(-50%, -50%);
  -webkit-mask: url('assets/hermes-logo-transparent.png') center / contain no-repeat;
  mask: url('assets/hermes-logo-transparent.png') center / contain no-repeat;
}

.club-screen__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(33rem, calc(100vw - 3rem));
  color: var(--club-bone);
  text-align: center;
}

.club-screen__content > * {
  margin: 0;
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .72s var(--club-ease), transform .72s var(--club-ease);
}

.club-screen__identifier {
  font: 400 clamp(1.05rem, 1.55vw, 1.35rem) / 1.2 'Playfair Display', Georgia, serif;
  letter-spacing: .14em;
}

.club-screen__divider {
  width: clamp(3.5rem, 6.5vw, 5.6rem);
  height: 1px;
  margin: 1.4rem 0 1.35rem;
  background: rgba(246, 240, 228, .48);
}

.club-screen h1 {
  font: 400 clamp(3.35rem, 7.2vw, 6.65rem) / .82 'Playfair Display', Georgia, serif;
  letter-spacing: -.065em;
}

.club-screen__loyalty {
  width: min(26rem, 100%);
  margin-top: 2rem;
  font: 400 clamp(.82rem, 1.1vw, 1rem) / 1.58 Manrope, Arial, sans-serif;
  letter-spacing: .075em;
}

.club-screen__quiet {
  margin-top: 1rem;
  font: 400 clamp(.66rem, .78vw, .75rem) / 1.45 'Playfair Display', Georgia, serif;
  letter-spacing: .045em;
  opacity: 0;
}

.club-screen__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  margin-top: 2rem;
  padding: .8rem 1.45rem;
  border: 1px solid var(--club-bone);
  border-radius: 999px;
  color: var(--club-bone);
  font: 500 .7rem / 1 'DM Mono', monospace;
  letter-spacing: .11em;
  text-decoration: none;
  transition: opacity .72s var(--club-ease), transform .72s var(--club-ease), background-color .28s var(--club-ease), color .28s var(--club-ease);
}

.club-screen__cta:hover,
.club-screen__cta:focus-visible {
  outline: 0;
  background: var(--club-bone);
  color: var(--club-ink);
}

.club-place.is-open .club-recovery-room {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.club-place.is-open .club-screen__identifier { opacity: 1; transform: translateY(0); transition-delay: 2.82s; }
.club-place.is-open .club-screen__divider { opacity: 1; transform: translateY(0); transition-delay: 3.18s; }
.club-place.is-open .club-screen h1 { opacity: 1; transform: translateY(0); transition-delay: 3.48s; }
.club-place.is-open .club-screen__loyalty { opacity: 1; transform: translateY(0); transition-delay: 4.06s; }
.club-place.is-open .club-screen__quiet { opacity: .72; transform: translateY(0); transition-delay: 4.48s; }
.club-place.is-open .club-screen__cta { opacity: 1; transform: translateY(0); transition-delay: 4.88s; }

@media (max-width: 760px) {
  .club-place { --club-threshold: calc(50% + min(48svh, 27.75rem)); }
  .club-doorway__signage {
    bottom: calc(50% + min(16svh, 9.25rem) + clamp(1rem, 2.2svh, 1.45rem));
    width: min(76vw, 22rem);
    padding: .72rem .95rem .78rem;
    gap: .32rem;
  }
  .club-doorway__sign-mark { width: clamp(3rem, 13vw, 3.95rem); }
  .club-doorway__signage strong { font-size: clamp(1.06rem, 4.3vw, 1.34rem); }
  .club-doorway__sign-fixing { width: .32rem; }
  .club-screen__content { width: min(22rem, calc(100vw - 2.5rem)); }
  .club-screen__watermark { width: min(22rem, 72vw); }
  .club-screen__loyalty { width: min(19rem, 100%); }
  .club-screen h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .club-place.is-open .club-doorway__floor-line { transform: translateZ(360px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .club-recovery-room,
  .club-screen__content > * { transition: none; }

  .club-place.is-open .club-screen__content > * {
    opacity: 1;
    transform: translateY(0);
  }

  .club-place.is-open .club-screen__quiet { opacity: .72; }

}