/* ------------------------------------------------------------------
   DICKGENTRY.COM landing page layout.
   Load core.css first: tokens, chamfer, buttons, chips, the logo mark and
   the shared effects live there. This file is only what the landing page
   and the style guide page need on top.
   ------------------------------------------------------------------ */

html {
  overflow-x: clip; /* the tilted ticker is deliberately wider than the page */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hud-h) + 16px);
}

body {
  min-height: 100vh;
  background:
    linear-gradient(rgba(30, 36, 51, .5) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(30, 36, 51, .5) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Fades the page grid out toward the bottom of the viewport. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, rgba(6, 7, 11, .72), var(--bg) 75%);
}

/* ---------- Global FX layers ---------- */
.fx-spot {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%), rgba(230, 255, 43, .055), transparent 70%);
}
.scroll-rail {
  position: fixed; top: var(--hud-h); right: 0; bottom: 0; width: 3px; z-index: 60;
  background: var(--line);
}
.scroll-rail i {
  display: block; width: 100%; height: 0%;
  background: var(--volt);
  box-shadow: 0 0 12px var(--volt);
}

/* ---------- Boot overlay ---------- */
#boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end;
  padding: var(--gutter);
  background: var(--bg);
  transition: opacity .35s ease, visibility .35s;
}
#boot.out { opacity: 0; visibility: hidden; }
#boot-log {
  margin: 0;
  font: 500 13px/1.7 var(--font-mono);
  color: var(--volt);
  white-space: pre-wrap;
}
html:not(.js) #boot { display: none; }

/* ---------- HUD header ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: var(--hud-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  background: rgba(6, 7, 11, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 10px 14px;
  color: var(--muted);
  transition: color .15s;
}
.nav a span { color: var(--dim); margin-right: 8px; transition: color .15s; }
.nav a::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--volt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav a:hover, .nav a.active { color: var(--text); }
.nav a:hover span, .nav a.active span { color: var(--volt); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.hud-status {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--muted);
}
.hud-clock { color: var(--text); padding-left: 10px; border-left: 1px solid var(--line-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--hud-h) + 40px) var(--gutter) 28px;
  overflow: hidden;
  cursor: crosshair;
  /* Solid, so the page grid doesn't show through and fight the glyph grid. */
  background: var(--bg);
}
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, transparent 28%),
    linear-gradient(to right, rgba(6, 7, 11, .7) 0%, transparent 60%);
}

.hero-readout {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--muted);
}
.hero-readout--tr { top: calc(var(--hud-h) + 22px); right: calc(var(--gutter) + 8px); }
.hero-readout span:first-child { color: var(--volt); }

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
  align-items: end;
}

.name { font-size: clamp(3.6rem, 14.5vw, 13rem); }

.hero-copy { max-width: 520px; margin: 26px 0 28px; color: var(--muted); font-size: 18px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* --fill must stay opaque: the border colour is the element's own
   background, so any transparency here tints the whole panel pink. */
.feature { padding: 20px 22px 22px; --bd: var(--hot); --fill: var(--panel); }
.feature-top {
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hot);
  margin-bottom: 16px;
}
.feature-title { font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.feature-link {
  display: inline-flex; gap: 10px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--volt);
}
.feature-link i { font-style: normal; transition: transform .2s; }
.feature-link:hover i { transform: translateX(5px); }

