/* secret.baribier.com — every value below was measured on frames of
   baribier_loop_v2_web.mp4 (1920x1080) and baribier_loop_916_web.mp4, so the
   UI reads as part of the video rather than something laid on top of it. */

:root {
  --void: #030605;          /* video corners: the page bleeds into this */
  --field: #0b261a;         /* behind the UI zone, under the logo glow */
  --line: #386a55;          /* corner brackets */
  --line-dim: rgba(56, 106, 85, 0.45);
  --hud: #a8b7b1;           /* corner HUD text */
  --ink: #e6f2ea;           /* off-white, a step below the word BARIBIER (#f0f9f4) */
  --accent: #39c07c;        /* subtitle green from the designer's UI cut */
  --glow: rgba(57, 192, 124, 0.55);
  --glow-soft: rgba(57, 192, 124, 0.22);
  --scan: rgba(168, 210, 188, 0.75);  /* the video's full-width glitch lines */

  --W: 100vw;
  --H: 100vh;
  /* the video's HUD is ~18px Cousine Bold tracked 0.24em on a 1920 frame */
  --font: 'Cousine', 'SF Mono', Menlo, Consolas, monospace;
}
@supports (height: 100dvh) { :root { --H: 100dvh; } }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--void); color: var(--ink);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the stage: the video's frame, cover-fitted ───────────────────────── */
.stage {
  position: absolute; left: 50%; top: 50%;
  width: max(var(--W), calc(var(--H) * 16 / 9));
  height: max(var(--H), calc(var(--W) * 9 / 16));
  transform: translate(-50%, -50%);
  container-type: size;
  --ui-top: 73.5%;                      /* BARIBIER spans 60–69% of the frame height */
  /* ~20px on a 1920x1080 frame. Capped by the VISIBLE height, because on an
     ultra-wide screen cover-fit crops the top and bottom of the frame. */
  --u: max(16px, min(1.04cqw, 1.85vh));
}
.stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
  background: var(--void);
}
/* Landscape phones: not enough height under the word, so lift the frame a
   little (the logo's top still clears the screen edge). */
@media (orientation: landscape) and (max-height: 520px) {
  .stage { transform: translate(-50%, -65%); }
  .ui .auth { gap: 0.4em; }
  .ui .auth__msg { min-height: 2em; }
}
/* 9:16 cut for portrait screens. BARIBIER spans 57–62% of that frame and the
   bottom HUD row sits at ~93%, so the UI lives between 66% and ~90%. */
@media (orientation: portrait) {
  .stage {
    width: max(var(--W), calc(var(--H) * 9 / 16));
    height: max(var(--H), calc(var(--W) * 16 / 9));
    --ui-top: 66%;
    --u: max(16px, 3.4cqw);
  }
}

/* ── UI block ─────────────────────────────────────────────────────────── */
.ui {
  position: absolute; left: 50%; top: var(--ui-top);
  transform: translateX(-50%);
  width: max-content; max-width: 92%;
  font-family: var(--font); font-weight: 700; font-size: var(--u);
  letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
}
/* the glitch scan line, like the full-width rules that cross the video */
.ui::after {
  content: ''; position: absolute; left: -40%; right: -40%; top: var(--scan-y, 50%);
  height: 1px; background: var(--scan); box-shadow: 0 0 6px var(--glow);
  opacity: 0; pointer-events: none;
}
.ui.is-scan::after { animation: scan 300ms steps(1, end); }

/* ── corner brackets: the video's four frame corners, in miniature ───────── */
.brk { position: relative; }
.brk::before {
  --bk: max(1px, 0.1cqw);               /* 2px on a 1920 frame, like the video */
  --arm: calc(var(--u) * 0.55);
  --c: linear-gradient(var(--line), var(--line));
  content: ''; position: absolute; inset: -5px; pointer-events: none;
  background:
    var(--c) left top / var(--arm) var(--bk), var(--c) left top / var(--bk) var(--arm),
    var(--c) right top / var(--arm) var(--bk), var(--c) right top / var(--bk) var(--arm),
    var(--c) left bottom / var(--arm) var(--bk), var(--c) left bottom / var(--bk) var(--arm),
    var(--c) right bottom / var(--arm) var(--bk), var(--c) right bottom / var(--bk) var(--arm);
  background-repeat: no-repeat;
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.hud-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.65em 1.4em 0.65em 1.64em;
  font: inherit; letter-spacing: inherit; color: var(--ink);
  background: rgba(3, 8, 6, 0.5);
  border: 1px solid var(--line-dim); border-radius: 0;
  text-shadow: 0 0 0.35em var(--glow), 0 0 1.1em var(--glow-soft);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: text-shadow 160ms steps(2, end), border-color 160ms steps(2, end), box-shadow 160ms steps(2, end);
}
.hud-btn:hover, .hud-btn:focus-visible {
  outline: none; border-color: var(--line);
  text-shadow: 0 0 0.3em var(--glow), 0 0 0.9em var(--glow), 0 0 2.2em var(--glow-soft);
  box-shadow: 0 0 1.2em rgba(57, 192, 124, 0.12), inset 0 0 1.2em rgba(57, 192, 124, 0.08);
}
.hud-btn:hover .hud-btn__text, .hud-btn:focus-visible .hud-btn__text { animation: micro 150ms steps(3, end) 1; }
.hud-btn:active { background: rgba(11, 38, 26, 0.75); }
.hud-btn--small { min-height: 44px; padding: 0.5em 1em 0.5em 1.24em; font-size: 0.9em; }
.hud-btn__text { display: inline-block; }
.cursor { animation: blink 1.05s steps(1, end) infinite; }

