/* =====================================================================
   STYLES.CSS — how the website LOOKS
   ---------------------------------------------------------------------
   This file controls colors, fonts, spacing, layout and animations.
   You rarely need to touch it to change text or images (that's in
   index.html). The most useful part to edit is SECTION 1: COLORS.

   Table of contents (search for the number to jump there):
     1. COLORS (light + dark mode)
     2. SIZES, CORNERS, SHADOWS & ANIMATION SPEED
     3. PAGE BASICS (font, background)
     4. PAGE LAYOUT (the centered column)
     5. TEXT STYLES (titles, body text, small text)
     6. TOP NAVIGATION
     7. INTRO (avatar, name, bio, buttons)
     8. IMAGE SETS (portfolio gallery, photo grids)
     9. SECTION HEADERS
    10. RECENT COLLABORATIONS LIST
    11. TESTIMONIALS (Founder's Wall)
    12. PROJECT CARDS
    13. FOOTER LINKS & DARK MODE SWITCH
    14. CLOCKS (time zones)
    15. ANIMATIONS (page load + scroll + hover)
    16. ACCESSIBILITY (reduced motion)
    17. IMAGE EXPAND (click an image to see it big)
    18. LOGO CLOUDS (moving company logos)
   ===================================================================== */


/* =====================================================================
   1. COLORS
   Change a hex value here and it updates everywhere on the site.
   These match the shadcn/ui "neutral" palette from the Figma file.
   ===================================================================== */
:root {
  --bg: #fafafa;          /* page background */
  --fg: #0a0a0a;          /* main text (names, titles) */
  --muted-fg: #737373;    /* grey text (descriptions, years) */
  --muted: #f5f5f5;       /* light grey fill (hover states, image placeholders) */
  --primary: #171717;     /* dark button background */
  --primary-fg: #fafafa;  /* text on the dark button */
  --input: #e5e5e5;       /* dark mode switch when OFF */
  --thumb: #ffffff;       /* the round knob of the switch */
  --ring: #a3a3a3;        /* keyboard focus outline */
  --hairline: rgba(0, 0, 0, .08); /* very faint outline colour */
  color-scheme: light;
}

/* Dark mode colors — used when the visitor's computer is in dark mode
   (unless they switched to light with the toggle). Keep these two
   blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171717; --fg: #fafafa; --muted-fg: #a3a3a3; --muted: #262626;
    --primary: #e5e5e5; --primary-fg: #171717; --input: rgba(255,255,255,.15);
    --thumb: #fafafa; --ring: #737373; --hairline: rgba(255,255,255,.1);
    color-scheme: dark;
  }
}
/* Dark mode colors — used when the visitor turns ON the Dark Mode switch */
:root[data-theme="dark"] {
  --bg: #171717; --fg: #fafafa; --muted-fg: #a3a3a3; --muted: #262626;
  --primary: #e5e5e5; --primary-fg: #171717; --input: rgba(255,255,255,.15);
  --thumb: #fafafa; --ring: #737373; --hairline: rgba(255,255,255,.1);
  color-scheme: dark;
}


/* =====================================================================
   2. SIZES, CORNERS, SHADOWS & ANIMATION SPEED
   ===================================================================== */
:root {
  --content-width: 576px;   /* width of the main column on desktop */

  --radius-md: 8px;         /* small rounded corners */
  --radius-lg: 10px;        /* image corners */
  --radius-xl: 14px;        /* avatar corners */

  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Blur strengths (same values as Tailwind's blur scale) */
  --blur-xs: 4px;           /* used behind the top menu */
  --blur-sm: 8px;
  --blur-md: 12px;

  /* Animation timing. Bigger numbers = slower. */
  --dur-fast: 200ms;        /* when a button is pressed */
  --dur: 320ms;             /* hover fades */
  --dur-slow: 720ms;        /* things appearing while scrolling */
  --ease-out: cubic-bezier(.4, 0, .2, 1);       /* smooth hover curve */
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);  /* soft "settle in" curve */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}


