/* =========================================================================
   cw-hovers.css — CoreWeave Webflow motion kit — attribute-driven hovers.

   NEW IN 1.1.0. The card/image/button/arrow hover system was originally the
   "build natively in Webflow" path (IX2 + Designer hover states — see
   docs/webflow-guide.md Part B, kept as the future/reference path). This
   module replaces that path with pure CSS keyed off data attributes, so the
   effects only exist where the attributes are set and only on pages that
   load this stylesheet. Nothing here targets a Webflow class — safe to load
   site-wide, inert until opted in.

   ATTRIBUTE API (set in Webflow element settings; value "1" unless noted)
     1.1.5: these selectors still key off attribute presence, but cw-core.js
     now strips any of them whose value is not an enabling one ("1"/"true"
     any case, bare, or a documented variant like zoom="lg") — so a Webflow
     boolean property set to False ("False") no longer switches a card on.
     data-cw-hover-card     on a card/tile/row — corner flattens (4px → 0),
                            1px outset stroke fades in
     data-cw-hover-title    on the headline INSIDE a hover-card — turns
                            brand blue on card hover
     data-cw-zoom           on the image WRAPPER inside a hover-card — the
                            <img> inside zooms 1.04 on card hover;
                            value "lg" zooms 1.05 (resource/post cards)
     data-cw-hover-btn      on a button/link — dark fill hover, .12s linear;
                            value "secondary" = transparent + 1.5px inset ring
     data-cw-hover-arrow    on a circled-arrow WRAPPER (ring div containing
                            the glyph) — ring darkens, glyph scales 1.3 when
                            the nearest [data-cw-hover-card] or the arrow
                            itself is hovered

   Values are the 2026-09-21 spec from the cw-landing prototype:
   hovers .12s linear; corner .512s cubic-bezier(.53,.2,0,1); stroke &
   headline .25s; image zoom 1.2s cubic-bezier(.22,1,.36,1).
   Hovers gate to (hover:hover) and ≥721px, matching the rest of the kit.
   ========================================================================= */

/* resting states (outside the hover gate so first paint is correct) */
[data-cw-hover-card] {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(2, 3, 11, 0);   /* transparent so it interpolates */
  transition: border-radius .512s cubic-bezier(.53, .2, 0, 1),
              box-shadow .25s cubic-bezier(.65, 0, .35, 1);
}
[data-cw-hover-card] [data-cw-hover-title] {
  transition: color .25s cubic-bezier(.53, .2, 0, 1);
}
[data-cw-zoom] { overflow: hidden; }
[data-cw-zoom] img {
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
[data-cw-hover-btn] {
  transition: background-color .12s linear, color .12s linear,
              box-shadow .12s linear, transform .12s linear;
}
[data-cw-hover-arrow] {
  transition: border-color .12s linear;
}
[data-cw-hover-arrow] img,
[data-cw-hover-arrow] svg {
  transition: transform .12s linear;
}

@media (hover: hover) and (min-width: 721px) {
  /* card: corner flattens, hairline stroke arrives */
  [data-cw-hover-card]:hover,
  [data-cw-hover-card]:focus-visible {
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(2, 3, 11, .125);
  }
  /* headline goes brand blue off the whole card */
  [data-cw-hover-card]:hover [data-cw-hover-title],
  [data-cw-hover-card]:focus-visible [data-cw-hover-title] {
    color: #0541e9;
  }
  /* image zoom off the whole card */
  [data-cw-hover-card]:hover [data-cw-zoom] img,
  [data-cw-hover-card]:focus-visible [data-cw-zoom] img {
    transform: scale(1.04);
  }
  [data-cw-hover-card]:hover [data-cw-zoom="lg"] img,
  [data-cw-hover-card]:focus-visible [data-cw-zoom="lg"] img {
    transform: scale(1.05);
  }

  /* buttons — .12s linear, 2026-09-21 spec (lift shadow removed) */
  [data-cw-hover-btn]:hover,
  [data-cw-hover-btn]:focus-visible {
    background-color: #02030b;
    color: #fff;
  }
  [data-cw-hover-btn="secondary"]:hover,
  [data-cw-hover-btn="secondary"]:focus-visible {
    background-color: transparent;
    color: #02030b;
    box-shadow: inset 0 0 0 1.5px #02030b;
  }
  [data-cw-hover-btn]:active { transform: translateY(1px); }

  /* circled arrow: ring darkens, glyph grows — off its card or itself */
  [data-cw-hover-card]:hover [data-cw-hover-arrow],
  [data-cw-hover-arrow]:hover {
    border-color: #02030b;
  }
  [data-cw-hover-card]:hover [data-cw-hover-arrow] img,
  [data-cw-hover-card]:hover [data-cw-hover-arrow] svg,
  [data-cw-hover-arrow]:hover img,
  [data-cw-hover-arrow]:hover svg {
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-cw-hover-card],
  [data-cw-hover-card] [data-cw-hover-title],
  [data-cw-zoom] img,
  [data-cw-hover-btn],
  [data-cw-hover-arrow],
  [data-cw-hover-arrow] img,
  [data-cw-hover-arrow] svg {
    transition: none;
  }
  [data-cw-hover-card]:hover [data-cw-zoom] img { transform: none; }
}

/* ── tile mesh support (1.1.1) ─────────────────────────────────────────
   cw-tilemesh.js appends canvas.hp-mesh into any [data-mesh] element and
   adds .is-mesh once the WebGL texture is live. The prototype positioned
   that canvas in home.css; these are the kit equivalents. Put data-mesh on
   the element whose DIRECT child is the <img> to warp — the hide rule is
   direct-child scoped on purpose so nested icon images are never touched. */
[data-mesh] { position: relative; }
[data-mesh] > canvas.hp-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;   /* never intercepts clicks */
  z-index: 0;
}
[data-mesh].is-mesh > img { visibility: hidden; }  /* photo stands down once the mesh draws */
/* content above the canvas: anything that is not the canvas or the photo */
[data-mesh] > *:not(canvas):not(img) { position: relative; z-index: 1; }