/* ─── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Root / Tokens ──────────────────────────────────────────── */
:root {
  --blue: #004AAD;
  --blue-mid: #1754C9;
  --lavender: #D8C9F0;
  --lavender-bright: #E8DAFF;
  --white: #FFFFFF;
}

/* ─── Base ───────────────────────────────────────────────────── */
html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--blue);
  color: var(--white);
  overflow: hidden;
  /* Single-screen, no scroll */
}

/* ─── Full-screen wrapper ─────────────────────────────────────── */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ─── Background ──────────────────────────────────────────────── */
.bg {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* Use a fixed width that is always wider than viewport */
  width: max(100vw, 177.78vh);
  /* 16:9 min width */
  height: 100vh;
  background-image: url('bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  animation:
    bgReveal 1.8s ease both,
    bgDrift 25s 1.8s ease-in-out infinite;
}

@keyframes bgReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(1.12);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes bgDrift {
  0% {
    transform: translateX(-50%) scale(1.06) translate(0, 0);
  }

  33% {
    transform: translateX(-50%) scale(1.09) translate(-1vw, 1vh);
  }

  66% {
    transform: translateX(-50%) scale(1.07) translate(1vw, 1.5vh);
  }

  100% {
    transform: translateX(-50%) scale(1.06) translate(0, 0);
  }
}

/* ─── Header ──────────────────────────────────────────────────── */
.header {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(1.2rem, 3.5vh, 2.8rem) 3rem clamp(0.8rem, 2vh, 1.5rem);
  animation: fadeDown 1s 0.3s both;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-group {
  display: flex;
  align-items: center;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  object-fit: contain;
  display: block;
}

/* NMIMS – original colors */
.logo-nmims img {
  height: clamp(44px, 6.5vh, 72px);
}

/* Social Conclave – already white-safe */
.logo-conclave img {
  height: clamp(58px, 8.5vh, 95px);
}

/* Academic Impact – invert to show white on blue */
.logo-academic img {
  height: clamp(64px, 9.5vh, 108px);
  filter: brightness(0) invert(1);
  margin-left: -8px;
}

/* Vertical dividers */
.logo-divider {
  width: 1.5px;
  height: clamp(36px, 5.5vh, 64px);
  background: rgba(255, 255, 255, 0.4);
  margin: 0 clamp(1rem, 2.5vw, 2.4rem);
  flex-shrink: 0;
}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  justify-content: center;
  padding: 0 1.5rem clamp(0.5rem, 2vh, 1.5rem);
  width: 100%;
}

/* ─── COMING / SOON block ────────────────────────────────────── */
.title-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(0.1rem, 3vh, 3rem);
  margin-bottom: clamp(0.2rem, 1vh, 1rem);
  animation: fadeUp 1s 0.5s both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(44px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.display-text {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(15rem, 34vh, 23rem);

  line-height: 0.78;
  color: var(--lavender);
  -webkit-text-stroke: 8px var(--lavender);
  letter-spacing: -0.01em;
  user-select: none;
  text-shadow: 0 0 100px rgba(180, 150, 255, 0.12);
}

/* Basic text above COMING SOON */
.badge-row {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.badge {
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 3.5vh, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  white-space: nowrap;
  display: block;
  animation: fadeUp 1s 0.6s both;
}

/* ─── Subtitle ──────────────────────────────────────────────── */
.subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vh, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: clamp(0.2rem, 1vh, 1rem);
  animation: fadeUp 1s 0.75s both;
}

/* ─── Loading Bar ───────────────────────────────────────────── */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(0.2rem, 1vh, 1rem);
  animation: fadeUp 1s 1s both;
}

.bar-track {
  width: clamp(200px, 26vw, 320px);
  height: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
}

.bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: repeating-linear-gradient(
    -55deg,
    var(--lavender-bright)       0px,
    var(--lavender-bright)       10px,
    rgba(255, 255, 255, 0.55)    10px,
    rgba(255, 255, 255, 0.55)    20px
  );
  background-size: 28px 100%;
  border-radius: 50px;
  animation:
    barLoad 2.6s 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    stripeMove 0.5s linear infinite;
  overflow: hidden;
}

