/* =========================================
   THE HOUSE24
   OBSIDIAN GOLD — ARCHITECTURAL CTA
========================================= */

:root {
  --bg: #10091c;
  --bg2: #080610;

  --obsidian1: #291c34;
  --obsidian2: #130d1c;
  --obsidian3: #090711;

  --gold1: #ffe49a;
  --gold2: #e8b65f;
  --gold3: #b98132;

  --purple: #873ac8;
  --purpleGlow: #a64cff;

  --textGold: #fff0cb;
}


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

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  background: var(--bg);
}

body {
  margin: 0;

  background: var(--bg);

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

  -webkit-font-smoothing: antialiased;
}


/* =========================================
   LANDING PAGE
========================================= */

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

  min-height: 100vh;
  min-height: 100svh;

  margin: 0 auto;

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

  background:
    radial-gradient(
      ellipse at 50% 25%,
      #28123e,
      #10091c 65%,
      #080610
    );

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

.posterWrap {
  position: relative;

  width: 100%;
  overflow: hidden;

  background: #080610;
}

.posterImg {
  display: block;

  width: 100%;
  height: auto;

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


/* =========================================
   OBSIDIAN 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;

  color: var(--textGold);
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  /*
    Architectural Cut Corners
  */

  clip-path: polygon(
    18px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0 100%,
    0 18px
  );

  /*
    Metallic Gold + Purple Border
  */

  background:
    linear-gradient(
      110deg,
      #9e6125 0%,
      #ffe49a 21%,
      #c28736 43%,
      #7938b1 70%,
      #dca959 88%,
      #fff0b0 100%
    );

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

  transform: translateX(-50%);

  isolation: isolate;

  animation:
    architecturalPulse
    4.8s ease-in-out infinite;

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


/* =========================================
   INNER PANEL
========================================= */

.ctaInner {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 7px 19px 7px 10px;

  overflow: hidden;

  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );

  background:
    radial-gradient(
      120% 170% at 16% 0%,
      rgba(255, 221, 148, .13),
      transparent 45%
    ),

    linear-gradient(
      180deg,
      var(--obsidian1) 0%,
      var(--obsidian2) 48%,
      var(--obsidian3) 100%
    );
}


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

.ctaInner::after {
  content: "";

  position: absolute;

  inset: 5px;

  z-index: 1;

  border:
    1px solid rgba(232, 182, 95, .24);

  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );

  pointer-events: none;
}


/* =========================================
   GOLD LIGHT SWEEP
========================================= */

.ctaInner::before {
  content: "";

  position: absolute;

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

  left: -35%;

  width: 28%;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 219, 143, .08) 15%,
      rgba(255, 249, 218, .70) 50%,
      rgba(232, 182, 95, .18) 75%,
      transparent 100%
    );

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

  filter: blur(1px);

  opacity: 0;

  pointer-events: none;

  animation:
    obsidianSweep
    4.4s ease-in-out infinite;
}


/* =========================================
   ARCHITECTURAL H SYMBOL
========================================= */

.houseMark {
  position: relative;

  z-index: 2;

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  margin-right: 13px;

  padding: 2px;

  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );

  background:
    linear-gradient(
      135deg,
      #ffe49a,
      #aa702d 48%,
      #a64cff 78%,
      #dfaf60
    );

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

.houseMarkInner {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  clip-path: polygon(
    9px 0,
    100% 0,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    0 100%,
    0 9px
  );

  color: #ffdc80;

  font-family: Georgia, serif;

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

  background:
    linear-gradient(
      145deg,
      #291634,
      #120c1c 60%,
      #090710
    );

  text-shadow:
    0 1px 0 #664014,
    0 0 12px rgba(255, 216, 128, .45);
}


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

.ctaCopy {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  min-width: 0;

  line-height: 1.08;
}

.ctaCopy small {
  margin-bottom: 4px;

  color: #c6a7d7;

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

  letter-spacing: 1.6px;
}

.ctaCopy strong {
  color: #fff0cb;

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

  letter-spacing: -.3px;

  text-shadow:
    0 2px 0 rgba(0, 0, 0, .60),
    0 0 12px rgba(232, 182, 95, .24);
}


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

.ctaArrow {
  position: relative;

  z-index: 2;

  margin-left: auto;

  padding-bottom: 4px;

  color: #ffd77e;

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

  line-height: 1;

  text-shadow:
    0 0 10px rgba(255, 215, 126, .45);

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


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

@keyframes obsidianSweep {

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

    opacity: 0;
  }

  31% {
    opacity: .45;
  }

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

    opacity: .80;
  }

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

    opacity: 0;
  }
}


/* =========================================
   ANIMATION — PREMIUM PULSE
========================================= */

@keyframes architecturalPulse {

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

    filter:
      brightness(1)
      drop-shadow(
        0 0 9px rgba(166, 76, 255, .17)
      )
      drop-shadow(
        0 0 8px rgba(232, 182, 95, .13)
      );
  }

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

    filter:
      brightness(1.09)
      drop-shadow(
        0 0 15px rgba(166, 76, 255, .35)
      )
      drop-shadow(
        0 0 15px rgba(232, 182, 95, .27)
      );
  }

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

    filter:
      brightness(1.02)
      drop-shadow(
        0 0 10px rgba(166, 76, 255, .20)
      );
  }
}


/* =========================================
   ANIMATION — H SYMBOL
========================================= */

@keyframes houseMarkGlow {

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

  46% {
    transform: scale(1.05);
    filter: brightness(1.18);
  }

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


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

@keyframes arrowShift {

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

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


/* =========================================
   INTERACTION
========================================= */

.cta:active {
  animation: none;

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

  filter: brightness(1.16);
}

.cta:focus-visible {
  outline: 3px solid #ffe49a;
  outline-offset: 5px;
}


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

@media (max-width: 390px) {

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

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

  .houseMark {
    width: 47px;
    height: 47px;

    flex-basis: 47px;

    margin-right: 11px;
  }

  .houseMarkInner {
    font-size: 26px;
  }

  .ctaCopy small {
    font-size: 8px;
  }

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

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


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

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

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

  .cta {
    transform: translateX(-50%);
  }
}