/* Fractal Semiconductor — single page site
   Black page, Questrial everywhere, white body copy,
   one gradient (taken from the logo) for the wordmark and every header. */

:root {
  /* The logo's metallic ramp, sampled from the artwork. Runs left to right,
     matching the direction of the gradient in the logo mark itself. */
  --logo-gradient: linear-gradient(
    90deg,
    #858489 0%,
    #e7e4ef 25%,
    #858489 50%,
    #b9b9b9 75%,
    #858489 100%
  );
  /* Lightest and darkest stops, for fallbacks. #858489 on #000 is 5.66:1. */
  --logo-gradient-fallback: #c9c8cf;

  --bg: #000000;
  --fg: #ffffff;

  --measure: 640px;          /* text column cap */
  --section-gap: 80px;       /* desktop spacing between sections */
  --hero-gap: 160px;         /* logo to first section, kept roomier */
  --page-gutter: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Very faint dot grid across the whole page. */
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--fg);
  font-family: Questrial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep the black edge to edge even when the page is shorter than the viewport. */
html, body { min-height: 100%; }

a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 14px;
  background: #ffffff;
  color: #000000;
  font-size: 14px;
}

/* ---------- Gradient text ----------------------------------------------- */

/* Solid fallback first; browsers that can clip a background to the glyphs
   get the real gradient. Both prefixed and unprefixed for Safari. */
.gradient { color: var(--logo-gradient-fallback); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient {
    background-image: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- Outlined button -------------------------------------------- */

/* Used for both CONTACT US links: thin outline, no fill, small arrow. */
.outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.outline-btn:hover,
.outline-btn:focus-visible { text-decoration: none; }
.outline-btn .arrow {
  letter-spacing: 0;
  transition: transform 0.2s ease;
}
.outline-btn:hover .arrow,
.outline-btn:focus-visible .arrow { transform: translateX(3px); }

/* ---------- Top bar ------------------------------------------------------ */

.topbar {
  padding: 28px var(--page-gutter) 0;
}
.topbar nav {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}
.topbar a {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.topbar a:hover,
.topbar a:focus-visible { opacity: 1; }

/* ---------- Layout ------------------------------------------------------- */

main {
  padding: 0 var(--page-gutter);
}

.section,
.hero {
  max-width: var(--measure);
  margin-inline: auto;
}

.section { margin-top: var(--section-gap); }
.hero + .section { margin-top: var(--hero-gap); }

/* All caps like the wordmark, but well below its 40px so the headings read
   as a step down from the logo rather than competing with it. */
.section h2 {
  margin: 0 0 28px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section p {
  margin: 0 0 20px;
}
.section p:last-child { margin-bottom: 0; }

.section a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease;
}
.section a:hover,
.section a:focus-visible { text-decoration-color: #ffffff; }

/* ---------- Hero --------------------------------------------------------- */

/* The hero sits in a band near the top rather than filling the first
   screen, so the content below it starts in view. */
.hero {
  padding: 120px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ratios measured from the official lockup artwork, expressed against the
     wordmark's own font size so the whole unit scales together:
       mark height = 2.10 x cap height, cap height ~ 0.70em  -> 1.47em
       gap         = 1.25 x cap height                       -> 0.875em   */
  gap: 0.875em;
  /* The wordmark size; everything else keys off it. Side by side the lockup
     measures 18.455em (mark 1.4275 + gap 0.875 + words 16.152, as rendered in
     Questrial), so below ~786px it scales down rather than overflowing. */
  font-size: min(40px, calc((100vw - 2 * var(--page-gutter)) / 18.455));
}

.lockup-mark {
  height: 1.47em;
  width: auto;
  flex: none;
  display: block;
}

.lockup-word {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* letter-spacing adds a trailing gap after the last glyph; pull it back so
     the lockup stays optically centred. */
  margin-right: -0.15em;
  white-space: nowrap;
}


/* ---------- About us: alumni marquee ------------------------------------ */

.alumni {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
}

/* Styled like a small heading: caps, logo gradient, and the scroll shine. */
.section .alumni-label {
  margin: 0;
  flex: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The two identical tracks sit side by side and both slide left by their own
   width, so the second takes the first's place exactly as it scrolls away.
   Edges fade out into the page. */
.marquee {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* marquee.js holds the loop still until the strip has been seen, so the
   first logos (Micron, SpaceX) are what the viewer meets. */
.marquee[data-waiting] .marquee-track { animation-play-state: paused; }

/* Spacing lives on each item, not as a flex gap, so a track's width is
   exactly one repeat and the loop has no jump. Splitting it either side
   also brings the first logo in clear of the left fade. */
.marquee-track li {
  flex: none;
  padding: 0 32px;
}

.marquee-track img {
  display: block;
  width: auto;
  height: 30px;
}
/* Balance the logos by eye: wide, thin marks get less height, stacked ones more. */
.marquee-track .logo-bcg              { height: 34px; }
.marquee-track .logo-georgia-tech-ece { height: 34px; }
.marquee-track .logo-spacex           { height: 17px; }
.marquee-track .logo-micron           { height: 24px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
  margin-top: var(--section-gap);
  padding: 0 var(--page-gutter) 64px;
}
.footer p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  opacity: 0.6;
}
.footer a {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Motion ------------------------------------------------------- */

.reveal {
  animation: fade-in 0.8s ease both;
}
.hero.reveal  { animation-delay: 0.05s; }
.section:nth-of-type(2).reveal { animation-delay: 0.1s; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Phones ------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --section-gap: 56px;
    --hero-gap: 96px;
    --page-gutter: 20px;
  }

  body { font-size: 16px; }

  /* Keep the lockup on one line, mark beside the words as on desktop. It is
     18.455em across; sizing it to 80% of the text column leaves clear space
     either side instead of running edge to edge. */
  .lockup {
    font-size: calc((100vw - 2 * var(--page-gutter)) * 0.8 / 18.455);
  }

  /* Smaller CONTACT US buttons, so the header one doesn't crowd the top. */
  .topbar { padding-top: 20px; }
  .topbar .outline-btn,
  .footer .outline-btn {
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Footer: copyright above the button, both centred, each on one line. */
  .footer p {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
  }

  .section h2 { font-size: 17px; }
  .hero { padding-top: 72px; }

  /* Label above the logos rather than beside them. */
  .alumni {
    flex-direction: column;
    gap: 20px;
  }
  .marquee { width: 100%; }
}