/* =========================================================
   INDISCAPES EXPO
   COMING SOON PAGE
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {
  --gold: #d9b45a;
  --gold-light: #e5c778;

  --white: #ffffff;

  --text-soft: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.62);

  --dark-blue: #03101f;
}


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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  overflow-x: hidden;
}

body {
  background: #020b15;
}


/* =========================================================
   FULL SCREEN
   ========================================================= */

.screen {
  position: relative;

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  isolation: isolate;

  color: var(--white);
}


/* =========================================================
   BACKGROUND VIDEO
   ========================================================= */

.backdrop-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  z-index: -3;

  pointer-events: none;
}


/* =========================================================
   VIDEO OVERLAY
   ========================================================= */


.video-overlay {
  position: absolute;
  inset: 0;

  z-index: -2;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(3, 12, 25, 0.28) 0%,
    rgba(3, 12, 25, 0.22) 45%,
    rgba(3, 12, 25, 0.40) 100%
  );
}

/* =========================================================
   MAIN BODY
   ========================================================= */

.screen-body {

  width: 100%;

  min-height: 100svh;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    clamp(30px, 5vh, 60px)
    clamp(16px, 4vw, 60px);
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-wrap {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  text-align: center;
}


/* =========================================================
   LOGO
   ========================================================= */

.expo-logo {

  display: block;

  width: 300px;

  max-width: 65vw;

  height: auto;

  margin: 0 auto 25px;

  object-fit: contain;
}


/* =========================================================
   COMING SOON
   ========================================================= */

.coming-soon {

  margin: 0 0 14px;

  color: var(--white);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(20px, 2.4vw, 32px);

  line-height: 1.1;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


/* =========================================================
   MAIN HEADLINE
   ========================================================= */

.headline {

  margin: 0 0 22px;

  color: var(--gold);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(
      34px,
      5.5vw,
      68px
    );

  line-height: 1.02;

  font-weight: 700;

  letter-spacing: -0.035em;

  text-wrap: balance;

  text-shadow:
    0 2px 15px rgba(0, 0, 0, 0.30);
}


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

.intro-text {

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  color: var(--text-soft);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(
      15px,
      1.5vw,
      20px
    );

  line-height: 1.55;

  font-weight: 400;

  text-wrap: balance;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   EVENT DETAILS
   ========================================================= */

.event-details {

  width: 100%;

  max-width: 760px;

  margin:
    clamp(28px, 4vw, 42px)
    auto
    clamp(24px, 3vw, 35px);

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  background: transparent;

  text-align: left;
}


/* =========================================================
   EVENT ITEM
   ========================================================= */

.event-detail {

  flex: 1 1 0;

  min-width: 0;

  display: flex;

  align-items: center;

  gap:
    clamp(10px, 1.5vw, 18px);
}


/* =========================================================
   EVENT ICON
   ========================================================= */

.detail-icon {

  width:
    clamp(40px, 4vw, 50px);

  height:
    clamp(40px, 4vw, 50px);

  flex:
    0 0 clamp(40px, 4vw, 50px);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--gold);

  border:
    1px solid rgba(217, 180, 90, 0.70);

  background:
    rgba(3, 15, 28, 0.16);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  box-sizing: border-box;
}


.detail-icon svg {

  width: 21px;

  height: 21px;

  max-width: 70%;

  max-height: 70%;
}


/* =========================================================
   EVENT CONTENT
   ========================================================= */

.detail-content {

  min-width: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


/* =========================================================
   LABEL
   ========================================================= */

.detail-label {

  display: block;

  margin-bottom: 5px;

  color: var(--gold-light);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(9px, 1vw, 11px);

  line-height: 1;

  font-weight: 700;

  letter-spacing:
    clamp(1.5px, 0.25vw, 3px);

  text-transform: uppercase;
}


/* =========================================================
   EVENT MAIN TEXT
   ========================================================= */

.detail-content strong {

  display: block;

  max-width: 100%;

  color: var(--white);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(16px, 2vw, 23px);

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -0.2px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   EVENT SUBTEXT
   ========================================================= */

.detail-content small {

  display: block;

  margin-top: 5px;

  color: var(--text-muted);

  font-family: Arial, Helvetica, sans-serif;

  font-size:
    clamp(10px, 1.2vw, 13px);

  line-height: 1.2;

  font-weight: 400;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   EVENT DIVIDER
   ========================================================= */

.detail-divider {

  flex: 0 0 1px;

  width: 1px;

  height: 58px;

  margin-left:
    clamp(20px, 5vw, 55px);

  margin-right:
    clamp(20px, 5vw, 55px);

  background: linear-gradient(
    to bottom,

    transparent 0%,

    rgba(217, 180, 90, 0.70) 50%,

    transparent 100%
  );
}


/* =========================================================
   NOTIFY WRAPPER
   ========================================================= */

.notify-wrap {

  width: 100%;

  max-width: 720px;

  margin: 0 auto;
}


/* =========================================================
   NOTIFY FORM
   ========================================================= */

.notify {

  width: 100%;

  display: flex;

  align-items: stretch;

  justify-content: center;

  gap: 10px;

  box-sizing: border-box;
}


/* =========================================================
   FORM FIELD
   ========================================================= */

.notify .form-field {

  flex: 1 1 auto;

  min-width: 0;

  margin: 0;
}


/* =========================================================
   INPUT
   ========================================================= */

.notify .form-control {

  width: 100%;

  height: 54px;

  box-sizing: border-box;

  padding:
    0 18px;

  border:
    1px solid rgba(255, 255, 255, 0.35);

  border-radius: 0;

  outline: none;

  background:
    rgba(3, 15, 28, 0.30);

  color: var(--white);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);
}


.notify .form-control::placeholder {

  color:
    rgba(255, 255, 255, 0.60);
}


.notify .form-control:focus {

  border-color:
    rgba(217, 180, 90, 0.85);

  box-shadow:
    0 0 0 2px rgba(217, 180, 90, 0.12);

  background:
    rgba(3, 15, 28, 0.40);
}


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

.notify .btn-solid {

  flex: 0 0 auto;

  height: 54px;

  min-height: 54px;

  padding:
    0 30px;

  border: 1px solid var(--gold);

  border-radius: 0;

  background:
    var(--gold);

  color:
    #101010;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.02em;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.notify .btn-solid:hover {

  background:
    var(--gold-light);

  color:
    #050505;

  transform:
    translateY(-1px);
}


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

.privacy-text {

  margin:
    12px 0 0;

  color:
    rgba(255, 255, 255, 0.55);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;

  line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .screen-body {

    padding:
      35px 25px;
  }


  .expo-logo {

    width: 250px;

    margin-bottom: 22px;
  }


  .headline {

    font-size:
      clamp(34px, 7vw, 56px);
  }


  .intro-text {

    max-width: 680px;

    font-size: 16px;
  }


  .event-details {

    max-width: 680px;
  }


  .detail-divider {

    margin-left: 25px;

    margin-right: 25px;
  }


  .notify-wrap {

    max-width: 680px;
  }

}


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

@media (max-width: 600px) {

  .screen {

    min-height: 100svh;

    overflow-y: auto;
  }


  .screen-body {

    min-height: 100svh;

    padding:
      25px 16px 30px;
  }


  .content-wrap {

    max-width: 100%;
  }


  /* Logo */

  .expo-logo {

    width: 205px;

    max-width: 60vw;

    margin:
      0 auto 18px;
  }


  /* Coming soon */

  .coming-soon {

    font-size: 19px;

    letter-spacing: 0.03em;

    margin-bottom: 10px;
  }


  /* Headline */

  .headline {

    font-size:
      clamp(30px, 9vw, 43px);

    line-height: 1.04;

    letter-spacing: -0.025em;

    margin-bottom: 17px;
  }


  /* Description */

  .intro-text {

    padding: 0 4px;

    font-size: 14px;

    line-height: 1.5;
  }


  /* Event information */

  .event-details {

    width: 100%;

    margin:
      25px auto 23px;

    padding: 0;

    align-items: center;
  }


  .event-detail {

    gap: 9px;
  }


  /* Icons */

  .detail-icon {

    width: 37px;

    height: 37px;

    flex:
      0 0 37px;
  }


  .detail-icon svg {

    width: 17px;

    height: 17px;
  }


  /* Labels */

  .detail-label {

    font-size: 8px;

    letter-spacing: 1.5px;

    margin-bottom: 4px;
  }


  /* Main event text */

  .detail-content strong {

    font-size: 14px;

    line-height: 1.15;
  }


  /* Sub text */

  .detail-content small {

    font-size: 9px;

    margin-top: 4px;
  }


  /* Divider */

  .detail-divider {

    height: 45px;

    margin-left: 12px;

    margin-right: 12px;
  }


  /* Form */

  .notify {

    flex-direction: column;

    width: 100%;

    gap: 9px;
  }


  .notify .form-field {

    width: 100%;

    flex: none;
  }


  .notify .form-control {

    width: 100%;

    height: 50px;

    font-size: 15px;
  }


  .notify .btn-solid {

    width: 100%;

    height: 50px;

    min-height: 50px;

    padding:
      0 20px;
  }


  /* Bottom text */

  .privacy-text {

    font-size: 10px;

    padding:
      0 10px;

    margin-top: 11px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .screen-body {

    padding:
      20px 12px 25px;
  }


  .expo-logo {

    width: 175px;

    margin-bottom: 15px;
  }


  .coming-soon {

    font-size: 17px;

    margin-bottom: 8px;
  }


  .headline {

    font-size: 27px;

    margin-bottom: 14px;
  }


  .intro-text {

    font-size: 13px;

    line-height: 1.45;
  }


  .event-details {

    margin-top: 21px;

    margin-bottom: 20px;
  }


  .detail-icon {

    width: 32px;

    height: 32px;

    flex-basis: 32px;
  }


  .detail-icon svg {

    width: 15px;

    height: 15px;
  }


  .detail-label {

    font-size: 7px;

    letter-spacing: 1px;
  }


  .detail-content strong {

    font-size: 12px;
  }


  .detail-content small {

    font-size: 8px;
  }


  .detail-divider {

    height: 40px;

    margin-left: 8px;

    margin-right: 8px;
  }


  .notify .form-control,
  .notify .btn-solid {

    height: 47px;

    min-height: 47px;
  }

}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (max-height: 600px) and (orientation: landscape) {

  .screen {

    overflow-y: auto;
  }


  .screen-body {

    min-height: auto;

    padding:
      15px 25px 20px;
  }


  .expo-logo {

    width: 130px;

    margin-bottom: 10px;
  }


  .coming-soon {

    font-size: 16px;

    margin-bottom: 7px;
  }


  .headline {

    font-size: 30px;

    margin-bottom: 9px;
  }


  .intro-text {

    font-size: 12px;

    line-height: 1.3;
  }


  .event-details {

    margin:
      15px auto;
  }


  .detail-icon {

    width: 32px;

    height: 32px;

    flex-basis: 32px;
  }


  .detail-content strong {

    font-size: 13px;
  }


  .detail-content small {

    font-size: 8px;
  }


  .detail-divider {

    height: 38px;
  }


  .notify .form-control,
  .notify .btn-solid {

    height: 42px;

    min-height: 42px;
  }


  .privacy-text {

    margin-top: 7px;
  }

}



/* =========================================================
   NOTIFY FORM
   ========================================================= */

.notify-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.notify {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.notify .form-field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.notify .form-control {
  width: 100%;
  height: 56px;

  padding: 0 18px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;

  background: rgba(3, 15, 28, 0.55);

  color: #fff;

  font-size: 16px;

  outline: none;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.notify .form-control::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.notify .form-control:focus {
  border-color: #d9b45a;

  background: rgba(3, 15, 28, 0.70);

  box-shadow:
    0 0 0 2px rgba(217, 180, 90, 0.15);
}


/* BUTTON */

.notify .btn-solid {
  height: 56px;

  padding: 0 32px;

  border: 1px solid #d9b45a;
  border-radius: 0;

  background: #d9b45a;

  color: #111;

  font-size: 16px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    all 0.25s ease;
}

.notify .btn-solid:hover {
  background: #e5c778;

  border-color: #e5c778;

  transform: translateY(-1px);
}

.notify .btn-solid:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


/* MESSAGE */

.form-message {
  min-height: 24px;

  margin-top: 12px;

  font-size: 13px;

  text-align: center;
}

.form-message.success {
  color: #d9b45a;
}

.form-message.error {
  color: #ffb4b4;
}


/* INVALID INPUT */

.notify .form-control.input-error {
  border-color: #ff6b6b;
}


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

@media (max-width: 600px) {

  .notify {
    flex-direction: column;
    gap: 10px;
  }

  .notify .form-control {
    height: 52px;
    font-size: 15px;
  }

  .notify .btn-solid {
    width: 100%;
    height: 52px;
    font-size: 15px;
  }

}