/* ── code entry ───────────────────────────────────────────────────────── */
.auth { display: flex; flex-direction: column; align-items: center; gap: 0.75em; }
.auth[hidden] { display: none; }
.auth__label {
  margin: 0; color: var(--accent); font-size: 0.62em; letter-spacing: 0.3em; line-height: 1.2;
  text-shadow: 0 0 0.6em var(--glow-soft);
}
.auth__row { display: flex; align-items: center; gap: 1.4em; }
.auth__line {
  display: flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 0.5em;
  width: 15.5em; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0.6em -0.3em var(--glow);
  cursor: text;
}
.auth__prompt { color: var(--accent); text-shadow: 0 0 0.5em var(--glow); }
.auth__input {
  flex: 1; min-width: 0; height: 44px; padding: 0; margin: 0;
  font: inherit; font-size: max(16px, 1em);   /* ≥16px: no iOS zoom */
  letter-spacing: inherit; text-transform: uppercase;
  color: var(--ink); caret-color: var(--accent);
  text-shadow: 0 0 0.35em var(--glow), 0 0 1em var(--glow-soft);
  background: transparent; border: 0; border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.auth__input::selection { background: rgba(57, 192, 124, 0.3); }
.auth__msg { min-height: 2.3em; text-align: center; line-height: 1.25; }
.auth__err, .auth__sub { margin: 0; white-space: nowrap; text-transform: none; }  /* keeps 0x lowercase, like the HUD */
.auth__err { color: var(--ink); font-size: 0.78em; text-shadow: 0 0 0.35em var(--glow), 0 0 1em var(--glow-soft); }
.auth__sub { margin-top: 0.35em; color: var(--hud); opacity: 0.6; font-size: 0.6em; letter-spacing: 0.3em; }

@media (orientation: portrait) {
  .auth { gap: 0.6em; }
  .auth__label { font-size: 0.68em; }
  .auth__row { flex-direction: column; gap: 0.85em; }
  .auth__line { width: min(15.5em, 78vw); }
  .auth__err { font-size: 0.72em; letter-spacing: 0.16em; }
}

/* ── glitch vocabulary ────────────────────────────────────────────────── */
/* is-glitch: entrances and errors, ~300ms — slice displacement, green split, flicker */
.is-glitch { animation: glitch 300ms steps(1, end) 1; }
.is-glitch-out { animation: glitch-out 180ms steps(1, end) 1 forwards; }

@keyframes glitch {
  0%   { transform: translateX(-6px); clip-path: inset(0 0 58% 0); opacity: 1;
         text-shadow: -3px 0 rgba(57, 192, 124, 0.85), 3px 0 rgba(168, 210, 188, 0.6); }
  12%  { transform: translateX(5px);  clip-path: inset(40% 0 22% 0); opacity: 0.55; }
  24%  { transform: translateX(-2px); clip-path: inset(0); opacity: 1;
         text-shadow: 2px 0 rgba(57, 192, 124, 0.85), -2px 0 rgba(168, 210, 188, 0.5); }
  38%  { transform: translateX(7px);  clip-path: inset(66% 0 0 0); opacity: 0.8; }
  52%  { transform: translateX(-4px); clip-path: inset(12% 0 48% 0); opacity: 0.35; }
  66%  { transform: translateX(2px);  clip-path: inset(0); opacity: 1; }
  80%  { transform: translateX(-1px); opacity: 0.7; }
  100% { transform: none; clip-path: none; opacity: 1; }
}
@keyframes glitch-out {
  0%   { transform: translateX(4px); clip-path: inset(0 0 50% 0); opacity: 1; }
  30%  { transform: translateX(-6px); clip-path: inset(50% 0 0 0); opacity: 0.6; }
  60%  { transform: translateX(3px); clip-path: inset(30% 0 40% 0); opacity: 0.3; }
  100% { opacity: 0; transform: none; clip-path: inset(50% 0 50% 0); }
}
@keyframes micro {
  0%   { transform: translateX(-2px); text-shadow: -2px 0 rgba(57, 192, 124, 0.9), 2px 0 rgba(168, 210, 188, 0.6); }
  50%  { transform: translateX(2px); }
  100% { transform: none; }
}
@keyframes scan {
  0%   { opacity: 0.9; }
  25%  { opacity: 0; }
  45%  { opacity: 0.6; transform: translateY(-0.9em); }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor, .is-glitch, .is-glitch-out, .ui.is-scan::after,
  .hud-btn:hover .hud-btn__text, .hud-btn:focus-visible .hud-btn__text { animation: none !important; }
  .is-glitch-out { opacity: 0; }
}