/* =========================================================
   THE EVENING GALA
   MAIN STYLESHEET
========================================================= */

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

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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  background: #0b0b0b;
  color: #ffffff;

  overflow: hidden;
}

/* =========================================================
   MAIN SCROLL CONTAINER
========================================================= */

.scroll-container {
  position: relative;
  width: 100%;
  height: 100vh;

  overflow: hidden !important;
}

/* =========================================================
   GLOBAL SECTIONS
========================================================= */

section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px 20px;

  overflow: hidden;

  background: #0b0b0b;
  color: #ffffff;

  isolation: isolate;
}

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

.hero {
  position: relative;

  flex-direction: column;

  background: #0b0b0b;

  border-bottom: 1px solid #2a2a2a;
}

/* ---------------------------------------------------------
   HERO OVERLAY IMAGE
--------------------------------------------------------- */

.hero-background-image {
  position: absolute;

  width: 100%;
  /* max-width: 100vh; */
  height: auto;

  /* right: 5%; */
  bottom: 0;

  z-index: 2;

  pointer-events: none;
  user-select: none;
  object-fit: cover;
}

/* ---------------------------------------------------------
   HERO CONTENT
--------------------------------------------------------- */

.hero-content {
  position: relative;

  z-index: 10;

  max-width: 800px;

  text-align: center;

  margin-bottom: 80px;

  transform: translateY(-20px);
}

/* ---------------------------------------------------------
   HERO SUBTITLE
--------------------------------------------------------- */

.hero-subtitle {
  font-size: 12px;

  color: #777777;

  line-height: 1.4;
}

.hero-subtitle strong {
  font-size: 36px;

  color: #ffffff;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;
}

/* ---------------------------------------------------------
   HERO HEADING
--------------------------------------------------------- */

.hero h1 {
  font-size: 72px;

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -2px;

  margin-bottom: 14px;

  color: #ffffff;
}

/* ---------------------------------------------------------
   HERO DESCRIPTION
--------------------------------------------------------- */

.hero p {
  font-size: 22px;

  line-height: 1.4;

  color: #a8a8a8;
}

/* =========================================================
   BUTTONS
========================================================= */

