/* ============================================================================
   PrimeBytes — Immersive landing page (zensical.org-style hero)
   ============================================================================ */

:root {
  --pb-bg: #0b0c0f;
  --pb-fg: #ffffff;
  --pb-muted: hsla(215, 15%, 90%, 0.75);
  --pb-accent: #38bdf8;
  --pb-accent-2: #0ea5e9;
  --pb-gradient: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #0284c7 100%);
}

/* ----- Detect landing via :has() and reshape the chrome ----- */
html:has(#hero), body:has(#hero) {
  background-color: var(--pb-bg);
  height: 100%;
  margin: 0;
}

body:has(#hero) .md-header {
  background-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--pb-fg);
  position: absolute;
  z-index: 5;
}

body:has(#hero) .md-header__option {
  display: none;
}

body:has(#hero) .md-header__title,
body:has(#hero) .md-header__topic,
body:has(#hero) .md-header__ellipsis,
body:has(#hero) .md-search__input,
body:has(#hero) .md-search__input::placeholder {
  color: var(--pb-fg);
}

body:has(#hero) .md-search__form {
  background-color: hsla(220, 15%, 90%, 0.12);
  backdrop-filter: blur(8px);
}

body:has(#hero) .md-tabs {
  display: block !important;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  box-shadow: inset 0 -0.05rem 0 hsla(0, 0%, 100%, 0.1);
}

body:has(#hero) .md-tabs__list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
  margin: 0;
  max-width: 1220px;
  margin: 0 auto;
}

body:has(#hero) .md-tabs__link {
  color: var(--pb-fg);
  opacity: 0.85;
}

body:has(#hero) .md-tabs__link:hover,
body:has(#hero) .md-tabs__item--active .md-tabs__link {
  opacity: 1;
}

body:has(#hero) .md-tabs__item--active {
  border-bottom: 0.05rem solid var(--pb-fg);
}

body:has(#hero) .md-main__inner {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

body:has(#hero) .md-sidebar,
body:has(#hero) .md-sidebar--primary,
body:has(#hero) .md-sidebar--secondary,
body:has(#hero) .md-footer {
  display: none !important;
}

body:has(#hero) .md-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body:has(#hero) .md-content__inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

body:has(#hero) .md-content__inner > h1:first-child,
body:has(#hero) .md-content__inner > .md-content__button {
  display: none !important;
}

/* ----- Full-viewport hero ----- */
.pb-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--pb-bg);
  color: var(--pb-fg);
}

/* ----- Background layers ----- */
.pb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pb-bg);
}

.pb-grid-bg {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 10%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 10%, transparent 85%);
}

.pb-grid-line {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  animation-duration: 2200ms;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: both;
}

.pb-grid-line--v {
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.07) 12%,
    rgba(56, 189, 248, 0.07) 88%,
    rgba(56, 189, 248, 0) 100%
  );
}

.pb-grid-line--h {
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.07) 12%,
    rgba(56, 189, 248, 0.07) 88%,
    rgba(56, 189, 248, 0) 100%
  );
}

.pb-grid-line--from-top    { animation-name: pb-grid-slide-from-top; }
.pb-grid-line--from-bottom { animation-name: pb-grid-slide-from-bottom; }
.pb-grid-line--from-left   { animation-name: pb-grid-slide-from-left; }
.pb-grid-line--from-right  { animation-name: pb-grid-slide-from-right; }

@keyframes pb-grid-slide-from-top {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pb-grid-slide-from-bottom {
  0%   { transform: translateY(100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pb-grid-slide-from-left {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes pb-grid-slide-from-right {
  0%   { transform: translateX(100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-grid-line,
  .pb-grid-wrap > h1,
  .pb-grid-wrap > p,
  .pb-grid-wrap > .pb-cta,
  .pb-status-row,
  .pb-glow,
  .pb-meta code {
    animation: none !important;
  }
  .pb-beam { display: none; }
  .pb-meta code {
    width: auto;
    border-right-color: transparent;
  }
  .pb-teaser .md-button:hover,
  .pb-teaser .md-button:active {
    transform: none;
  }
}

/* Ambient light pools — radial gradients only (no filter: blur), drifting
   slowly on transform so they stay on the GPU. */
.pb-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  animation: pb-float 36s ease-in-out infinite;
}

.pb-glow--3 {
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  left: 34%;
  top: 22%;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.1) 0%, transparent 70%);
  animation-delay: -24s;
  animation-duration: 44s;
}

@keyframes pb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* Horizon glow rising from the bottom edge + corner vignette. Sits above the
   grid/glow layers (z-index 1) but below all content (z-index 3). */
.pb-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 50% at 50% 115%, rgba(2, 132, 199, 0.1), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

/* Matrix trail: an occasional column of terminal glyphs falling along one
   grid column, spawned by grid.js. The gradient is clipped to the text so the
   tail fades out and the leading (bottom) glyph is brightest. Lives inside
   .pb-grid-bg so the radial mask fades it toward the viewport edges. */
.pb-beam {
  position: absolute;
  top: -400px;
  margin-left: -0.5ch;
  font-family: var(--md-code-font, ui-monospace, "JetBrains Mono", Menlo, monospace);
  font-size: 14px;
  line-height: 1.35;
  white-space: pre;
  background: linear-gradient(
    to bottom,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.3) 45%,
    rgba(125, 211, 252, 0.8) 90%,
    rgba(226, 244, 255, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  will-change: transform;
  animation: pb-beam-fall var(--pb-beam-dur, 5s) linear forwards;
}

@keyframes pb-beam-fall {
  to { transform: translateY(calc(100vh + 820px)); }
}

/* ----- Status strip (top) ----- */
.pb-status {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 2rem;
  font-family: var(--md-code-font, ui-monospace, "JetBrains Mono", Menlo, monospace);
  font-size: 0.72rem;
  color: var(--pb-muted);
  letter-spacing: 0.02em;
}

.pb-status-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  animation: pb-log-in 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Log-line reveal: rows appear sequentially, after the teaser text lands */
.pb-status-row:nth-child(1) { animation-delay: 600ms; }
.pb-status-row:nth-child(2) { animation-delay: 720ms; }
.pb-status-row:nth-child(3) { animation-delay: 840ms; }

@keyframes pb-log-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* systemd boot-log status marker — dim brackets, green ok, static on purpose */
.pb-status-ok {
  color: hsla(215, 15%, 90%, 0.45);
}

.pb-status-label {
  color: #cbd5e1;
}

.pb-status-row em {
  font-style: normal;
  color: #d9a441;
}

@media (max-width: 720px) {
  .pb-status { display: none; }
}

/* ----- Teaser (the big text + buttons) ----- */
.pb-teaser {
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  z-index: 3;
}

.pb-grid-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 2rem;
}

.pb-teaser h1 {
  font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 0 0 1.25rem;
  max-width: 17ch;
  text-wrap: balance;
  border: none;
  /* Top-lit vertical fade; no text-shadow — it would paint through the
     transparent glyphs. */
  background: linear-gradient(180deg, #ffffff 48%, rgba(184, 212, 236, 0.72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pb-teaser p {
  color: hsla(215, 20%, 88%, 0.82);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0 0 0.9rem;
}

.pb-teaser p small {
  color: var(--pb-muted);
  font-size: 0.85rem;
}

.pb-teaser p small em {
  font-style: italic;
}

.pb-cta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ----- Entrance choreography ----- */
/* Grid lines lead (0ms), text lands on them in a fast rise cascade. */
@keyframes pb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pb-grid-wrap > h1,
.pb-grid-wrap > p,
.pb-grid-wrap > .pb-cta {
  animation: pb-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pb-grid-wrap > h1               { animation-delay: 150ms; }
.pb-grid-wrap > p:nth-of-type(1) { animation-delay: 260ms; }
.pb-grid-wrap > p:nth-of-type(2) { animation-delay: 370ms; }
.pb-grid-wrap > .pb-cta          { animation-delay: 480ms; }

/* Buttons — gradient primary with inner top highlight, glassy secondary */
.pb-teaser .md-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--pb-fg) !important;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pb-teaser .md-button .pb-btn-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.pb-teaser .md-button:hover,
.pb-teaser .md-button:focus {
  color: var(--pb-fg) !important;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.pb-teaser .md-button:active {
  transform: translateY(0);
  transition-duration: 70ms;
}

.pb-teaser .md-button:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 2px;
}

.pb-teaser .md-button:hover .pb-btn-icon {
  opacity: 1;
  transform: translateX(2px);
}

.pb-teaser .md-button--primary {
  color: #ffffff !important;
  background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
  border-color: rgba(125, 211, 252, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px -10px rgba(14, 165, 233, 0.5);
}

.pb-teaser .md-button--primary:hover,
.pb-teaser .md-button--primary:focus {
  color: #ffffff !important;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: rgba(125, 211, 252, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 30px -10px rgba(56, 189, 248, 0.6);
}

.pb-teaser .md-button--primary .pb-btn-icon {
  color: #ffffff;
  opacity: 1;
}

.pb-teaser .md-button--primary:hover .pb-btn-icon {
  transform: scale(1.1);
}

/* ----- Bottom meta strip ----- */
.pb-meta {
  position: absolute;
  bottom: 64px;
  right: 0;
  z-index: 3;
  padding: 0 2rem;
  font-family: var(--md-code-font, ui-monospace, "JetBrains Mono", Menlo, monospace);
  font-size: 0.72rem;
  color: var(--pb-muted);
  letter-spacing: 0.02em;
}

/* One-shot typewriter. 29ch must equal the character count of
   "$ kubectl explain --recursive" — recount if the copy changes.
   letter-spacing must stay normal or the text outgrows 29ch and clips. */
.pb-meta code {
  background: transparent;
  padding: 0;
  color: inherit;
  letter-spacing: normal;
  /* content-box so the caret border doesn't eat into the 29ch text width */
  box-sizing: content-box;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 29ch;
  border-right: 0.5ch solid var(--pb-accent);
  animation: pb-type 1.4s steps(29) 1.1s both,
    pb-caret 1.1s step-end 2.5s infinite;
}

@keyframes pb-type {
  from { width: 0; }
}

@keyframes pb-caret {
  50% { border-color: transparent; }
}

.pb-meta-key { color: var(--pb-accent); }
.pb-meta-val { color: var(--pb-accent-2); }

/* ----- Responsive breakpoints ----- */

/* Tablet portrait (768px range) — infinity sits above the teaser */
@media (max-width: 900px) {
  .pb-teaser h1 {
    max-width: 22ch;
  }
  .pb-teaser p {
    font-size: 1rem;
  }
  .pb-teaser { bottom: 110px; }
}

/* Mobile (≤ 600px) — text-dominant, simpler layout */
@media (max-width: 600px) {
  .pb-meta { display: none; }
  .pb-teaser {
    bottom: 100px;
  }
  .pb-grid-wrap {
    padding: 0 1.25rem;
  }
  .pb-status {
    padding: 0 1.25rem;
    top: 76px;
    font-size: 0.66rem;
    gap: 0.4rem 1rem;
  }
  .pb-teaser h1 {
    font-size: 2.05rem;
    max-width: none;
    line-height: 1.1;
    margin-bottom: 0.9rem;
  }
  .pb-teaser p {
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: none;
    margin-bottom: 0.65rem;
  }
  .pb-teaser p small {
    font-size: 0.78rem;
  }
  .pb-cta {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.25rem;
    gap: 0.6rem;
  }
  .pb-teaser .md-button {
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}

/* Very small / landscape phones */
@media (max-width: 380px) {
  .pb-status { display: none; }
}

/* ----- Subtle scroll lock on landing ----- */
body:has(#hero) {
  overflow: hidden;
}

.md-footer-meta {
  display: none;
}

/* ----- Header logo: height-constrained so wide PNG keeps aspect ratio ----- */
.md-header__topic .md-ellipsis {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.md-header__button.md-logo {
  padding: 0.4rem 0 0.4rem 0.4rem;
}
.md-header__title {
  margin-left: 4px;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: auto;
  height: 1.5rem;
  max-width: none;
}

/* Keep the logo visible on mobile/tablet — the theme's default hides
   .md-logo below 1220px in favor of the drawer hamburger. */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: inline-block;
  }
  /* On the landing page the tabs are forced visible, so the drawer
     hamburger is redundant. Other pages still need it for nav. */
  body:has(#hero) .md-header__button[for="__drawer"] {
    display: none;
  }
}