/* calibration.css — arrival ritual overlay. VT323, cyan on void. */

.calib-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020508;
  color: #7BF7FF;
  font-family: 'VT323', ui-monospace, monospace;
  z-index: 1000;
}

.calib-screen {
  max-width: 34em;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.calib-title {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin: 0;
  color: #22E5FF;
  text-transform: lowercase;
}

.calib-line {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  color: #7BF7FF;
  opacity: 0.85;
}

.calib-url {
  font-size: 0.8rem;
  opacity: 0.5;
  word-break: break-all;
}

.calib-mobile-link {
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: #22E5FF;
  border: 1px solid #22E5FF;
  padding: 0.5em 1.2em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.calib-mobile-link:hover {
  background: #22E5FF;
  color: #020508;
}

.calib-button {
  appearance: none;
  background: transparent;
  border: 1px solid #22E5FF;
  color: #22E5FF;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  padding: 0.7em 1.6em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.calib-button:hover,
.calib-button:focus-visible {
  background: #22E5FF;
  color: #020508;
  outline: none;
}

/* guide dot — the target to follow: hollow ring, bright filament cyan */
.calib-dot {
  position: fixed;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: transparent;
  border: 0.18rem solid #22E5FF;
  box-shadow: 0 0 1.4rem 0.25rem rgba(34, 229, 255, 0.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1001;
}

/* hand dot — where your hand is: small filled dot, dimmer glow tone */
.calib-hand {
  position: fixed;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #7BF7FF;
  box-shadow: 0 0 0.4rem 0.05rem rgba(123, 247, 255, 0.5);
  opacity: 0.9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1001;
}

.calib-hand-label {
  position: fixed;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: #7BF7FF;
  text-transform: lowercase;
  transform: translate(-50%, 0.9rem);
  pointer-events: none;
  z-index: 1001;
}

.calib-subline {
  font-size: 0.75rem;
  opacity: 0.5;
}

.calib-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  z-index: 999;
}

.calib-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.calib-fade.calib-visible {
  opacity: 1;
}

/* subtle link to the artist's site, shown on the arrival/welcome screen */
.calib-artist-link {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #7BF7FF;
  opacity: 0.55;
  text-decoration: none;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(123, 247, 255, 0.35);
  transition: opacity 0.2s ease;
}

.calib-artist-link:hover,
.calib-artist-link:focus-visible {
  opacity: 0.9;
}

/* honest cookie notice — dismiss-only, no storage, fixed to the bottom */
.calib-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: rgba(2, 5, 8, 0.92);
  border-top: 1px solid rgba(34, 229, 255, 0.25);
  font-family: 'VT323', ui-monospace, monospace;
  z-index: 1002;
}

.calib-cookie-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #7BF7FF;
  opacity: 0.8;
  text-align: center;
}

.calib-cookie-ok {
  appearance: none;
  background: transparent;
  border: 1px solid #22E5FF;
  color: #22E5FF;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  padding: 0.3em 1em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.calib-cookie-ok:hover,
.calib-cookie-ok:focus-visible {
  background: #22E5FF;
  color: #020508;
  outline: none;
}

/* guided per-axis calibration step line */
.calib-step-line {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/* single-direction sweep arrow — glows and drifts to hint the motion */
.calib-arrow {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 4rem;
  line-height: 1;
  color: #22E5FF;
  text-shadow: 0 0 18px rgba(34, 229, 255, 0.8), 0 0 40px rgba(34, 229, 255, 0.4);
  pointer-events: none;
}
.calib-arrow-h {
  transform: translate(-50%, -50%);
  animation: calib-arrow-h-drift 1.6s ease-in-out infinite;
}
.calib-arrow-v {
  transform: translate(-50%, -50%);
  animation: calib-arrow-v-drift 1.6s ease-in-out infinite;
}
@keyframes calib-arrow-h-drift {
  0%   { transform: translate(-180%, -50%); opacity: 0.3; }
  50%  { transform: translate(80%, -50%);   opacity: 1; }
  100% { transform: translate(-180%, -50%); opacity: 0.3; }
}
@keyframes calib-arrow-v-drift {
  0%   { transform: translate(-50%, -180%); opacity: 0.3; }
  50%  { transform: translate(-50%, 80%);   opacity: 1; }
  100% { transform: translate(-50%, -180%); opacity: 0.3; }
}

/* horizontal/vertical fill bars — live feedback for captured hand reach */
.calib-bar-track {
  position: fixed;
  background: rgba(123, 247, 255, 0.12);
  border: 1px solid rgba(34, 229, 255, 0.35);
  overflow: hidden;
}

.calib-bar-track-h {
  left: 10%;
  right: 10%;
  top: 50%;
  height: 0.6rem;
  transform: translateY(-50%);
}

.calib-bar-track-v {
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 0.6rem;
  transform: translateX(-50%);
}

.calib-bar-fill {
  position: absolute;
  background: #22E5FF;
  box-shadow: 0 0 0.6rem 0.05rem rgba(34, 229, 255, 0.6);
}

.calib-bar-fill-h {
  top: 0;
  bottom: 0;
}

.calib-bar-fill-v {
  left: 0;
  right: 0;
}