/* ===== Base (mobile-first) ===== */
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  font-family: "Sansation", sans-serif;
}

/* Fullscreen video (keep your existing video HTML) */
.video-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* video layer */
}



/* Center the heading block */
.container {
  position: relative;
  z-index: 1;             /* above video/overlay */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; /* centers the h1 block */
  text-align: center;
  padding: 0 16px;         /* mobile side padding */
}

/* Typing headline */
.container h1 {
  display: inline-block;   /* shrink-wrap to content */
  text-align: left;        /* typing starts at left edge */
  white-space: nowrap;
  color: white;
  font-weight: 400;
  /* fluid base + caps via media queries */
  font-size: clamp(28px, 8vw, 40px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0;
}

/* Spans */
.left, .right, .cursor {
  display: inline-block;
  vertical-align: middle;
}

/* Divider that appears when you add .center-line to .right in JS */
.right.center-line {
  border-left: 2px solid white;

}

/* Caret (cursor is LAST in HTML so it sits after text) */
.cursor {
  width: 2px;
  height: 1em;
  margin-right: 8px;
  background: white;
  animation: blink 0.7s steps(1) infinite; /* snappier blink */
}
@keyframes blink { 50% { opacity: 0; } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ===== Breakpoints ===== */

/* ≥ 480px (large phones / small tablets) */
@media (min-width: 480px) {
  .container { padding: 0 24px; }
  .container h1 { font-size: 44px; }
  .right.center-line {  }
}

/* ≥ 768px (tablets) */
@media (min-width: 768px) {
  .container h1 { font-size: 56px; letter-spacing: 0.01em; }
  .right.center-line {  }
}

/* ≥ 1024px (desktops) */
@media (min-width: 1024px) {
  .container { padding: 0 40px; }
  .container h1 { font-size: 72px; }
  .right.center-line {  }
}

/* ≥ 1440px (large desktops / 2K+) */
@media (min-width: 1440px) {
  .container h1 { font-size: 84px; }
  .right.center-line {   }
}

/* ≥ 1920px (1080p wide monitors) */
@media (min-width: 1920px) {
  .container h1 { font-size: 96px; }
}