/* =========================================
   SATHYABAMA STARTUP FEST
   INTRO / ENTRANCE ANIMATION
   ========================================= */

/* Intro Overlay */
#intro-overlay {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  background: #020617;

  z-index: 99999;

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

  overflow: hidden;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Fade Out */
#intro-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Branding Container */
#branding-container {
  display: flex;
  flex-direction: column;

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

  text-align: center;

  padding: 2rem;

  max-width: 92%;

  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Branding Visible State */
#branding-container.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   BRAND TITLE
   ========================================= */

.brand-title {
  font-size: clamp(3.2rem, 9vw, 7rem);

  font-weight: 800;

  letter-spacing: 0.08em;

  color: #ffffff;

  line-height: 1.15;

  margin: 0;

  text-transform: none;

  background:
    linear-gradient(
      135deg,
      #ffffff 25%,
      #e2e8f0 65%,
      #94a3b8 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}


/* =========================================
   SUBTITLE
   ========================================= */

.brand-subtitle {
  margin: 0.8rem 0 0;

  font-family: "Inter", sans-serif;

  font-size: clamp(1rem, 2.5vw, 1.8rem);

  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: none;

  color: rgba(226, 232, 240, 0.9);
}


/* =========================================
   PROGRESS BAR CONTAINER
   ========================================= */

#progress-container {
  width: clamp(220px, 42vw, 380px);

  height: 3px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 999px;

  margin-top: 2.4rem;

  overflow: hidden;

  position: relative;

  opacity: 1;
}


/* =========================================
   PROGRESS BAR
   ========================================= */

#progress-bar {
  height: 100%;

  width: 0%;

  background:
    linear-gradient(
      90deg,
      #2563eb 0%,
      #06b6d4 50%,
      #7c3aed 100%
    );

  box-shadow:
    0 0 12px rgba(6, 182, 212, 0.9),
    0 0 24px rgba(124, 58, 237, 0.6);

  border-radius: 999px;

  transition: width 0.05s linear;
}


/* =========================================
   PREVENT SCROLLING DURING INTRO
   ========================================= */

body.intro-active {
  overflow: hidden !important;

  height: 100vh !important;
  height: 100dvh !important;

  touch-action: none !important;
}


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

@media (max-width: 768px) {

  #branding-container {
    padding: 1.5rem;
    max-width: 95%;
  }

  .brand-title {
    font-size: clamp(2.5rem, 12vw, 5rem);
    letter-spacing: 0.05em;
  }

  .brand-subtitle {
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    letter-spacing: 0.12em;
  }

  #progress-container {
    width: min(75vw, 320px);
    margin-top: 2rem;
  }
}


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

@media (max-width: 480px) {

  #branding-container {
    padding: 1rem;
  }

  .brand-title {
    font-size: clamp(2rem, 13vw, 3.5rem);
  }

  .brand-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  #progress-container {
    width: 70vw;
    height: 3px;
    margin-top: 1.6rem;
  }
}


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

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

  #intro-overlay,
  #branding-container {
    transition: none !important;
  }

  #branding-container {
    opacity: 1;
    transform: none;
  }
}