/* ============================
   RESET
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Allow scrolling on long pages */
html, body {
  overflow: scroll;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

/* ============================
   HERO SECTION
============================ */

.hero-bg {
    position: fixed;       /* stays behind content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;         /* full viewport height */
    overflow: hidden;
    z-index: -1;           /* behind everything */
}

.hero-bg img {
    position: absolute;    
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;     
    object-position: center;
    transform: translate(-50%, -50%);
    filter: blur(3px); /* apply blur here, adjust px as needed */
    /* optional for smoother edges on blur */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* 50% black overlay */
    z-index: 1; /* overlay sits above the image */
}

/* ============================
   BRAND PALETTE VARIABLES
============================ */
:root {
  --brand-green: 0, 250, 160;  /* #00FAA0 */
  --brand-black: 61, 66, 46;   /* #3D422E */
  --brand-gold: 197, 183, 150; /* #C5B796 */

  --color-bg1: rgba(var(--brand-black), 1);
  --color-bg2: rgba(var(--brand-gold), 0.2);

  /* floating blobs */
  --color1: var(--brand-green);
  --color2: var(--brand-gold);
  --color3: var(--brand-black);
  --color4: var(--brand-green);
  --color5: var(--brand-gold);

  /* interactive overlay */
  --color-interactive: var(--brand-green);

  --circle-size: 80%;
  --blending: hard-light;
}

/* ============================
   ANIMATIONS
============================ */
@keyframes moveInCircle {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
  0%   { transform: translateY(-50%); }
  50%  { transform: translateY(30%); }
  100% { transform: translateY(-50%); }
}

@keyframes moveHorizontal {
  0%   { transform: translateX(-50%) translateY(-10%); }
  50%  { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}

/* ============================
   FULL-SCREEN BACKGROUND
============================ */
.gradient-bg {
position: fixed;            /* stay behind all content */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
overflow: hidden;
z-index: 0;                 /* behind all content */
}

.gradients-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: url(#goo) blur(40px);
z-index: 1;
pointer-events: none;
}

.superior-club section{
margin-bottom: 1rem !important;
padding: 1rem;
}

.superior-club section h2{
color: #ebe4d1 !important;
text-align: center;
margin-bottom: 2rem !important;
line-height: 2.4rem !important;
letter-spacing: 1pt !important;
font-size: 1.75rem !important;
}

.superior-club section p{
color: #ebe4d1 !important;
border-bottom: solid 1px #ebe4d1 !important;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
letter-spacing: 0.9pt !important;
}

.superior-club-title{
margin-top: 5rem !important;
margin-bottom: 0rem !important;
padding: 1rem;
letter-spacing: 0.25pt !important;
color: #ebe4d1 !important;
text-align: center;
}

.superior-club-tagline{
text-align: center;
margin-bottom: 4rem !important;
padding: 1rem;
}

.superior-club-tagline p{
color: #ebe4d1 !important;
letter-spacing: 0.8pt !important;
text-align: center;
}

/* BLOBS */
.g1, .g2, .g3, .g4, .g5, .interactive {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: var(--blending);
}

.g1 {
  background: radial-gradient(circle at center, rgba(var(--color1), 0.8), rgba(var(--color1), 0) 50%);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size)/2);
  left: calc(50% - var(--circle-size)/2);
  animation: moveVertical 10s ease infinite;
}

.g2 {
  background: radial-gradient(circle, rgba(var(--color2), 0.8), rgba(var(--color2), 0) 50%);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size)/2);
  left: calc(50% - var(--circle-size)/2);
  animation: moveInCircle 8s reverse infinite;
}

.g3 {
  background: radial-gradient(circle, rgba(var(--color3), 0.8), rgba(var(--color3), 0) 50%);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size)/2 + 200px);
  left: calc(50% - var(--circle-size)/2 - 500px);
  animation: moveInCircle 12s linear infinite;
}

.g4 {
  background: radial-gradient(circle, rgba(var(--color4), 0.8), rgba(var(--color4), 0) 50%);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size)/2);
  left: calc(50% - var(--circle-size)/2);
  animation: moveHorizontal 12s ease infinite;
}

.g5 {
  background: radial-gradient(circle, rgba(var(--color5), 0.8), rgba(var(--color5), 0) 50%);
  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  animation: moveInCircle 8s ease infinite;
}

.interactive {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(var(--color-interactive), 0.8), rgba(var(--color-interactive), 0) 50%);
  top: -50%;
  left: -50%;
  opacity: 0.7;
}

/* ============================
   SUPERIOR CLUB PAGE STYLING
============================ */
.superior-club {
    padding: 3rem 1rem;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 10; /* keeps content above background */
    color: #ebe4d1;
}

.superior-club-form {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00faa0;
    padding: 2rem;
    border-radius: 0px;
    max-width: 550px;
    margin: 0 auto;
    margin-bottom: 3rem;
}

.superior-club .field {
    margin-bottom: 1.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
    padding-right: 1rem;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap; /* allows wrapping if too long */
    gap: 10px;       /* optional spacing */
    align-items: center;
}

.field-label {
    flex-basis: 100%;  /* pushes field-label onto its own row */
    margin-bottom: 10px !important;
}

.checkbox-label {
    display: flex;
    align-items: center;
}

.superior-club input[type="email"] {
    margin-top: 1rem;
}


.superior-club input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;

    background-color: transparent; /* custom bg */
    border: 1px solid #fff;        /* custom border color + width */
    border-radius: 0px;            /* keep square, slightly rounded is optional */

    cursor: pointer;
    position: relative;
}

/* when checked */
.superior-club input[type="checkbox"]:checked {
    background-color: #00faa0;  /* your green fill */
    border-color: #00faa0;      /* optional: match border to fill */
}

.superior-club input[type="email"] {
    width: 100%;
    padding: 0.6rem;
    border-radius: 0px;
    border: 1px solid white;
    background: transparent;
    color: #fff;
}

.superior-club-submit {
    background-color: #00faa0;
    color: #000;
    border: none;
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 100px !important;
    transition: 0.25s ease;
}

.superior-club-submit:hover {
    background-color: #00dd88;
    transform: translateY(-1px);
}

.superior-club-success {
    background: rgba(0, 250, 160, 0.15);
    border: 1px solid #00faa0;
    padding: 1.2rem 1.5rem;
    border-radius: 10px;
    margin: 2rem auto;
    max-width: 480px;
    color: #ebe4d1;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(6px);
}

.superior-club-success p{
    color: white !important;
}

.superior-club form p{
    color: #e5d5ae !important;
    font-size: 1.05rem !important;
    margin-bottom: 0rem;
    letter-spacing: 1pt;
}

/* ============================
   MEDIA QUERIES
============================ */
@media only screen and (max-width: 1300px) {
  section{
    display: unset !important;
  }
  
}