/* =====================================================================
   3. PAGE BASICS
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Keeps content clear of the home bar on phones
     (the top menu handles the notch at the top itself) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* scroll-padding-top = how far below the pinned menu a section lands
   when you click a menu link */
html { scroll-behavior: smooth; scroll-padding-top: calc(108px + env(safe-area-inset-top, 0px)); }
@media (max-width: 480px) {
  html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* Font: Inter (loaded in index.html), with system fonts as backup */
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }


/* =====================================================================
   4. PAGE LAYOUT
   One centered column. 96px gap between the menu and the content.
   ===================================================================== */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;                 /* space between the menu bar and the content */
  padding: 0 16px 48px;      /* top (the menu bar adds its own), sides, bottom */
}
.col { width: 100%; max-width: var(--content-width); min-width: 0; }
.content { display: flex; flex-direction: column; gap: 56px; }  /* gap between sections */

/* Helpers for vertical stacks. "g4" = 16px gap, "g8" = 32px gap, etc. */
.stack { display: flex; flex-direction: column; }
.g4 { gap: 16px; } .g5 { gap: 20px; } .g6 { gap: 24px; } .g7 { gap: 28px; }
.g8 { gap: 32px; } .g10 { gap: 40px; } .g12 { gap: 48px; }


/* =====================================================================
   5. TEXT STYLES
   ===================================================================== */
.t-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); margin: 0; } /* bold-ish small title */
.t-body  { font-size: 14px; line-height: 24px; color: var(--muted-fg); }                       /* grey paragraph */
.t-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted-fg); margin: 0; } /* grey label */
.t-xs    { font-size: 12px; line-height: 16px; color: var(--muted-fg); }                       /* small caption */
.t-h2    { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--fg); margin: 0; } /* section heading */
.t-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }          /* links inside paragraphs */
strong { font-weight: 500; }


/* =====================================================================
   6. TOP NAVIGATION — frosted-glass pill pinned to the top of the screen
   Desktop: 608px wide, 32px from the top, 14px links.
   Phones (under 480px): 10px from the screen edges, 12px from the top, 12px links,
   and the "Home" link is hidden (the photo does the same job).
   ===================================================================== */
:root {
  --nav-glass: rgba(255, 255, 255, .8);         /* see-through white fill (80%) */
  --nav-glass-border: rgba(255, 255, 255, .5);  /* thin edge of the pill */
}
:root[data-theme="dark"] {
  --nav-glass: rgba(23, 23, 23, .8);
  --nav-glass-border: rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-glass: rgba(23, 23, 23, .8);
    --nav-glass-border: rgba(255, 255, 255, .08);
  }
}

/* The strip that sticks to the top while you scroll */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: calc(32px + env(safe-area-inset-top, 0px));
  pointer-events: none;            /* clicks pass through the empty area… */
}
/* The pill itself */
.nav {
  pointer-events: auto;            /* …but the pill is clickable */
  width: 100%;
  max-width: 608px;
  min-width: 288px;
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--nav-glass);
  border: .5px solid var(--nav-glass-border);
  border-radius: 9999px;
  /* Blurs whatever scrolls behind the menu (4px, as in Figma).
     Use --blur-sm / --blur-md (section 2) for a stronger frosted look. */
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
}
/* Small photo = back-to-top button */
.nav-avatar {
  width: 20px; height: 20px; flex: none; overflow: hidden;
  border-radius: var(--radius-xl);
  border: .5px solid var(--nav-glass-border);
  box-shadow: var(--shadow-md);
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-avatar:hover { transform: scale(1.08); }
.nav-avatar:active { transform: scale(.94); }

.nav-links { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 20px; }
.nav-links a {
  font-size: 14px; line-height: 20px;
  color: var(--muted-fg);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
}
.nav-links a:hover { color: var(--fg); }

@media (max-width: 480px) {
  /* 12px from the top and 10px from each screen edge */
  .nav-bar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    width: calc(100% + 12px);     /* page has 16px side padding; reach out to 10px */
    margin: 0 -6px;
  }
  .nav { gap: 18px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; line-height: 1; }
  .nav-home { display: none; }
}

