@import url('https://use.typekit.net/nrs4smz.css');

#hero-container {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background:#000;
    }
    #bg-video {
      position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
    }
    .content-columns {
      position: relative;
      z-index: 1;
      display: flex;
      width: 90%;
      justify-content: space-between;
      align-items: center;
            gap: 2rem;

    }
    .column {
      opacity: 0;
      transition: opacity 1s ease-in-out;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline; /* Optional: for centering text */
    }
    #left-column{
      width:48%
    }
    #right-column{
      width:48%;
    }
    .column.visible {
      opacity: 1;
    }
    #initial-message {
      color:#fff;
      opacity 0.5s ease-in-out;
      font-family: "futura-pt",sans-serif;
      z-index: 999;
      position:relative;
	   text-align:left;

    }
    #logo-animation {
      width: 100%;
      height: 200px;
    }
    #final-message {
     text-align:left;
     transition: opacity 1s ease-in-out;
     font-family: "futura-pt",sans-serif;
      font-weight:300;
      letter-spacing: 1px;
    }
#message-stack {
  position: relative;
  width: 100%;
  height: 200px; /* same as logo height */
  display: flex;
  align-items: center;
  justify-content: center;
}

#initial-message,
#logo-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: left;
  transition: opacity 0.6s ease-in-out;
}

#logo-animation {
  opacity: 0;
  pointer-events: none;
}

#logo-animation.visible {
  opacity: 1;
  pointer-events: auto;
}

#initial-message.hidden {
  opacity: 0;
  pointer-events: none;
}

 @media (max-width: 767px) {
  /* Make the entire content stack centered */
  .content-columns {
    flex-direction: column;
    justify-content: center; /* vertical centering */
    align-items: center;     /* horizontal centering */
    text-align: center;
    min-height: 100dvh;      /* handles dynamic viewport height on iOS */
/*     padding: 2rem 1rem; */
    gap: 0rem;
  }

  /* Columns */
  #left-column,
  #right-column {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertical centering within the column */
  }

  #left-column {
    z-index: 2;
    margin-top: 0; /* remove previous margin to center vertically */
  }

  #right-column {
    z-index: 1;
  }

  /* Messages */
  #initial-message,
  #final-message {
    opacity: 1;
    position: relative;
    transition: opacity 0.6s ease-in-out;
    font-family: "futura-pt", sans-serif;
    text-align: center;
  }

  #initial-message.hidden,
  #final-message.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
      width: 100%;                /* ← ensure full width for centering */
  display: flex;              /* ← center using flexbox */
  justify-content: center;    /* ← horizontal alignment */
  align-items: center;        /* ← vertical alignment */
  height: 100%;               /* ← match parent height */
  min-height: 150px;          /* fallback height for spacing */
  }

  #final-message.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Logo Animation */
  #logo-animation {
    width: 100%;
    height: 200px;
    z-index: 1;
  }

  #message-stack {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  /* iOS Display Zoom / Safe Area Support */
  @supports (-webkit-touch-callout: none) {
    #hero-container {
      padding-top: env(safe-area-inset-top, 20px);
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }
  }
}