/* Logo10xTerminal - standalone terminal-prompt brand mark (chevron + underscore)
   Source: Figma frames "10x Terminal thin / light / regular / bold"
   Renders 4 weight variants via stroke-width. */

.logo-10x-terminal {
  display: inline-block;
  line-height: 0;
}

.logo-10x-terminal svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* ---- Decorative watermark layer (home + course-overview) ----
   Positioned absolutely as a faint background element, anchored to the
   right side of the viewport behind the nav drawer area on desktop. */

/* Anchored to the visual right of the viewport (= inline-start in this RTL
   layout), behind the nav menu area. */
.logo-10x-terminal-watermark {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 38vw;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.075;
  transform: translate(-6%, -4%);
  filter: blur(0.2px);
}

.logo-10x-terminal-watermark .logo-10x-terminal,
.logo-10x-terminal-watermark .logo-10x-terminal svg {
  width: 100%;
  height: 100%;
}

/* A subtler, smaller version anchored mid-page (used for the course-intro
   "what is 10x?" section to add depth without competing with the heading). */
.logo-10x-terminal-watermark--mid {
  top: 6%;
  width: 32vw;
  max-width: 560px;
  opacity: 0.085;
  transform: translate(-6%, 0);
}

/* Mirror anchor: pinned to the inline-end edge (visual left in RTL).
   Use as the counterweight when the default (--start corner, visual right)
   is already occupied or to balance a right-floating element such as the
   lecturer portrait. */
.logo-10x-terminal-watermark--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translate(6%, -4%);
}

/* Centered behind the headline of a narrow / centered hero. Anchors to
   the visual center of the section so the mark sits as a faint optical
   weight behind the title rather than at a corner. Use for hero blocks
   whose content is centered and have no floating element to balance. */
.logo-10x-terminal-watermark--center {
  inset-inline-start: 50%;
  top: 50%;
  width: min(520px, 70vw);
  aspect-ratio: 1 / 1;
  max-width: none;
  opacity: 0.055;
  transform: translate(50%, -50%);
}

/* Tablet variants */
@media (max-width: 1024px) {
  .logo-10x-terminal-watermark--end {
    transform: translate(10%, -6%);
  }
  .logo-10x-terminal-watermark--center {
    width: min(440px, 72vw);
    opacity: 0.05;
  }
}

/* Mobile variants */
@media (max-width: 768px) {
  .logo-10x-terminal-watermark--end {
    transform: translate(15%, -8%);
  }
  .logo-10x-terminal-watermark--center {
    width: min(320px, 78vw);
    opacity: 0.045;
  }
}

/* Tablet: shift toward top-right corner (visual), slightly smaller */
@media (max-width: 1024px) {
  .logo-10x-terminal-watermark {
    width: 46vw;
    max-width: 440px;
    opacity: 0.06;
    transform: translate(-10%, -6%);
  }
  .logo-10x-terminal-watermark--mid {
    width: 40vw;
    max-width: 360px;
    opacity: 0.06;
    transform: translate(-10%, 0);
  }
}

/* Mobile: tucked into the top-right corner (visual), very faint */
@media (max-width: 768px) {
  .logo-10x-terminal-watermark {
    width: 62vw;
    max-width: 320px;
    opacity: 0.05;
    transform: translate(-15%, -8%);
  }
  .logo-10x-terminal-watermark--mid {
    width: 55vw;
    max-width: 260px;
    opacity: 0.05;
    transform: translate(-15%, 0);
  }
}