/* =====================================================================
   7. INTRO (avatar, name, bio, buttons)
   ===================================================================== */
.avatar {
  width: 48px; height: 48px; flex: none; overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--primary-fg);
  box-shadow: var(--shadow-md);
  background: var(--muted);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who { display: flex; flex-direction: column; gap: 6px; }
.who .role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bio { color: var(--fg); }

/* Buttons: pill-shaped. "btn-primary" = dark, "btn-ghost" = transparent */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 8px 12px 8px 14px;
  border-radius: 9999px;
  font-size: 12px; line-height: 16px;
  text-decoration: none; white-space: nowrap;
}
.btn svg { width: 12px; height: 12px; flex: none; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 0 0 0 transparent; }
.btn-primary svg path { stroke: var(--primary-fg); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--muted); }


/* =====================================================================
   8. IMAGE SETS
   .gallery  = the big portfolio column under the intro
   .grid-2   = 2 images side by side
   .grid-4   = 4 images side by side (becomes 2 on phones)
   .shot     = a portfolio screenshot (always 4:3)
   .photo    = a photo; add r43 (4:3), r45 (4:5) or r916 (9:16) for its shape
   ===================================================================== */
.gallery { display: flex; flex-direction: column; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.photos { margin: 16px 0; }

.shot, .photo {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--muted);    /* shows while the image loads */
}
.shot img, .photo img { width: 100%; height: 100%; object-fit: cover; }
.shot { aspect-ratio: 4 / 3; }
.photo.r43 { aspect-ratio: 4 / 3; }
.photo.r45 { aspect-ratio: 4 / 5; }
.photo.r916 { aspect-ratio: 9 / 16; }

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =====================================================================
   9. SECTION HEADERS (the 20px heading + grey line under it)
   ===================================================================== */
.section-head { display: flex; flex-direction: column; gap: 20px; padding: 40px 0 16px; }


/* =====================================================================
   10. RECENT COLLABORATIONS LIST (year — company — type of work)
   ===================================================================== */
