/*
 * The temporary demo access gate (issues 580 and 582). Values come from the copied HAS+
 * token sheet and the canonical wordmark CSS, both assembled beside this file.
 */

html.demo-access-pending,
html.demo-access-pending body {
  overflow: hidden !important;
}

html.demo-access-pending body > :not(#demo-access-gate) {
  visibility: hidden !important;
}

.demo-access-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  visibility: visible !important;
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(
    120% 90% at 50% 40%,
    var(--card-bg) 0%,
    var(--page-bg) 58%,
    var(--auth-wash-edge) 100%
  );
  font-family: var(--font-ui);
}

.demo-access-gate[data-state='checking'] {
  opacity: 0;
}

.demo-access-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.demo-access-breath,
.demo-access-mark {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.demo-access-dot {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  opacity: 0;
}

.demo-access-dot--accent {
  border-color: var(--auth-breath-accent);
}

.demo-access-gate[data-motion='full'][data-state='intro'] .demo-access-dot {
  animation: demo-access-breath 2.1s cubic-bezier(0.42, 0, 0.58, 1) both;
}

@keyframes demo-access-breath {
  0% {
    transform: translate(0, 0) scale(0.55);
    opacity: 0;
  }
  40%,
  64% {
    transform: translate(var(--ox), var(--oy)) scale(1.06);
    opacity: 0.7;
  }
  100% {
    transform: translate(calc(var(--px) * -1), calc(var(--py) * -1)) scale(0.12);
    opacity: 0;
  }
}

.demo-access-mark {
  display: flex;
  transform: translate(-50%, -50%);
}

.demo-access-gate[data-motion='full'][data-state='intro'] .demo-access-mark .wordmark__dot {
  box-shadow: var(--auth-anchor-shadow);
  animation: demo-access-anchor-in 0.6s cubic-bezier(0.2, 1.2, 0.3, 1) 1.55s both;
}

.demo-access-gate[data-motion='full'][data-state='intro'] .demo-access-mark .wordmark__word {
  animation: demo-access-word-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.9s both;
}

.demo-access-gate[data-motion='full'][data-state='ready'] .demo-access-mark {
  animation: demo-access-mark-rise 0.75s cubic-bezier(0.5, 0, 0.15, 1) both;
}

@keyframes demo-access-anchor-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  68% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes demo-access-word-in {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes demo-access-mark-rise {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-50%, calc(-50% - 242px));
  }
}

.demo-access-card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 420px;
  max-width: calc(100vw - 40px);
  padding: 28px;
  transform: translate(-50%, -196px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-auth-card);
  background: var(--card-bg);
  box-shadow: var(--auth-card-shadow);
}

.demo-access-gate[data-motion='full'][data-state='ready'] .demo-access-card {
  animation: demo-access-card-rise 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s both;
}

@keyframes demo-access-card-rise {
  from {
    opacity: 0;
    transform: translate(-50%, -170px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -196px);
  }
}

.demo-access-fallback-mark {
  display: none;
  margin-bottom: 24px;
}

.demo-access-title {
  margin: 0 0 12px;
  color: var(--ink);
  font: var(--text-page-title);
  letter-spacing: -0.025em;
}

.demo-access-copy {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font: var(--text-body);
}

.demo-access-form {
  display: grid;
  margin-top: 22px;
}

.demo-access-label {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font: 600 12px/1.35 var(--font-ui);
}

.demo-access-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-auth-control);
  outline: none;
  background: var(--auth-input-fill);
  font: var(--text-body);
}

.demo-access-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--auth-focus-ring);
}

.demo-access-submit {
  min-height: 44px;
  margin-top: 11px;
  padding: 10px 14px;
  color: var(--dark-card-emphasis);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--accent-button-shadow);
  cursor: pointer;
  font: 600 12.5px/1.35 var(--font-ui);
}

.demo-access-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.demo-access-submit:focus-visible,
.demo-access-contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.demo-access-submit:disabled {
  color: var(--text-faint);
  background: var(--page-bg);
  box-shadow: none;
  cursor: wait;
}

.demo-access-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--warning-text);
  font: 500 12px/1.45 var(--font-ui);
}

.demo-access-privacy {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font: 500 11.5px/1.5 var(--font-ui);
}

.demo-access-contact {
  color: var(--text-secondary);
  text-underline-offset: 2px;
}

.demo-access-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce), (max-width: 520px), (max-height: 720px) {
  .demo-access-gate {
    position: fixed;
    overflow: auto;
    padding: 40px 16px;
    background: var(--page-bg);
  }

  .demo-access-scene {
    position: static;
    width: 100%;
    height: auto;
  }

  .demo-access-breath,
  .demo-access-mark {
    display: none;
  }

  .demo-access-card {
    position: static;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
    animation: none !important;
  }

  .demo-access-fallback-mark {
    display: block;
  }
}

@media (max-width: 420px) {
  .demo-access-card {
    padding: 23px 20px;
  }
}