@font-face {
  font-family: "Lab Mono";
  src: url("fonts/LabMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #1e1e1e;
  --ink: #F4F4F4;

  /* set by JS (your existing JS that computes the contain-fit video box) */
  --video-left: 0px;
  --video-top: 0px;
  --video-width: 100vw;
  --video-height: 100vh;

  /* === LOGO LINE (responsive) ===
     Center of logo in the final frame, as a fraction of the video height */
  --logo-y: 0.874;

  /* Fine tune (px): negative moves text UP, positive moves DOWN */
  --logo-line-offset: 0px;

  /* Layout knobs */
  --text-size: 12px;
  --edge-pad: 92px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* derived: y-position of the logo line inside the visible video rectangle */
:root{
  --logo-line-y: calc(var(--video-top) + (var(--video-height) * var(--logo-y)) + var(--logo-line-offset));
}

html, body{
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* VIDEO */
.splash-video{
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;

  display: block;

  object-fit: contain;
  object-position: center;

  background: var(--bg);
  z-index: 0;
}

@supports (height: 100svh) {
  .splash-video{
    height: 100svh;
    max-height: 100svh;
  }
}

.overlay{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Shared text look */
.contact,
.treatment{
  position: fixed;

  font-family: "Lab Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--ink);
  font-weight: 400;
  font-size: var(--text-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;

  opacity: 0;

  /* We align to the logo line by centering the text vertically on that line */
  top: calc(var(--logo-line-y) - var(--safe-bottom));

  /* start slightly lower, then ease up */
  transform: translateY(calc(-50% + 6px));

  transition: opacity 900ms cubic-bezier(.2,.9,.2,1),
              transform 900ms cubic-bezier(.2,.9,.2,1);

  overflow: hidden; /* sweep clipping */
}

/* clickable */
.contact{
  pointer-events: auto;
  text-decoration: none;

  /* left edge INSIDE the visible video */
  left: calc(var(--video-left) + var(--edge-pad) + var(--safe-left));
}

/* bottom-center text, still aligned to logo line */
.treatment{
  left: calc(var(--video-left) + (var(--video-width) / 2));
  transform: translate(-50%, calc(-50% + 6px));
}

/* reveal */
.contact.is-visible{
  opacity: 1;
  transform: translateY(-50%);
}
.treatment.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* subtle sweep */
.contact::after,
.treatment::after{
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 80%;
  height: 220%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(244,244,244,0) 0%,
    rgba(244,244,244,0.14) 48%,
    rgba(244,244,244,0) 100%
  );

  transform: skewX(-18deg) translateX(0);
  opacity: 0;
}

.contact.is-visible::after,
.treatment.is-visible::after{
  opacity: 1;
  animation: sweep 1200ms ease-out 240ms both;
}

@keyframes sweep{
  from { transform: skewX(-18deg) translateX(0); }
  to   { transform: skewX(-18deg) translateX(320%); }
}
.caret{
  position: fixed;
  left: calc(var(--video-left) + var(--edge-pad) + var(--safe-left));
  top: calc(var(--video-top) + var(--edge-pad)); /* top-left inside the video frame */

  width: 2px;
  height: 12pt; /* caret height */
  background: var(--ink);

  opacity: 0;            /* hidden until reveal */
  pointer-events: none;
}

/* show + blink after reveal */
.caret.is-visible{
  opacity: 1;
  animation: caretBlink 1s steps(1, end) infinite;
}

@keyframes caretBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}