.timeline { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.timeline li { display: flex; align-items: center; justify-content: space-between; }
.timeline .yr { width: 96px; flex: none; color: var(--muted-fg); }
.timeline .co { flex: 1 1 0; min-width: 0; color: var(--fg); }
.timeline .scope { width: 144px; flex: none; text-align: right; color: var(--muted-fg); }


/* =====================================================================
   11. TESTIMONIALS (Founder's Wall)
   ===================================================================== */
.quote { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.quote blockquote { margin: 0; }
.quote figcaption { display: flex; flex-direction: column; gap: 6px; }


/* =====================================================================
   12. PROJECT CARDS (clickable boxes with a cover image)
   Matches the Figma "Image Card Link":
   - Normal: no background, no border, 14px corners, 16px padding
   - Hover:  white box with a thin grey border and rounder 20px corners
   - Cover image: 544 x 286 shape, 8px corners, cropped to fill
   ===================================================================== */
:root {
  --card-bg: transparent;          /* card colour (normal) */
  --card-bg-hover: #ffffff;        /* card colour (hover) */
  --card-border-hover: #e5e5e5;    /* thin border (hover) */
  --card-radius: 14px;             /* corners (normal) */
  --card-radius-hover: 20px;       /* corners (hover) */
}
:root[data-theme="dark"] { --card-bg-hover: #0a0a0a; --card-border-hover: #262626; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --card-bg-hover: #0a0a0a; --card-border-hover: #262626; }
}

.card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 16px;
  background: var(--card-bg);
  /* The border is always there but invisible, so nothing shifts on hover */
  border: .5px solid transparent;
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
}
.card:hover {
  background: var(--card-bg-hover);
  border-color: var(--card-border-hover);
  border-radius: var(--card-radius-hover);
}
/* Title + description area inside the card */
.card > .stack { padding: 8px; gap: 16px; }

/* Cover image */
.card-img {
  aspect-ratio: 544 / 286;    /* same shape as the Figma image holder */
  overflow: hidden;
  border-radius: 8px;
  background: var(--muted);   /* shows while the image loads */
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }


/* =====================================================================
   13. FOOTER LINKS & DARK MODE SWITCH
   ===================================================================== */
.links { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.links a {
  font-size: 14px; line-height: 20px;
  color: var(--muted-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.links a:hover { color: var(--fg); }

/* Dark Mode switch (same design as shadcn/ui Switch) */
.switch {
  display: inline-flex; gap: 12px; align-items: flex-start;
  width: 234px; max-width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fg); font: inherit; text-align: left;
}
.switch .track {
  width: 36px; height: 20px; padding: 0 2px; flex: none;
  display: flex; align-items: center;
  border-radius: 9999px; border: 2px solid transparent;
  background: var(--input);
}
.switch .thumb {
  width: 16px; height: 16px; border-radius: 9999px;
  background: var(--thumb); box-shadow: var(--shadow-lg);
  transform: translateX(-2px);
}
.switch[aria-checked="true"] .track { background: var(--primary); }
.switch[aria-checked="true"] .thumb { transform: translateX(14px); background: var(--primary-fg); }
.switch .lbl { font-size: 14px; line-height: 1; padding-top: 3px; }
/* Compact switch (in the top menu): just the toggle, no label */
.switch-compact { width: auto; flex: none; }


/* =====================================================================
   14. CLOCKS (time zones at the bottom)
   ===================================================================== */
.tz { display: flex; flex-direction: column; gap: 16px; }
.tz div { display: flex; justify-content: space-between; gap: 16px; }
.tz .city { color: var(--muted-fg); }
.tz time { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }


/* =====================================================================
   15. ANIMATIONS
   ===================================================================== */

/* 15a. Hover & press — every link, button, card and the switch fade
        smoothly between states instead of changing instantly. */
a, button, .btn, .card, .switch, .switch .track, .switch .thumb {
  transition-property: color, background-color, border-color, border-radius, text-decoration-color,
                       text-underline-offset, opacity, box-shadow, transform, filter, width;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease-out);
}
.links a, .t-body a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.links a:hover, .t-body a:hover { text-decoration-color: currentColor; text-underline-offset: 3px; }
.nav-links a:active, .links a:active { opacity: .6; transition-duration: var(--dur-fast); }

.btn svg { transition: transform var(--dur) var(--ease-out); }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover svg { transform: translateX(2px); }   /* arrow nudges right */
.btn-ghost:hover svg { transform: rotate(-20deg); }      /* Dribbble ball tilts */
.btn:active { transition-duration: var(--dur-fast); }
.btn:active { transform: translateY(0) scale(.97); }


.switch:hover .track { filter: brightness(.96); }
:root[data-theme="dark"] .switch:hover .track { filter: brightness(1.15); }
.switch:active .thumb { width: 19px; }
.switch[aria-checked="true"]:active .thumb { transform: translateX(11px); }

/* 15b. Light/dark cross-fade when the switch is used */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-in-out);
}

/* 15c. Page load — the menu and intro fade up one after another */
@keyframes soft-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.js .nav-bar,
.js #home > .stack > *,
.js .hero-in { animation: soft-in 900ms var(--ease-reveal) both; }
/* The menu fades in without blur and lets go of the animation when done:
   a filter left on the menu's wrapper would stop the glass from blurring
   the page behind it. */
@keyframes soft-in-nav {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.js .nav-bar { animation: soft-in-nav 900ms var(--ease-reveal) 60ms backwards; }
.js #home > .stack:first-child > :nth-child(1) { animation-delay: 160ms; }
.js #home > .stack:first-child > :nth-child(2) { animation-delay: 240ms; }
.js #home > .stack:last-child  > :nth-child(1) { animation-delay: 320ms; }
.js #home > .stack:last-child  > :nth-child(2) { animation-delay: 400ms; }
.js .hero-in { animation-delay: 480ms; }

/* 15d. Scrolling — content fades up softly as it comes into view.
        js/main.js adds the "reveal" class, then "in" when visible. */
.js .reveal {
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal),
              filter var(--dur-slow) var(--ease-reveal);
  transition-delay: var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; filter: none; }
