/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HOME — logo wall (Attio homepage section 2)

   Ported from the section directly after the hero in
   attio-recreation/dist/index.html. Grid, cell height, hairline gaps,
   hover, the corner arrow on linked cells and the mobile cycle are the
   source's, transcribed from its Tailwind utilities and from the
   HomeLogosMobile component in chunks/2shk5swxjbjat.js.

   The marks themselves are this repo's own placeholder wordmarks. The
   source fills these ten slots with the logos of ten real companies and
   links four of them to case studies; on this site that would read as a
   customer claim about businesses that are not Tavvlo customers, so the
   slots carry placeholders until real ones are supplied. Swapping one is a
   single --src / --w / --ar change on its span.

   Scoped under #tvah-logos with a tvahl- prefix so nothing reaches the
   Webflow stylesheet driving the rest of the page.
   ══════════════════════════════════════════════════════════════════════ */

#tvah-logos{
  /* Same token values as the hero, redeclared rather than shared so the two
     sections stay independent of each other's load order. */
  --tvahl-secondary-background:#fafafb;   /* white-200 */
  --tvahl-surface-subtle:#f3f4f6;         /* white-300 */
  --tvahl-subtle-stroke:#e4e7ec;          /* white-500 */
  --tvahl-secondary-foreground:#232529;   /* black-300 */
  --tvahl-tertiary-foreground:#505967;    /* black-600 */
  --tvahl-caption-foreground:#a4adba;     /* black-900 */

  --tvahl-ease-out:cubic-bezier(0,0,0,1);
  --tvahl-ease-reveal:cubic-bezier(0,0,.58,1);

  display:block;
  border-bottom:1px solid var(--tvahl-subtle-stroke);
  background-color:var(--tvahl-secondary-background);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#tvah-logos *,#tvah-logos *::before,#tvah-logos *::after{box-sizing:border-box}
#tvah-logos a{color:inherit;text-decoration:none}
#tvah-logos svg{display:block}

/* ── container ─────────────────────────────────────────────────────
   The source wraps the grid in its .container but sets display:contents
   below lg, so the width cap and gutters only exist from 992px up. */
#tvah-logos .tvahl-container{display:contents}
@media (min-width:992px){
  #tvah-logos .tvahl-container{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:1440px;
    padding-inline:24px;
    margin-inline:auto;
  }
}
#tvah-logos .tvahl-frame{display:flex;width:100%;flex-direction:column}

/* ── desktop grid (md and up) ──────────────────────────────────────
   The 1px gap is not a border: the grid's own background shows through
   between cells, so every seam is exactly one pixel and the outer edge
   stays clean. */
#tvah-logos .tvahl-grid{display:none}
@media (min-width:768px){
  #tvah-logos .tvahl-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1px;
    background-color:var(--tvahl-subtle-stroke);
  }
}
@media (min-width:992px){
  #tvah-logos .tvahl-grid{
    border-left:1px solid var(--tvahl-subtle-stroke);
    border-right:1px solid var(--tvahl-subtle-stroke);
  }
}

#tvah-logos .tvahl-cell{
  position:relative;
  display:flex;
  height:96px;
  align-items:center;
  justify-content:center;
  padding-inline:24px;
  background-color:var(--tvahl-secondary-background);
}
#tvah-logos a.tvahl-cell{
  transition:background-color .2s var(--tvahl-ease-out);
}
#tvah-logos a.tvahl-cell:hover,
#tvah-logos a.tvahl-cell:focus-visible{
  background-color:var(--tvahl-surface-subtle);
  outline:none;
}

/* ── the mark ──────────────────────────────────────────────────────
   Rendered as a mask over a solid fill rather than as an <img>, so every
   logo takes the same single colour no matter what the source file
   contains. Per-mark geometry rides in on --w and --ar.

   mask-image itself stays in the element's style attribute, as it is in the
   source. It cannot move in here via a custom property: a relative url()
   inside a custom property is resolved against the stylesheet that consumes
   it, not the document, so images/x.svg would be fetched from /css/. */
#tvah-logos .tvahl-mark{
  display:block;
  width:var(--w);
  max-width:100%;
  height:auto;
  aspect-ratio:var(--ar);
  background-color:var(--tvahl-secondary-foreground);
  transition:background-color .2s var(--tvahl-ease-out);
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:contain;
          mask-size:contain;
}

/* ── corner arrow on linked cells ─────────────────────────────────── */
#tvah-logos .tvahl-arrow{
  position:absolute;
  top:12px;
  right:12px;
  width:14px;
  height:14px;
  rotate:-45deg;
  color:var(--tvahl-caption-foreground);
  transition:color .2s var(--tvahl-ease-out);
}
#tvah-logos a.tvahl-cell:hover .tvahl-arrow,
#tvah-logos a.tvahl-cell:focus-visible .tvahl-arrow{
  color:var(--tvahl-tertiary-foreground);
}

/* ── mobile grid (below md) ────────────────────────────────────────
   Six slots cycling through the full set every 4.5s. Each cell clips its
   own slot, so a mark can slide in and out without touching its
   neighbours. */
#tvah-logos .tvahl-mobile{display:block}
@media (min-width:768px){ #tvah-logos .tvahl-mobile{display:none} }

#tvah-logos .tvahl-grid-m{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background-color:var(--tvahl-subtle-stroke);
}
#tvah-logos .tvahl-cell-m{
  position:relative;
  display:flex;
  height:96px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-color:var(--tvahl-secondary-background);
}
/* An odd number of marks would leave the final row half empty, and the half
   with no cell in it shows the grid's own background — a grey block. Let a
   lone last cell take the whole row instead. Self-adjusting, so adding a
   sixth mark drops it back to two columns with no edit here. */
#tvah-logos .tvahl-cell-m:last-child:nth-child(odd){grid-column:span 2}
/* Two stacked layers per cell: the outgoing mark is still on its way out
   while the incoming one starts, exactly as the source's AnimatePresence
   keeps both mounted through the swap. */
#tvah-logos .tvahl-slot{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:24px;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
#tvah-logos .tvahl-slot.is-on{opacity:1}
#tvah-logos .tvahl-slot.is-enter{
  animation:tvahl-in .42s var(--tvahl-ease-reveal) var(--din,0s) both;
}
#tvah-logos .tvahl-slot.is-exit{
  animation:tvahl-out .34s var(--tvahl-ease-reveal) var(--d,0s) both;
}
@keyframes tvahl-in{
  from{filter:blur(2px);opacity:0;transform:translateY(18px)}
  to  {filter:blur(0);opacity:1;transform:none}
}
@keyframes tvahl-out{
  from{filter:blur(0);opacity:1;transform:none}
  to  {filter:blur(2px);opacity:0;transform:translateY(-18px)}
}

@media (prefers-reduced-motion:reduce){
  #tvah-logos .tvahl-slot.is-enter,
  #tvah-logos .tvahl-slot.is-exit{animation:none}
  #tvah-logos .tvahl-slot.is-on{opacity:1}
}