/* The glyph lock that closes the technology page (owner request, 2026-11-01): a dark band with the
   owner's twelve glowing glyphs in one row, the tip button under it, and the frame that shows the
   DNA wall once the row is right. The band stays dark in the light theme too, because the glyphs are
   white light. */

.glyph-lock {
  filter: none;
  opacity: 1;
}

.glyph-lock {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(8, 92, 120, 0.28), transparent 70%),
    #060811;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.glyph-lock-inner {
  display: grid;
  justify-items: center;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.glyph-lock-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2px, 0.7vw, 12px);
  width: min(100%, 72rem);
}

.glyph-lock-slot {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glyph-lock-slot:focus-visible {
  outline: 2px solid rgba(185, 244, 231, 0.75);
  outline-offset: 2px;
}

.glyph-lock-glyph {
  display: block;
  width: 100%;
  height: 100%;
  background: url("./assets/glyph-lock/glyphs.webp") 0 50% / 1600% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(185, 244, 231, 0.35));
}

@media (prefers-reduced-motion: no-preference) {
  .glyph-lock-glyph.is-turning {
    animation: glyph-lock-turn 0.2s ease-out;
  }
}

@keyframes glyph-lock-turn {
  from { opacity: 0.25; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

.glyph-lock-tip-button {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #f3f5fb;
  cursor: pointer;
}

.glyph-lock-tip-button:hover {
  border-color: rgba(185, 244, 231, 0.6);
}

.glyph-lock-tip-button:focus-visible {
  outline: 2px solid rgba(185, 244, 231, 0.75);
  outline-offset: 3px;
}

.glyph-lock-tip {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  font: 600 clamp(0.85rem, 2.2vw, 1.15rem) / 1.4 "JetBrains Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  color: #b9f4e7;
}

/* The DNA wall: a 1920 x 1080 stage centred in the window and scaled by glyph-lock.js. */
.glyph-dna {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #05060b;
}

.glyph-dna[hidden] {
  display: none;
}

.glyph-dna-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: 50% 50%;
}

.glyph-dna-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.glyph-dna-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(9, 11, 18, 0.8);
  color: #f3f5fb;
  font: 400 26px/1 system-ui, sans-serif;
  cursor: pointer;
}

.glyph-dna-close:focus-visible {
  outline: 2px solid rgba(185, 244, 231, 0.75);
  outline-offset: 2px;
}

html.glyph-dna-open,
html.glyph-dna-open body {
  overflow: hidden;
}

/* styles.css reserves a stable scrollbar gutter; with the page locked it would show as a strip. */
html.glyph-dna-open {
  scrollbar-gutter: auto;
}