.hero-foot {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 44px auto 0;
  display: flex; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.scroll-cue { color: var(--muted); }
.scroll-cue::after {
  content: '\2193';
  display: inline-block; margin-left: 10px;
  color: var(--volt);
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- Ticker ---------- */
.ticker {
  position: relative; z-index: 3;
  background: var(--volt); color: #000;
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.03);
  margin: 26px 0 0;
  border-top: 3px solid #000; border-bottom: 3px solid #000;
  box-shadow: 0 0 60px rgba(230, 255, 43, .18);
}
.ticker-track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker span {
  flex: none;
  padding: 12px 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker b { font-weight: 700; margin: 0 20px; color: rgba(0, 0, 0, .45); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section {
  position: relative; z-index: 1;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 140px) var(--gutter) 0;
}

.sec-head { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.sec-idx {
  font: 700 13px/1 var(--font-mono);
  color: #000; background: var(--volt);
  padding: 7px 9px;
}
.sec-head h2 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
}
.sec-rule {
  flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.sec-meta {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* Reveal on scroll. Gated on html.js: see the inline script in <head>. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Cards ---------- */
/* Four modules sit two by two; three across left the fourth alone on a row. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; perspective: 1400px; }
.cards .card:nth-child(2) { transition-delay: .08s; }
.cards .card:nth-child(3) { transition-delay: .16s; }
.cards .card:nth-child(4) { transition-delay: .24s; }
.cards .card:nth-child(5) { transition-delay: .32s; }
/* A card that takes the whole row: screen on the left, text on the right.
   Stacks like any other card once the grid drops to one column. The
   selectors carry an extra class because .card's own rules come later. */
.cards .card--wide { grid-column: 1 / -1; flex-direction: row; }
.card--wide .card-screen { flex: 0 0 58%; height: auto; min-height: 250px; margin: 1px 0 1px 1px; border-bottom: 0; border-right: 1px solid var(--line-2); }
.card--wide .card-body { justify-content: center; padding: 28px 30px; }
.card--wide .card-body p { flex: 0 1 auto; margin-bottom: 18px; max-width: 460px; }

.card {
  --c: 22px;
  display: flex; flex-direction: column;
  /* rx/ry are written by main.js on pointermove. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.js .card.reveal.in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity .6s ease, transform .18s ease-out; }
.card:hover, .card:focus-visible { --bd: var(--volt); }
.card.flash { --bd: var(--hot); animation: flash .7s steps(2) 2; }
@keyframes flash { 50% { filter: brightness(1.8); } }

.card-screen {
  position: relative;
  height: 210px;
  margin: 1px 1px 0;
  background: #05060a;
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
/* Out of flow so the canvas never sizes its box: in a wide card the screen's
   height is auto, and an in-flow canvas would take its height from the
   width/height attributes main.js rewrites on resize, growing the card with
   every narrow-then-wide resize. */
.card-screen canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.card-screen::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .28) 3px 4px);
}
.card-id {
  position: absolute; top: 12px; left: 14px; z-index: 1;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .16em; color: var(--muted);
}

.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; transition: color .15s; }
.card:hover h3 { color: var(--volt); }
.card p { color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.card-go {
  display: inline-flex; gap: 10px; margin-top: 8px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text);
}
.card-go i { font-style: normal; color: var(--volt); transition: transform .2s; }
.card:hover .card-go i { transform: translateX(6px); }

.card-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 255, 43, .13), transparent 65%);
  opacity: 0; transition: opacity .2s;
}
.card:hover .card-glare { opacity: 1; }

/* ---------- Sealed module ---------- */
.sealed {
  --c: 22px; --bd: var(--hot);
  display: grid; grid-template-columns: 280px minmax(0, 1fr) auto;
  margin-top: 22px;
}
.sealed-screen {
  position: relative;
  min-height: 170px;
  margin: 1px 0 1px 1px;
  background: #05060a;
  border-right: 1px solid var(--line-2);
  overflow: hidden;
}
.sealed-screen canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sealed-stamp {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  padding: 9px 13px;
  border: 2px solid var(--hot);
  background: rgba(5, 6, 10, .82);
  font: 700 13px/1 var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--hot);
}
.sealed-body { padding: 24px 26px; }
.sealed .card-tags span:first-child { color: var(--hot); border-color: rgba(255, 42, 109, .45); }
.sealed h3 { font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; color: var(--dim); }
.sealed p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 560px; }
.sealed-go {
  align-self: center;
  padding: 0 30px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--hot);
}
.unsealed .sealed { --bd: var(--volt); }
.unsealed .sealed-stamp { border-color: var(--volt); color: var(--volt); }
.unsealed .sealed .card-tags span:first-child { color: var(--volt); border-color: rgba(230, 255, 43, .45); }
.unsealed .sealed h3 { color: var(--text); }
.unsealed .sealed-go { color: var(--volt); }

