/* 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(-2%, 5%);
}

/* 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.

   inset-inline-start: 50% in RTL pins the box's RIGHT edge to the section's
   horizontal centre, so translate(50%, -50%) is what actually centres it on
   both axes. It used to read translate(160%, 0%), which pushed the mark far
   off the inline-end side - on a 1440px desktop it hung 110px past the
   viewport, and on phones it sat half off the screen. */
.logo-10x-terminal-watermark--center {
  inset-inline-start: 50%;
  top: 50%;
  width: min(520px, 70vw);
  aspect-ratio: 1 / 1;
  max-width: none;
  /* Fainter than the corner variants on purpose: this one sits BEHIND the
     headline rather than in an empty margin, so anything heavier reads as a
     stray graphic crossing the text instead of as texture. */
  opacity: 0.05;
  transform: translate(50%, -50%);
}

/* ---- Responsive ----------------------------------------------------------
   ORDER MATTERS, and it is the whole reason these blocks are merged rather
   than split per variant. Every selector here is a single class, so they all
   carry the same specificity and the LAST one wins. When the generic
   `.logo-10x-terminal-watermark` rules sat in their own media block BELOW the
   `--center` / `--end` ones, they silently overwrote those variants' width,
   opacity and transform - which is how the centred mark ended up wearing the
   corner mark's positioning on every screen under 1024px.
   Keep the generic rule first and each variant after it, in one block per
   breakpoint. */

/* 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);
  }

  .logo-10x-terminal-watermark--end {
    transform: translate(10%, -6%);
  }

  .logo-10x-terminal-watermark--center {
    width: min(440px, 72vw);
    max-width: none;
    opacity: 0.042;
    transform: translate(50%, -50%);
  }
}

/* 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);
  }

  .logo-10x-terminal-watermark--end {
    transform: translate(15%, -8%);
  }

  .logo-10x-terminal-watermark--center {
    width: min(320px, 78vw);
    max-width: none;
    opacity: 0.038;
    transform: translate(50%, -50%);
  }
}