/* ============================================================
   combo.codes — Gate (private access node)
   Page-specific styles on top of the design-system tokens.
   ============================================================ */

html, body { height: 100%; overflow: hidden; }

.gate {
  position: fixed;
  inset: 0;
  background: var(--void);
  font-family: var(--font-mono);
}

/* ---- scanlines (sanctioned texture) ------------------------------ */
.gate__scan {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(242, 241, 247, 0.025) 0 1px,
    transparent 1px 4px
  );
}

/* ---- ambient layer ------------------------------------------------ */
.gate__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--gate-ambient, 0.85);
}
.amb { position: absolute; }
@media (prefers-reduced-motion: no-preference) {
  .amb--float { animation: gate-float 12s var(--ease-in-out) infinite alternate; }
}
@keyframes gate-float {
  from { transform: translateY(-6px); }
  to   { transform: translateY(8px); }
}

.amb-term { width: 320px; }
.amb-term .cc-term__body { min-height: 132px; }

.amb-code {
  width: 330px;
  opacity: 0.66;
  font-size: var(--text-xs);
}

.amb-caption {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  line-height: 2;
}

.amb-glyph {
  font-family: var(--font-mono);
  color: rgba(242, 241, 247, 0.035);
  line-height: 1;
  user-select: none;
}

/* corner brackets */
.amb-corner {
  width: 26px;
  height: 26px;
  border: 0 solid rgba(168, 85, 247, 0.55);
}
.amb-corner--tl { top: 24px; left: 24px; border-top-width: 1px; border-left-width: 1px; }
.amb-corner--tr { top: 24px; right: 24px; border-top-width: 1px; border-right-width: 1px; border-color: rgba(200, 255, 46, 0.45); }
.amb-corner--bl { bottom: 24px; left: 24px; border-bottom-width: 1px; border-left-width: 1px; border-color: rgba(200, 255, 46, 0.45); }
.amb-corner--br { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 1080px) {
  .amb-term, .amb-code { display: none; }
}

/* ---- center column ------------------------------------------------ */
.gate__center {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
}

.gate__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

.gate__footerline {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ---- ENTER button -------------------------------------------------- */
.gate-enter {
  height: 58px;
  min-width: 264px;
  padding: 0 var(--space-12);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
.gate[data-accent="purple"] .gate-enter {
  background: var(--pulse-purple);
  border-color: var(--pulse-purple);
  color: var(--ink);
}
.gate[data-accent="purple"] .gate-enter:hover { box-shadow: var(--glow-purple); }

.gate-enter-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   THE LOGO ASSEMBLY (adapted from brand animation file)
   ============================================================ */
.cclogo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 16px);
  line-height: 1;
  font-family: var(--font-mono);
}
.cclogo .st { position: relative; display: inline-block; }
.cclogo .bk { position: absolute; left: 4px; top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .gate[data-glitch="on"] .cclogo .bk { animation: gate-glitch 4.6s step-end 4.6s infinite; }
  .gate[data-glitch="on"] .cclogo .dot { animation: gate-dotflick 4.6s step-end 4.6s infinite; }
}
.cclogo .fr { position: relative; color: var(--ink); }

.cclogo .lb,
.cclogo .rb { font-size: clamp(44px, 6.4vw, 66px); }
.cclogo .lb { opacity: 0; transform: translateX(-36px); animation: gate-slide 0.5s ease-out 0.1s forwards; }
.cclogo .rb { opacity: 0; transform: translateX(36px); animation: gate-slide 0.5s ease-out 0.25s forwards; }

.cclogo .typewrap { display: inline-flex; align-items: baseline; }
.cclogo .type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: max-content;
  max-width: 0;
  margin-right: -6px;
  animation: gate-typing 2.5s step-end 0.9s forwards;
  font-size: clamp(28px, 4.4vw, 46px);
}
.cclogo .caret {
  position: relative;
  display: inline-block;
  width: 0.6ch;
  height: 0.92em;
  font-size: clamp(28px, 4.4vw, 46px);
  margin-left: 6px;
  animation: gate-blink 1s steps(1) infinite, gate-vanish 0.15s ease-out 3.5s forwards;
}
.cclogo .caret .b { position: absolute; left: 4px; top: 4px; width: 100%; height: 100%; background: var(--pulse-purple); }
.cclogo .caret .f { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--acid-lime); }

