/* ===========================================================================
   DesiCrew rebrand — shared page-scoped additions
   ---------------------------------------------------------------------------
   Loaded from src/html/landing-2.head.html. Only adds NEW .dc-* classes; it
   never overrides the global tokens in desicrew-theme.css, so other pages are
   untouched. Brand: signature gradient (Mint -> Tufts -> Persian), Oxford-blue
   dark sections, flat pixel-grid motif, Space Mono accents.
   =========================================================================== */

:root {
  --dc-gradient: linear-gradient(90deg, #22d2a2 0%, #1892e5 50%, #0b44cf 100%);
}

/* Signature gradient fills (used sparingly: hero CTA, final CTA) */
.dc-gradient { background-image: var(--dc-gradient); }

/* Gradient text — for the big Wall-of-Fame numbers + the closing tagline */
.dc-gradient-text {
  background-image: var(--dc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Light text on the Oxford-blue dark sections (token greys read too dark) */
.dc-on-dark      { color: rgba(255, 255, 255, 0.74); }
.dc-on-dark-soft { color: rgba(255, 255, 255, 0.55); }

/* Primary CTA — gradient pill, regular weight (brand: never bold) */
.dc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 0.375rem;
  color: #fff;
  font-family: var(--font-main);
  line-height: 1;
  white-space: nowrap;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.dc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dc-cta svg { width: 1em; height: 1em; }

/* Pixel-grid motif (replaces the legacy hero Lottie) */
.dc-pixelgrid { pointer-events: none; user-select: none; }

/* Big Wall-of-Fame stat numbers */
.dc-stat {
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* ---- Trusted-by logo marquee (self-contained, no JS) ---- */
.dc-marquee {
  width: 100%;
  overflow: hidden;
  /* The fade has to be about one logo wide or a mark is still legible where the mask
     ends, which reads as a wordmark chopped mid-letter ("...ATION", "P M") rather than
     one sliding out of view. Logo slots cap at 188px (.dc-cert-logo img), so the fade
     caps there too. The old flat 6% was ~99px on a laptop — half a logo — and ~20px on
     a phone. Capped below by 64px, because on a 325px-wide rail a full-logo fade on
     both sides would leave almost no clear window; the phone logos are shrunk to suit
     (see .dc-cert-logo img below). */
  --dc-fade: clamp(64px, 22%, 188px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--dc-fade), #000 calc(100% - var(--dc-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--dc-fade), #000 calc(100% - var(--dc-fade)), transparent);
}
.dc-marquee__track {
  display: flex;
  align-items: center;
  /* Spacing is a TRAILING MARGIN on each item, deliberately not `gap`. The loop works
     by translating -50% across two identical sets, which only lands seamlessly if half
     the track equals exactly one period. With `gap` the track is Σw + 19g wide (20
     items, 19 gaps) while a period is Σw/2 + 10g — so -50% undershot by half a gap and
     the marquee visibly jumped on every cycle. A trailing margin on every item makes
     the track Σw + 20g, and half of that is exactly one period. */
  width: max-content;
  animation: dc-scroll 70s linear infinite;
  will-change: transform;   /* promote to a compositor layer up-front so the
                               scroll is smooth from load, not only after a hover */
}
.dc-marquee__track > * { margin-right: 3.5rem; }
.dc-marquee:hover .dc-marquee__track { animation-play-state: paused; }
/* Explicit pause (the .dc-rail__toggle button) — outlives the pointer, unlike :hover. */
.dc-marquee.is-paused .dc-marquee__track { animation-play-state: paused; }
@keyframes dc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Rail + its pause control (WCAG 2.2.2) ---- */
.dc-rail { display: flex; flex-direction: column; gap: 0.5rem; }
.dc-rail__toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 44px floor: this is a control people are meant to hit in a hurry, and at its
     natural 25px it was the smallest target on the page. */
  min-height: 44px;
  padding: 0.375rem 1rem;
  border: 1px solid var(--color-border-primary, #e3e5e8);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary, #4a5568);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.dc-rail__toggle:hover { color: var(--color-text-primary, #0d1117); border-color: currentColor; }
.dc-rail__toggle:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
/* Both glyphs are drawn from borders on one 10px box, so the button never reflows
   between states. Pause = two bars; play = a right-pointing triangle. */
.dc-rail__icon { width: 10px; height: 10px; box-sizing: border-box; }
.dc-rail__toggle[aria-label^="Pause"] .dc-rail__icon {
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.dc-rail__toggle[aria-label^="Play"] .dc-rail__icon {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
  margin-right: 1px; /* keeps the 10px optical slot the pause bars occupy */
}
.dc-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
}
.dc-logo img {
  max-height: 96px;
  max-width: 360px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.dc-logo img:hover { filter: grayscale(0); opacity: 1; }
/* Every trusted-by logo is a 300×300 square, so pin the marquee slots to a fixed
   96px box. This makes the track width deterministic at first layout — it does NOT
   depend on the lazy images having downloaded. Otherwise the composited
   translateX(-50%) (see will-change above) resolves against a collapsed track (each
   unloaded <img> is 0-wide) and the scroll stays stuck-slow until a hover
   re-commits the animation against the real, wider width. Visually a no-op. */
.dc-marquee__track .dc-logo img { width: 96px; height: 96px; }

/* Award logos sit calm + grey, colour on hover */
.dc-award img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.dc-award:hover img { filter: grayscale(0); opacity: 1; }

/* ---- Dark Oxford-blue sections (hero + final CTA): explicit, no token gamble ---- */
.dc-dark { background-color: #011c46; color: #fff; }
.dc-dark .dc-heading { color: #fff; }
.dc-hero { min-height: 78vh; }
.dc-pixelgrid--hero { width: min(48vw, 560px); height: auto; opacity: 0.95; }
.dc-pixelgrid--cta  { width: min(42vw, 480px); height: auto; opacity: 0.9; }

/* ---- 1px-divider grids for the calm light sections ---- */
.dc-cellgrid {
  display: grid;
  gap: 1px;
  background: var(--color-border-primary, #6e84a8);
  border: 1px solid var(--color-border-primary, #6e84a8);
}
.dc-cellgrid > * { background: var(--color-surface-brand-primary, #fbfcfe); }
.dc-statcell { display: flex; flex-direction: column; min-height: 230px; }
.dc-pushdown { margin-top: auto; }

/* ---- Awards: single-line carousel, much larger logos (reuses .dc-marquee) ---- */
/* Same period rule as the cert rail — trailing margin, never `gap` (see above). */
.dc-award-track { animation-duration: 55s; }
.dc-award-track > * { margin-right: 5.5rem; }
.dc-award-logo { height: 116px; }
.dc-award-logo img { max-height: 80px; max-width: 240px; }

/* ---- Certification / recognition / partner carousel: individual marks, single-line
   scroll (reuses .dc-marquee). Full colour (trust seals read best in colour), calm at rest
   with a gentle lift on hover. Width-bounded so wide wordmarks (nasscom) don't dominate. ---- */
/* ~26px/s read as almost static — a logo took ~15s to cross a phone. Roughly
   1.4x quicker, and quicker again on mobile where less of the rail is on screen. */
.dc-cert-track { animation-duration: 42s; }
.dc-cert-track > * { margin-right: 4rem; }
@media (min-width: 768px) { .dc-cert-track > * { margin-right: 5rem; } }
@media (max-width: 767px) { .dc-cert-track { animation-duration: 32s; } }
.dc-cert-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
}
.dc-cert-logo img {
  max-height: 66px;
  max-width: 188px;
  width: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dc-cert-logo img:hover { opacity: 1; transform: scale(1.04); }
/* On a phone the rail is ~325px, so a 188px mark plus a fade at each edge leaves no
   window where it is ever fully opaque — it would ghost the whole way across. Smaller
   marks fit clear of both fades and still read at arm's length. */
@media (max-width: 640px) {
  .dc-cert-logo { height: 92px; }
  .dc-cert-logo img { max-height: 56px; max-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-scroll here — but the rail is overflow:hidden, so stopping it used to
     strand every logo past the first screenful with no way to reach them. Hand control
     to the reader instead. Worth knowing: iOS "Reduce Motion" is commonly switched on,
     and it is the usual reason this rail looks frozen on a phone. */
  .dc-marquee__track { animation: none; }
  .dc-marquee { overflow-x: auto; }
  /* Nothing is moving, so the pause control has nothing to act on. */
  .dc-rail__toggle { display: none; }
  .dc-cta:hover { transform: none; }
}