/* ========================================
   CLUB HOUSE88
   ROYAL VIP GOLD — LUXURY CTA
======================================== */

:root {
  --bg: #080705;

  --black1: #292015;
  --black2: #100d09;
  --black3: #070605;

  --gold1: #fff1b8;
  --gold2: #f8d985;
  --gold3: #c49a47;
  --gold4: #8b581b;

  --emerald: #1b3830;

  --textGold: #fff0ba;
}


/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;

  background: #080705;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


/* ========================================
   LANDING BACKGROUND
======================================== */

.page {
  width: min(560px, 100%);
  min-height: 100vh;

  margin: 0 auto;

  padding-bottom:
    calc(115px + env(safe-area-inset-bottom));

  background:
    radial-gradient(
      ellipse at 50% 30%,
      #20180c,
      #080705 75%
    );

  box-shadow:
    0 0 70px rgba(0, 0, 0, .65);
}

.posterWrap {
  position: relative;
  width: 100%;
  overflow: hidden;

  background: #000;
}

.posterImg {
  display: block;

  width: 100%;
  height: auto;

  user-select: none;
  -webkit-user-drag: none;
}


/* ========================================
   ROYAL VIP GOLD CTA
======================================== */

.cta {
  position: fixed;

  left: 50%;

  bottom:
    calc(14px + env(safe-area-inset-bottom));

  width: min(520px, 92vw);
  height: 76px;

  z-index: 100;

  display: flex;

  padding: 2px;

  border-radius: 999px;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  /*
    Metallic Gold Outer Border
  */

  background:
    linear-gradient(
      115deg,
      #825019 0%,
      #fff1b8 20%,
      #c18c34 40%,
      #73501c 60%,
      #ebc777 82%,
      #9b6726 100%
    );

  box-shadow:
    0 18px 55px rgba(0, 0, 0, .72),

    0 0 16px rgba(248, 217, 133, .28),

    0 0 28px rgba(196, 154, 71, .15),

    0 0 0 1px rgba(255, 239, 177, .18);

  transform: translateX(-50%);

  isolation: isolate;

  animation:
    vipBreathing 5s ease-in-out infinite;

  transition:
    transform .18s ease,
    filter .18s ease;
}


/* ========================================
   VIP GOLD HALO
======================================== */

.cta::before {
  content: "";

  position: absolute;

  inset: -7px;

  border-radius: inherit;

  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(196, 154, 71, .45),
      rgba(255, 241, 184, .75),
      rgba(196, 154, 71, .45)
    );

  filter: blur(13px);

  opacity: .18;

  pointer-events: none;

  animation:
    vipAura 5s ease-in-out infinite;
}


/* ========================================
   INNER BUTTON
======================================== */

.ctaInner {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  padding: 7px 20px 7px 9px;

  border-radius: 999px;

  overflow: hidden;

  color: var(--textGold);

  background:
    radial-gradient(
      120% 180% at 18% 0%,
      rgba(255, 239, 180, .13),
      transparent 45%
    ),

    linear-gradient(
      180deg,
      var(--black1) 0%,
      var(--black2) 48%,
      var(--black3) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),

    inset 0 -7px 15px rgba(0, 0, 0, .35);
}


/* ========================================
   SECOND GOLD BORDER
======================================== */

.ctaInner::after {
  content: "";

  position: absolute;

  inset: 5px;

  border-radius: inherit;

  border:
    1px solid rgba(248, 217, 133, .25);

  pointer-events: none;

  z-index: 1;
}


/* ========================================
   CHAMPAGNE GOLD SWEEP
======================================== */

.ctaInner::before {
  content: "";

  position: absolute;

  top: -30%;
  bottom: -30%;

  left: -40%;

  width: 32%;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 241, 184, .08) 15%,
      rgba(255, 255, 255, .70) 48%,
      rgba(248, 217, 133, .18) 70%,
      transparent 100%
    );

  transform:
    skewX(-22deg)
    translateX(-250%);

  filter: blur(1px);

  opacity: 0;

  pointer-events: none;

  animation:
    champagneSweep 4.8s ease-in-out infinite;
}


/* ========================================
   ROYAL GOLD SEAL
======================================== */