.cclogo .sc { opacity: 0; animation: gate-pop 0.4s var(--ease-pop) 3.65s forwards; font-size: clamp(38px, 5.6vw, 58px); }
.cclogo .dot { color: var(--acid-lime); }

@keyframes gate-slide { to { opacity: 1; transform: translateX(0); } }
@keyframes gate-typing {
  0% { max-width: 0; }
  6% { max-width: 1ch; }
  13% { max-width: 2ch; }
  19% { max-width: 3ch; }
  31% { max-width: 4ch; }
  35% { max-width: 5ch; }
  54% { max-width: 6ch; }
  60% { max-width: 7ch; }
  64% { max-width: 8ch; }
  76% { max-width: 9ch; }
  81% { max-width: 10ch; }
  92%, 100% { max-width: calc(11ch + 6px); }
}
@keyframes gate-blink { 50% { opacity: 0; } }
@keyframes gate-vanish { to { opacity: 0; width: 0; margin-left: 0; } }
@keyframes gate-pop {
  0% { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes gate-glitch {
  0%, 84% { left: 4px; top: 4px; }
  86% { left: -5px; top: 2px; }
  88% { left: 7px; top: -4px; }
  90% { left: -3px; top: 6px; }
  92%, 100% { left: 4px; top: 4px; }
}
@keyframes gate-dotflick {
  0%, 84% { color: var(--acid-lime); }
  86% { color: var(--pulse-purple); }
  89% { color: var(--acid-lime); }
  91% { color: var(--pulse-purple); }
  93%, 100% { color: var(--acid-lime); }
}

@media (prefers-reduced-motion: reduce) {
  .cclogo .lb, .cclogo .rb { opacity: 1; transform: none; animation: none; }
  .cclogo .type { max-width: none; animation: none; }
  .cclogo .caret { display: none; }
  .cclogo .sc { opacity: 1; animation: none; }
}

/* ============================================================
   ACCESS MODAL — secure console prompt
   ============================================================ */
.gatemodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(13, 11, 20, 0.74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gatemodal-fade 160ms var(--ease-out);
}
/* On phones the soft keyboard eats ~40% of the screen — pin the
   console to the top so it stays visible while typing. */
@media (max-width: 720px), (max-height: 540px) {
  .gatemodal-overlay {
    align-items: flex-start;
    padding-top: max(var(--space-10), env(safe-area-inset-top));
  }
}
@keyframes gatemodal-fade { from { opacity: 0; } to { opacity: 1; } }

.gatemodal {
  width: min(540px, calc(100vw - 48px));
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-family: var(--font-mono);
  animation: gatemodal-pop 220ms var(--ease-pop);
}
@keyframes gatemodal-pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.gatemodal--denied { border-color: rgba(255, 46, 136, 0.55); }
.gatemodal--shake { animation: gatemodal-shake 240ms var(--ease-out); }
@keyframes gatemodal-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  55% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}
.gatemodal--granted { border-color: rgba(200, 255, 46, 0.5); }

.gatemodal__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.gatemodal__lead {
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.gatemodal__lead::before { content: "> "; color: var(--pulse-purple); }

.gatemodal__status {
  min-height: 20px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}
.gatemodal__status--denied { color: var(--hot-magenta); }

.gatemodal__granted {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  min-height: 84px;
}
.gatemodal__granted .gl { color: var(--text-secondary); }
.gatemodal__granted .gl::before { content: "> "; color: var(--acid-lime); }
.gatemodal__granted .gl--ok { color: var(--acid-lime); }

.gatemodal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}