/* ---------- Writing log ---------- */
.log { border-top: 1px solid var(--line-2); }
.log-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 120px minmax(0, 1fr) 90px 30px;
  align-items: center; gap: 16px;
  padding: 22px 18px;
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
  transition: color .12s;
}
.log-row::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--volt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.7, 0, .2, 1);
}
.log-row > * { position: relative; }
.log-idx, .log-row time, .log-tag {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .12s;
}
.log-idx { color: var(--hot); }
.log-tag { text-transform: uppercase; text-align: right; }
.log-title {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 600; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-row i { font-style: normal; font-size: 20px; color: var(--dim); text-align: right; transition: transform .2s, color .12s; }
.log-row:hover, .log-row:focus-visible { color: #000; }
.log-row:hover::before, .log-row:focus-visible::before { transform: scaleX(1); }
.log-row:hover .log-idx, .log-row:hover time, .log-row:hover .log-tag, .log-row:hover i,
.log-row:focus-visible .log-idx, .log-row:focus-visible time, .log-row:focus-visible .log-tag, .log-row:focus-visible i { color: #000; }
.log-row:hover i { transform: translateX(6px); }

.log-row--sealed { background: repeating-linear-gradient(-45deg, rgba(255, 42, 109, .08) 0 10px, transparent 10px 20px); }
.log-row--sealed::before { background: var(--hot); }
.log-row--sealed:not(:hover):not(:focus-visible) .log-title { color: var(--dim); }
.log-row--sealed:not(:hover):not(:focus-visible) .log-tag { color: var(--hot); }
.unsealed .log-row--sealed { background: none; }
.unsealed .log-row--sealed::before { background: var(--volt); }
.unsealed .log-row--sealed:not(:hover):not(:focus-visible) .log-title { color: inherit; }
.unsealed .log-row--sealed:not(:hover):not(:focus-visible) .log-tag { color: var(--volt); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

.idcard { padding: 24px; --c: 22px; }
.idcard-photo { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.idcard-photo canvas { width: 140px; height: 180px; border: 1px solid var(--line-2); background: #05060a; image-rendering: pixelated; }
.idcard-photo span {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.idcard-data { margin: 0 0 22px; }
.idcard-data div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-2);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.idcard-data dt { color: var(--muted); }
.idcard-data dd { margin: 0; }
.idcard-data .ok { color: var(--volt); }

.stat {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 26px;
  align-items: center; gap: 12px;
  margin-top: 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.stat b { color: var(--text); font-weight: 500; text-align: right; }
.bar { height: 8px; background: var(--line); overflow: hidden; }
.bar i {
  display: block; height: 100%; width: var(--v);
  background: repeating-linear-gradient(90deg, var(--volt) 0 6px, transparent 6px 8px);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .25s;
}
.in .bar i, html:not(.js) .bar i { transform: scaleX(1); }

.about-copy { color: var(--muted); max-width: 640px; }
.about-copy .lede {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 500; line-height: 1.22;
  color: var(--text);
  margin-bottom: 28px;
}
.about-copy mark { background: var(--volt); color: #000; padding: 0 .18em; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* ---------- Terminal ---------- */
.term { --c: 22px; --fill: #07090e; font: 400 14px/1.7 var(--font-mono); cursor: text; }
.term:focus-within { --bd: var(--volt); }
.term-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 1px 1px 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
  font-size: 12px; letter-spacing: .08em;
  color: var(--muted);
}
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 9px; height: 9px; background: var(--line-2); }
.term-dots i:first-child { background: var(--hot); }
.term-dots i:nth-child(2) { background: var(--volt); }
.term-hint { margin-left: auto; padding-right: 14px; color: var(--dim); text-transform: uppercase; }
.term-out { height: 280px; overflow-y: auto; padding: 16px 20px 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.term-out div { white-space: pre-wrap; word-break: break-word; }
.term-out .t-cmd { color: var(--text); }
.term-out .t-p { color: var(--volt); }
.term-out .t-out { color: var(--muted); }
.term-out .t-ok { color: var(--volt); }
.term-out .t-err { color: var(--hot); }
.term-out .t-hi { color: var(--cyan); }
.term-in { display: flex; align-items: center; gap: 10px; padding: 6px 20px 20px; }
.prompt { color: var(--volt); white-space: nowrap; }
.term-in input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--text); font: inherit;
  caret-color: var(--volt);
}

/* Password prompt: sudo shows nothing while you type, so neither do we. */
.term-in.secret input { color: transparent; }

.console {
  position: fixed; inset: var(--hud-h) 0 0 0; z-index: 80;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 0 var(--gutter);
  background: rgba(3, 4, 7, .74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s;
}
.console.open { opacity: 1; }
.console .term {
  width: 100%; max-width: 920px;
  --bd: var(--volt);
  transform: translateY(-28px);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
.console.open .term { transform: none; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; margin-top: clamp(80px, 12vw, 160px); padding: 0 var(--gutter) 28px; overflow: hidden; }
.foot-big {
  margin: 0 0 -0.12em;
  font-size: clamp(3rem, 15.5vw, 15rem);
  font-weight: 700; line-height: .8; letter-spacing: -.03em;
  text-align: center; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  user-select: none;
}
.foot-row {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  background: var(--bg);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.foot-row a:hover { color: var(--volt); }

/* Whole-page glitch, fired by the terminal's `glitch` command. */
body.page-glitch main { animation: page-glitch .5s steps(1); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hud-status { display: none; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .feature { max-width: 420px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cards .card--wide { flex-direction: column; }
  .card--wide .card-screen { flex: none; height: 210px; min-height: 0; margin: 1px 1px 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .card--wide .card-body { padding: 22px 24px 26px; }
  .sealed { grid-template-columns: minmax(0, 1fr); }
  .sealed-screen { margin: 1px 1px 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .sealed-go { justify-self: start; padding: 0 26px 26px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .idcard { max-width: 420px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .brand-name { display: none; }
  .nav a { padding: 10px 8px; }
  .nav a span { display: none; }
  .hero-readout { display: none; }
  .hero-foot span:last-child { display: none; }
  .sec-meta { display: none; }
  .log-row { grid-template-columns: 40px minmax(0, 1fr) 24px; padding: 18px 10px; }
  .log-row time, .log-tag { display: none; }
  .log-title { white-space: normal; }
  .term-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .bar i { transform: scaleX(1); }
}