.royalSeal {
  position: relative;

  z-index: 2;

  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: grid;
  place-items: center;

  margin-right: 13px;

  border-radius: 50%;

  background:
    linear-gradient(
      140deg,
      #fff1b8 0%,
      #d9ae5b 27%,
      #8b581b 58%,
      #f8d985 100%
    );

  box-shadow:
    0 0 11px rgba(248, 217, 133, .30),

    0 0 0 2px rgba(196, 154, 71, .13),

    inset 0 1px 2px rgba(255, 255, 255, .55);

  animation:
    sealGlow 5s ease-in-out infinite;
}


/* INNER SEAL */

.sealInner {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #f8d985;

  font-family: Georgia, serif;

  font-size: 22px;
  font-weight: 900;

  letter-spacing: -2px;

  background:
    radial-gradient(
      circle at 35% 25%,
      #234438 0%,
      #141b14 35%,
      #0d0a07 75%
    );

  border:
    1px solid rgba(255, 230, 155, .60);

  text-shadow:
    0 1px 0 #553910,
    0 0 9px rgba(248, 217, 133, .45);

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, .70);
}


/* ========================================
   CTA TEXT
======================================== */

.ctaCopy {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  line-height: 1.08;
}

.ctaCopy small {
  margin-bottom: 4px;

  color: #bfa269;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.ctaCopy strong {
  color: #fff0ba;

  font-size: 23px;
  font-weight: 900;

  letter-spacing: -.25px;

  text-shadow:
    0 2px 0 rgba(0, 0, 0, .55),

    0 0 12px rgba(248, 217, 133, .25);
}


/* ========================================
   GOLD ARROW
======================================== */

.ctaArrow {
  position: relative;
  z-index: 2;

  margin-left: auto;

  padding-bottom: 4px;

  color: #f8d985;

  font-size: 38px;
  font-weight: 300;

  line-height: 1;

  text-shadow:
    0 0 10px rgba(248, 217, 133, .45);

  animation:
    royalArrow 3s ease-in-out infinite;
}


/* ========================================
   ANIMATION — GOLD SWEEP
======================================== */

@keyframes champagneSweep {

  0%,
  22% {
    transform:
      skewX(-22deg)
      translateX(-250%);

    opacity: 0;
  }

  30% {
    opacity: .55;
  }

  44% {
    transform:
      skewX(-22deg)
      translateX(650%);

    opacity: .80;
  }

  50%,
  100% {
    transform:
      skewX(-22deg)
      translateX(650%);

    opacity: 0;
  }
}


/* ========================================
   ANIMATION — VIP BREATHING
======================================== */

@keyframes vipBreathing {

  0%,
  100% {
    transform:
      translateX(-50%)
      scale(1);
  }

  48% {
    transform:
      translateX(-50%)
      scale(1.015);
  }

  65% {
    transform:
      translateX(-50%)
      scale(1);
  }
}


/* ========================================
   ANIMATION — GOLD AURA
======================================== */

@keyframes vipAura {

  0%,
  100% {
    opacity: .14;
  }

  45% {
    opacity: .38;
  }

  65% {
    opacity: .20;
  }
}


/* ========================================
   ANIMATION — SEAL
======================================== */

@keyframes sealGlow {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  45% {
    transform: scale(1.045);
    filter: brightness(1.12);
  }

  60% {
    transform: scale(1);
    filter: brightness(1);
  }
}


/* ========================================
   ANIMATION — ARROW
======================================== */

@keyframes royalArrow {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}


/* ========================================
   PRESS EFFECT
======================================== */

.cta:active {
  animation: none;

  transform:
    translateX(-50%)
    scale(.985);

  filter: brightness(1.13);
}


/* KEYBOARD ACCESSIBILITY */

.cta:focus-visible {
  outline: 3px solid #fff1b8;
  outline-offset: 4px;
}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 390px) {

  .cta {
    width: 94vw;
    height: 70px;
  }

  .ctaInner {
    padding:
      6px 15px 6px 7px;
  }

  .royalSeal {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    margin-right: 11px;
  }

  .sealInner {
    width: 40px;
    height: 40px;

    font-size: 20px;
  }

  .ctaCopy strong {
    font-size: 21px;
  }

  .ctaArrow {
    font-size: 34px;
  }
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .cta,
  .cta::before,
  .ctaInner::before,
  .royalSeal,
  .ctaArrow {
    animation: none;
  }
}