.cta-button,
.cta-button2,
.confirm-btn {
  cursor: pointer;

  border: none;

  font-family: inherit;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------
   PRIMARY CTA
--------------------------------------------------------- */

.cta-button {
  position: relative;

  z-index: 50;

  display: inline-block;

  padding: 18px 56px;

  margin-top: 50px;

  background: #d4eb00;
  color: #0b0b0b;

  border-radius: 0;

  font-size: 14px;
  font-weight: 600;

  pointer-events: auto;

  transform: translateY(80px);

  backface-visibility: hidden;

  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

.cta-button:hover {
  background-color: #dcdcdc;
  color: #000000;

  transform: translateY(80px) scale(1.05);
}

.cta-button:active {
  transform: translateY(80px) scale(0.98);
}

/* ---------------------------------------------------------
   SECONDARY CTA
--------------------------------------------------------- */

.cta-button2 {
  position: relative;

  z-index: 50;

  display: inline-block;

  padding: 18px 56px;

  margin-top: 50px;

  background: #d4eb00;
  color: #0b0b0b;

  border-radius: 0;

  font-size: 14px;
  font-weight: 600;

  pointer-events: auto;

  backface-visibility: hidden;

  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

.cta-button2:hover {
  background-color: #dcdcdc;
  color: #000000;

  transform: scale(1.05);
}

.cta-button2:active {
  transform: scale(0.98);
}

/* =========================================================
   SPONSORS
========================================================= */

.sponsors-section {
  position: absolute;

  bottom: 60px;

  width: 100%;

  z-index: 10;
}

.sponsors-container {
  width: 90%;
  max-width: 1200px;

  margin: 0 auto;
}

.sponsors-label {
  margin-bottom: 32px;

  text-align: center;

  font-size: 11px;

  color: #777777;

  text-transform: uppercase;

  letter-spacing: 2px;
}

.sponsors-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 80px;

  width: 100%;
  max-width: 250px;

  margin: 20px auto;
}

.sponsor-logo {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 80px;

  background: transparent;

  border-radius: 4px;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;

  backface-visibility: hidden;
}

.sponsor-logo:hover {
  transform: scale(1.05);
}

.sponsor-logo img {
  width: 180%;
  height: auto;
}

/* =========================================================
   DETAILS SECTION
========================================================= */

.details {
  position: relative;

  width: 100%;
  min-height: 100vh;

  background: #111111;
  color: #ffffff;

  overflow: hidden;

  isolation: isolate;
}

.details-background-image {
  position: absolute;

  width: 100vw;
  height: auto;

  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  object-fit: contain;
  object-position: center bottom;

  z-index: 1;

  pointer-events: none;
  user-select: none;

  display: block;
}

/* .details > svg {
  position: absolute;

  width: 100%;
  height: 100%;
  color: #d4eb00;

  top: 0;
  left: 0;

  z-index: 2;

  pointer-events: none;
} */

/* .details .detail-grid {
  position: absolute;
  z-index: 10;
} */

.detail-grid {
  position: relative;
  z-index: 10;

  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;

  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.detail-grid > div {
  position: relative;

  z-index: 11;
}

/* ---------------------------------------------------------
   DETAIL LABEL
--------------------------------------------------------- */
.detail-label {
  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 6px;

  font-size: 15px;

  font-weight: 700;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}
.detail-label i {
  margin-right: 8px;

  color: #ffffff;
}
/* ---------------------------------------------------------
   DETAIL TEXT
--------------------------------------------------------- */

.detail-text {
  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 20px;

  line-height: 1.4;

  color: #a8a8a8;
}

/* ---------------------------------------------------------
   DETAILS → RSVP BUTTON
--------------------------------------------------------- */

.next-section-btn {
  position: relative;

  z-index: 50;

  grid-column: 1 / -1;

  justify-self: center;

  margin-top: 20px;

  pointer-events: auto;

  cursor: pointer;
}

/* =========================================================
   FORM SECTION
========================================================= */

.form-section {
  background: #0b0b0b;

  color: #ffffff;

  padding: 30px 20px;
}

.form-wrapper {
  width: 100%;
  max-width: 700px;

  max-height: calc(100vh - 60px);

  overflow: visible;
}

/* ---------------------------------------------------------
   FORM TITLE
--------------------------------------------------------- */

.form-title {
  margin-bottom: 28px;

  font-size: 42px;

  color: #ffffff;
}

/* ---------------------------------------------------------
   FORM GROUP
--------------------------------------------------------- */

.form-group {
  margin-bottom: 20px;

  opacity: 0;

  transform: translate3d(0, 30px, 0);
}

/* ---------------------------------------------------------
   FORM LABEL
--------------------------------------------------------- */
.name-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.form-label {
  display: block;

  margin-bottom: 6px;

  font-size: 11px;

  font-weight: 700;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}

/* ---------------------------------------------------------
   FORM INPUT
--------------------------------------------------------- */

.form-input {
  width: 100%;

  padding: 10px 10px;

  border: none;

  border-bottom: 2px solid #2a2a2a;

  background: transparent;

  font-family: inherit;

  font-size: 16px;

  color: #ffffff;

  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;

  border-bottom-color: #ffffff;
}

.form-input::placeholder {
  color: #666666;
}

.form-input,
select.form-input,
textarea.form-input {
  width: 100%;
  box-sizing: border-box;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;

  padding: 10px 32px 10px 0;

  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 6px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

select.form-input option {
  background: #111111;
  color: #ffffff;
}

@media (max-width: 600px) {
  .name-wrapper {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---------------------------------------------------------
   CONFIRM BUTTON
--------------------------------------------------------- */

.confirm-btn {
  width: 100%;

  padding: 20px;

  margin-top: 12px;

  background: #d4eb00;

  color: #0b0b0b;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

.confirm-btn:hover {
  background: #dcdcdc;

  color: #000000;

  transform: scale(1.02);
}

.confirm-btn:active {
  transform: scale(0.98);
}

.confirm-btn:disabled {
  opacity: 0.6;

  cursor: not-allowed;

  transform: none;
}

/* =========================================================
   SUCCESS SECTION
========================================================= */

.success-section {
  position: relative;

  width: 100%;
  height: 100vh;

  min-height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #000000;

  color: #ffffff;
}

.success-content {
  position: relative;

  z-index: 20;

  width: 100%;

  text-align: center;

  opacity: 1;

  visibility: visible;
}

/* ---------------------------------------------------------
   SUCCESS ICON
--------------------------------------------------------- */

.success-icon {
  position: relative;

  z-index: 21;

  margin-bottom: 32px;

  font-size: 140px;

  line-height: 1;

  color: #ffffff;
}

/* ---------------------------------------------------------
   SUCCESS TITLE
--------------------------------------------------------- */

.success-title {
  position: relative;

  z-index: 21;

  margin-bottom: 24px;

  font-size: 64px;

  font-weight: 700;

  letter-spacing: -1px;

  color: #ffffff;
}

/* ---------------------------------------------------------
   SUCCESS TEXT
--------------------------------------------------------- */

.success-text {
  position: relative;

  z-index: 21;

  margin-bottom: 56px;

  font-size: 20px;

  line-height: 1.6;

  color: #999999;
}

.success-content .cta-button {
  position: relative;

  z-index: 21;
}

/* =========================================================
   ANIMATION STATES
========================================================= */

[data-reveal],
[data-reveal-left],
[data-reveal-right],
[data-reveal-sponsor],
.form-group {
  will-change: transform, opacity;
}

/* ---------------------------------------------------------
   HERO REVEAL
--------------------------------------------------------- */

[data-reveal] {
  opacity: 0;

  transform: translate3d(0, 30px, 0);
}

/* ---------------------------------------------------------
   DETAILS — LEFT
--------------------------------------------------------- */

[data-reveal-left] {
  opacity: 0;

  transform: translate3d(-50px, 0, 0);
}

/* ---------------------------------------------------------
   DETAILS — RIGHT
--------------------------------------------------------- */

[data-reveal-right] {
  opacity: 0;

  transform: translate3d(50px, 0, 0);
}

/* ---------------------------------------------------------
   SPONSOR REVEAL
--------------------------------------------------------- */

[data-reveal-sponsor] {
  opacity: 0;

  transform: scale(0.8);
}

/* =========================================================
   SVG OVERLAYS
========================================================= */

section > svg {
  pointer-events: none;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ffffff;

  outline-offset: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   RESPONSIVE — TABLET / MOBILE
========================================================= */

@media (max-width: 768px) {
  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero h1 {
    font-size: 48px;
  }

  .hero-subtitle strong {
    font-size: 28px;
  }

  .hero-background-image {
    width: 500px;

    max-width: 80vw;

    right: -10%;

    opacity: 0.85;
  }

  /* -------------------------------------------------------
     SPONSORS
  ------------------------------------------------------- */

  .sponsors-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
  }

  /* -------------------------------------------------------
     DETAILS
  ------------------------------------------------------- */

  .detail-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  /* -------------------------------------------------------
     FORM
  ------------------------------------------------------- */

  .form-section {
    align-items: flex-start;

    padding: 24px 20px;
  }

  .form-wrapper {
    padding-top: 10px;
  }

  .form-title {
    margin-bottom: 24px;

    font-size: 32px;

    line-height: 1.1;
  }

  .form-group {
    margin-bottom: 18px;
  }

  .form-input {
    padding: 9px 0;
  }

  .confirm-btn {
    padding: 16px;

    margin-top: 8px;
  }

  /* -------------------------------------------------------
     SUCCESS
  ------------------------------------------------------- */

  .success-title {
    font-size: 42px;
  }
}

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

@media (max-width: 480px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 18px;
  }

  .hero-subtitle strong {
    font-size: 24px;
  }

  .hero-background-image {
    right: -25%;

    max-width: 100vw;

    opacity: 0.7;
  }

  .cta-button,
  .cta-button2 {
    padding: 16px 36px;

    font-size: 12px;
  }

  .detail-grid {
    gap: 30px;
  }

  .detail-text {
    font-size: 18px;
  }

  .success-icon {
    font-size: 100px;
  }

  .success-title {
    font-size: 36px;
  }

  .success-text {
    font-size: 17px;

    margin-bottom: 40px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   481px → 768px
========================================================= */

@media (max-width: 768px) {
  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  section {
    padding: 40px 20px;
  }

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding: 30px 20px;
  }

  .hero-content {
    width: 100%;
    max-width: 600px;

    margin-bottom: 40px;

    transform: translateY(-10px);
  }

  .hero h1 {
    font-size: clamp(42px, 9vw, 52px);

    letter-spacing: -1.5px;
  }

  .hero-subtitle {
    font-size: 11px;
  }

  .hero-subtitle strong {
    font-size: clamp(24px, 6vw, 30px);

    letter-spacing: 0.5px;
  }

  .hero p {
    font-size: 18px;

    line-height: 1.45;
  }

  .hero-background-image {
    width: 100%;
    height: 100%;

    left: 50%;
    right: auto;
    bottom: 0;

    transform: translateX(-50%);

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    opacity: 0.8;
  }

  /* -------------------------------------------------------
     BUTTONS
  ------------------------------------------------------- */

  .cta-button,
  .cta-button2 {
    padding: 16px 38px;

    font-size: 12px;

    letter-spacing: 1.2px;
  }

  .cta-button {
    margin-top: 35px;
  }

  .cta-button2 {
    margin-top: 25px;
  }

  /* -------------------------------------------------------
     SPONSORS
  ------------------------------------------------------- */

  .sponsors-section {
    bottom: 30px;
  }

  .sponsors-label {
    margin-bottom: 20px;

    font-size: 10px;
  }

  .sponsors-grid {
    width: 100%;
    max-width: 220px;

    gap: 25px;
  }

  .sponsor-logo {
    height: 60px;
  }

  .sponsor-logo img {
    width: 100%;
  }

  /* -------------------------------------------------------
     DETAILS
  ------------------------------------------------------- */

  .details {
    padding: 40px 20px;
  }

  .details-background-image {
    width: 100%;
    height: 100%;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    object-fit: contain;
    object-position: center bottom;

    opacity: 0.7;
  }

  .detail-grid {
    grid-template-columns: 1fr;

    width: 100%;
    max-width: 550px;

    gap: 30px;
  }

  .detail-grid > div {
    width: 100%;
  }

  .detail-label {
    font-size: 13px;

    letter-spacing: 1.2px;
  }

  .detail-text {
    font-size: 18px;

    line-height: 1.35;
  }

  .next-section-btn {
    grid-column: 1;

    margin-top: 5px;
  }

  /* -------------------------------------------------------
     FORM
  ------------------------------------------------------- */

  .form-section {
    align-items: flex-start;

    padding: 30px 20px;
  }

  .form-wrapper {
    width: 100%;
    max-width: 600px;

    padding-top: 10px;
  }

  .form-title {
    margin-bottom: 24px;

    font-size: 32px;

    line-height: 1.1;
  }

  .form-group {
    margin-bottom: 18px;
  }

  .form-label {
    font-size: 10px;
  }

  .form-input {
    padding: 9px 0;

    font-size: 15px;
  }

  textarea.form-input {
    min-height: 65px;

    padding-top: 10px;
  }

  .confirm-btn {
    padding: 16px;

    margin-top: 8px;

    font-size: 12px;
  }

  /* -------------------------------------------------------
     SUCCESS
  ------------------------------------------------------- */

  .success-content {
    padding: 0 20px;
  }

  .success-icon {
    font-size: 100px;

    margin-bottom: 25px;
  }

  .success-title {
    font-size: 42px;

    line-height: 1.1;
  }

  .success-text {
    font-size: 18px;

    margin-bottom: 40px;
  }
}

/* =========================================================
   SMALL MOBILE
   321px → 480px
========================================================= */

@media (max-width: 480px) {
  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  section {
    padding: 30px 16px;
  }

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding: 25px 16px;
  }

  .hero-content {
    margin-bottom: 25px;
  }

  .hero h1 {
    font-size: clamp(34px, 11vw, 42px);

    letter-spacing: -1px;

    margin-bottom: 10px;
  }

  .hero-subtitle {
    font-size: 10px;
  }

  .hero-subtitle strong {
    font-size: clamp(21px, 7vw, 25px);
  }

  .hero p {
    font-size: 16px;

    line-height: 1.4;
  }

  .hero-background-image {
    width: 115%;
    height: 100%;

    left: 50%;
    right: auto;

    transform: translateX(-50%);

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    opacity: 0.7;
  }

  /* -------------------------------------------------------
     BUTTONS
  ------------------------------------------------------- */

  .cta-button,
  .cta-button2 {
    padding: 14px 30px;

    font-size: 11px;

    letter-spacing: 1px;
  }

  .cta-button {
    margin-top: 25px;
  }

  .cta-button2 {
    margin-top: 20px;
  }

  /* -------------------------------------------------------
     SPONSORS
  ------------------------------------------------------- */

  .sponsors-section {
    bottom: 20px;
  }

  .sponsors-label {
    margin-bottom: 12px;

    font-size: 9px;
  }

  .sponsors-grid {
    max-width: 190px;

    gap: 15px;
  }

  .sponsor-logo {
    height: 45px;
  }

  /* -------------------------------------------------------
     DETAILS
  ------------------------------------------------------- */

  .details {
    padding: 25px 16px;
  }

  .details-background-image {
    width: 120%;
    height: 100%;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    object-fit: contain;
    object-position: center bottom;

    opacity: 0.6;
  }

  .detail-grid {
    width: 100%;

    gap: 24px;
  }

  .detail-label {
    font-size: 11px;

    letter-spacing: 1px;

    margin-bottom: 4px;
  }

  .detail-label i {
    margin-right: 5px;
  }

  .detail-text {
    font-size: 16px;

    line-height: 1.3;
  }

  .next-section-btn {
    margin-top: 5px;
  }

  /* -------------------------------------------------------
     FORM
  ------------------------------------------------------- */

  .form-section {
    padding: 24px 16px;
  }

  .form-wrapper {
    padding-top: 5px;
  }

  .form-title {
    margin-bottom: 20px;

    font-size: 28px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-label {
    margin-bottom: 5px;

    font-size: 9px;
  }

  .form-input {
    padding: 7px 0;

    font-size: 14px;
  }

  textarea.form-input {
    min-height: 55px;

    padding-top: 8px;
  }

  .confirm-btn {
    padding: 14px;

    margin-top: 5px;

    font-size: 11px;
  }

  /* -------------------------------------------------------
     SUCCESS
  ------------------------------------------------------- */

  .success-content {
    padding: 0 16px;
  }

  .success-icon {
    font-size: 80px;

    margin-bottom: 20px;
  }

  .success-title {
    font-size: 32px;

    line-height: 1.1;

    margin-bottom: 18px;
  }

  .success-text {
    font-size: 16px;

    line-height: 1.45;

    margin-bottom: 30px;
  }
}

/* =========================================================
   VERY SMALL PHONES
   320px and below
========================================================= */

@media (max-width: 320px) {
  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero h1 {
    font-size: 32px;
  }

  .hero-subtitle strong {
    font-size: 20px;
  }

  .hero p {
    font-size: 14px;
  }

  /* -------------------------------------------------------
     BUTTONS
  ------------------------------------------------------- */

  .cta-button,
  .cta-button2 {
    padding: 13px 24px;

    font-size: 10px;
  }

  /* -------------------------------------------------------
     DETAILS
  ------------------------------------------------------- */

  .details-background-image {
    width: 130%;

    opacity: 0.5;
  }

  .detail-grid {
    gap: 20px;
  }

  .detail-label {
    font-size: 10px;
  }

  .detail-text {
    font-size: 14px;
  }

  /* -------------------------------------------------------
     FORM
  ------------------------------------------------------- */

  .form-title {
    font-size: 25px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-input {
    font-size: 13px;
  }

  textarea.form-input {
    min-height: 48px;
  }

  .confirm-btn {
    padding: 12px;

    font-size: 10px;
  }

  /* -------------------------------------------------------
     SUCCESS
  ------------------------------------------------------- */

  .success-icon {
    font-size: 65px;
  }

  .success-title {
    font-size: 28px;
  }

  .success-text {
    font-size: 14px;
  }
}