@keyframes barLoad {
  0% {
    width: 0%;
  }

  60% {
    width: 56%;
  }

  85% {
    width: 61%;
  }

  100% {
    width: 63%;
  }
}

.bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: sheen 2.4s 4.4s linear infinite;
}

@keyframes stripeMove {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sheen {
  from { transform: translateX(-200%); }
  to   { transform: translateX(400%); }
}

.loading-label {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.8rem, 1.5vh, 1rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.72);
  animation: pulseText 1.2s infinite alternate ease-in-out;
}

@keyframes pulseText {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* ─── Date Section ──────────────────────────────────────────── */
.date-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: fadeUp 1s 1.2s both;
}

.date-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.date-line {
  width: clamp(28px, 4vw, 54px);
  height: 1.5px;
  background: rgba(255, 255, 255, 0.65);
}

.dates-num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vh, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dates-num .sep {
  font-weight: 400;
  opacity: 0.65;
}

.date-month {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.2rem, 2vh, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.82);
}

/* Footer gap */
.footer-gap {
  height: clamp(3rem, 8vh, 6rem);
  position: relative;
  z-index: 10;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (min-width: 601px) {
  .logo-nmims img    { height: 44px; }
  .logo-conclave img { height: 58px; }
  .logo-academic img { height: 48px; }
  .logo-divider      { height: 38px; margin: 0 1.2rem; }

  .display-text {
    font-size: clamp(7rem, 22vw, 14rem);
    -webkit-text-stroke: 5px var(--lavender);
  }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  html,
  body {
    overflow-y: auto;
  }

  .page {
    height: auto;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bg {
    height: 100%;
    min-height: 100dvh;
    /* Fill full width of mobile screen — the image will show at natural
       aspect ratio across the top, putting the flowers front and center */
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--blue);
  }

  /* Remove the overlay — let the image breathe */
  .bg::after {
    display: none;
  }

  /* ── Header: stack logos vertically on very narrow screens ── */
  .header {
    padding: 1.4rem 1rem 0.8rem;
  }

  .logo-group {
    gap: 0;
  }

  .logo-nmims img {
    height: 28px;
  }

  .logo-conclave img {
    height: 38px;
  }

  .logo-academic img {
    height: 32px;
  }

  .logo-divider {
    height: 26px;
    margin: 0 0.6rem;
  }

  /* ── Hero ── */
  .hero {
    padding: 0 1rem 1rem;
    justify-content: center;
  }

  .title-block {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /* ── COMING / SOON — fill width on mobile ── */
  .display-text {
    font-size: clamp(5.5rem, 22vw, 9rem);
    line-height: 0.82;
    -webkit-text-stroke: 4px var(--lavender);
    letter-spacing: -0.01em;
  }

  /* ── Subtitle ── */
  .subtitle {
    font-size: clamp(0.65rem, 3vw, 0.9rem);
    letter-spacing: 0.12em;
    line-height: 1.7;
    margin-bottom: 0.8rem;
  }

  /* ── Loading bar ── */
  .loading-wrap {
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .bar-track {
    width: clamp(150px, 60vw, 260px);
    height: 7px;
  }

  .loading-label {
    font-size: 0.55rem;
  }

  /* ── Dates ── */
  .date-section {
    margin-bottom: 0.5rem;
  }

  .date-row {
    gap: 0.6rem;
  }

  .date-line {
    width: 20px;
  }

  .dates-num {
    font-size: clamp(1rem, 5vw, 1.6rem);
    gap: 0.3rem;
  }

  .date-month {
    font-size: clamp(0.65rem, 2.5vw, 0.9rem);
    letter-spacing: 0.2em;
  }

  /* ── Footer gap ── */
  .footer-gap {
    height: 1.5rem;
  }
}