/* Cards and the switch keep their hover fades while appearing */
.js .card.reveal, .js .switch.reveal {
  transition-property: opacity, transform, filter, background-color, border-radius, box-shadow;
  transition-duration: var(--dur-slow), var(--dur-slow), var(--dur-slow), var(--dur), var(--dur), var(--dur);
  transition-timing-function: var(--ease-reveal), var(--ease-reveal), var(--ease-reveal), var(--ease-out), var(--ease-out), var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms;
}


/* =====================================================================
   16. ACCESSIBILITY — visitors who turned on "Reduce motion" in their
       system settings get the site without movement.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .nav-bar, .js #home > .stack > *, .js .hero-in { animation: none; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn:hover, .btn:active, .btn:hover svg { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* =====================================================================
   17. IMAGE EXPAND — click a portfolio screenshot or photo to open it
       big in the middle of the screen; click again (or press Esc) to
       close. js/main.js (section 4) does the opening and closing.
       Desktop: up to 1000px wide.  Phones: 16px from the screen edges.
   ===================================================================== */
:root {
  --lightbox-bg: rgba(255, 255, 255, .5);   /* see-through layer behind the big image */
  --lightbox-radius: 12px;                  /* corners of the big image (8px on phones, below) */
  --lightbox-max-width: 1000px;
}
:root[data-theme="dark"] { --lightbox-bg: rgba(23, 23, 23, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lightbox-bg: rgba(23, 23, 23, .5); }
}

/* Images that can be opened show the hand (pointer) cursor */
.shot img, .photo img { cursor: pointer; }
.shot:focus-visible, .photo:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* The full-screen layer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;                  /* above everything, including the menu */
  display: grid;
  place-items: center;
  padding: 16px;
  cursor: pointer;               /* hand cursor while an image is open */
}
.lightbox[hidden] { display: none; }

/* Frosted background: blurs the whole page behind the image */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lightbox-bg);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.lightbox.is-open .lightbox-backdrop { opacity: 1; }

/* The big image */
.lightbox-img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: min(var(--lightbox-max-width), 100%);
  max-height: calc(100dvh - 160px);
  border-radius: var(--lightbox-radius);
  transform-origin: top left;
  will-change: transform;
}

@media (max-width: 480px) {
  :root { --lightbox-radius: 8px; }
  .lightbox-img { max-height: calc(100dvh - 96px); }
}

/* Stop the page from scrolling while an image is open */
html.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox-backdrop { transition-duration: 1ms; }
}


/* =====================================================================
   18. LOGO CLOUDS — rows of company logos that drift slowly sideways,
       fading out at the left and right edges.
       Top cloud moves right → left, bottom cloud moves left → right.
       js/main.js (section 5) copies the logo list once so the loop
       never shows a gap. The logos keep moving, even on hover.
   ===================================================================== */
:root {
  --logo-speed: 60s;       /* time for one full loop: bigger = slower */
  --logo-gap: 36px;        /* space between logos */
  --logo-fade: 72px;       /* width of the fade at each edge */
}

.logo-cloud {
  position: relative;
  overflow: hidden;
  /* Fade at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-left var(--logo-speed) linear infinite;
}
.logo-cloud[data-direction="right"] .logo-track { animation-name: logo-right; }

/* Extra space above the bottom cloud (under the Founder's Wall) */
.logo-cloud--bottom { padding-top: 20px; }

.logo-group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: 0 var(--logo-gap) 0 0;   /* keeps the gap where the loop joins */
  margin: 0;
  list-style: none;
  flex: none;
}
.logo-group img { display: block; height: 34px; width: auto; max-width: none; }

/* Logos are grey (#737373); brighten them a little on dark backgrounds */
:root[data-theme="dark"] .logo-group img { filter: brightness(1.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-group img { filter: brightness(1.45); }
}

@keyframes logo-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes logo-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Top cloud fades in with the intro on page load */
.js .logo-cloud--top { animation: soft-in 900ms var(--ease-reveal) 440ms both; }

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .js .logo-cloud--top { animation: none; }
}