/* ========== Base ========== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #fff;
}

/* keep page black until we reveal (JS will remove .preload) */
body.preload {
  background: #000;
  overflow: hidden;
}

/* ========== Frosted-glass NAV ========== */
.glass-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 50;
  opacity: 0;                     /* revealed later by .reveal */
  transform: translateY(-8px);
  transition: opacity .8s ease, transform .6s ease;

  /* very dark, almost black indigo + frosted glass */
  background: rgba(10, 10, 28, 0.72);
  backdrop-filter: blur(14px) saturate(120%) brightness(85%);
  -webkit-backdrop-filter: blur(14px) saturate(120%) brightness(85%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.glass-nav.reveal { opacity: 1; transform: translateY(0); }
/* Ensure the NAV brand on the intro page matches the site-wide brand */
.glass-nav .navbar-brand{
  color:#fff;
  text-transform: uppercase;
  letter-spacing:.5px;
  font-weight: 800 !important;   /* beat any Bootstrap utility classes */
  font-size: 22px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.glass-nav .nav-link { color:#fff; }



.glass-nav.reveal { opacity: 1; transform: translateY(0); }

.glass-nav .brand {
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 22px;
  text-transform: uppercase;
}

/* ========== Background videos (two stacked for cross-fade) ========== */
.bgVid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                    /* start hidden */
  transition: opacity .8s ease;
  z-index: 1;                    /* behind text/buttons, above black */
}
.bgVid.visible { opacity: 1; }

/* ========== Bottom-left hero sentence ========== */
.hero-bl {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  line-height: 0.95;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 6vw, 72px);
  letter-spacing: 1px;
  pointer-events: none;
  color: #ffffff;                 /* ADD: force bright white */
  mix-blend-mode: normal;         /* ADD: avoid blending/dimming on video */
  text-shadow: 0 2px 12px rgba(0,0,0,0.45); /* ADD: subtle lift over video */
}


/* Staggered words */
.fade-seq {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity 1.8s ease, filter 1.8s ease, transform 1.8s ease;
  color: #ffffff;                /* ADD: ensure white during/after fade */
}
.fade-seq.show {
  opacity: 1 !important;         /* ADD: guarantee no residual dimming */
  filter: blur(0);
  transform: translateY(0);
}


/* ========== Bottom-right language buttons ========== */
.lang-group {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  z-index: 4;
  opacity: 0;                    /* reveal later with 'reveal' */
  transform: translateY(8px);
  transition: opacity 1s ease 3s, transform .8s ease 3s;
}
.lang-group.reveal { opacity: 1; transform: translateY(0); }

.lang-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 14px 22px;            /* bigger */
  font-size: 1.05rem;            /* bigger label */
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;              /* bolder */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.lang-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  background: rgba(0,102,255,0.38);
  border-color: rgba(0,102,255,0.62);
}


/* ========== Reveal helper for other elements ========== */
.rest { opacity: 0; transition: opacity 1s ease, transform .8s ease; } /* REMOVED 3s */
.rest.reveal { opacity: 1; transform: none; }

/* On very small heights, give the text some breathing room */
@media (max-height: 550px) {
  .hero-bl { font-size: clamp(24px, 5.2vw, 54px); left: 16px; bottom: 16px; }
  .lang-group { right: 16px; bottom: 16px; }
}

.hero-bl .line1 { 
  display: block;
  margin-bottom: 0.3em;  /* pushes it higher relative to line2 */
}
.hero-bl .line2 {
  display: block;
}