/* mw-tiles.css — the shared tile treatment, site-wide.
   Every card on the site gets the same quiet motion: a slow cyan light sweep along its
   top edge, and a lift with a cyan border on hover. Colour and layout stay with each
   section; this file only adds the movement, so it is safe on light and dark cards alike.
   Added 2026-10-25 (cloud Claude) on Jason's instruction to apply the WyldLyfe card
   motion to every tile on the site.

   Selectors are bare class names on purpose. The first version scoped them to .ind and
   .hub and missed the plain .card-l used on /what-we-do/ and elsewhere. The classes below
   are the complete set used across the theme's parts; add to BOTH lists if a new one
   appears. */

.card-l,
.card-d,
.pcard,
.tile,
.acard,
.art-box,
.wy .sk,
.skc,
.inct,
.hm-t,
.hm-d,
.wyb .cd,
.nb-c {
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              box-shadow .22s ease,
              border-color .22s ease;
}

/* the travelling light along the top edge */
.card-l:after,
.card-d:after,
.pcard:after,
.tile:after,
.acard:after,
.art-box:after,
.wy .sk:after,
.skc:after,
.inct:after,
.hm-t:after,
.hm-d:after,
.wyb .cd:after,
.nb-c:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(25,195,230,.15) 0%,
              #19c3e6 38%,
              #8ae8fb 50%,
              #19c3e6 62%,
              rgba(25,195,230,.15) 100%);
  background-size: 260% 100%;
  animation: mwtile-sweep 7s linear infinite;
}

.card-l:hover,
.card-d:hover,
.pcard:hover,
.tile:hover,
.acard:hover,
.art-box:hover,
.wy .sk:hover,
.skc:hover,
.inct:hover,
.hm-t:hover,
.hm-d:hover,
.wyb .cd:hover,
.nb-c:hover {
  transform: translateY(-5px);
  border-color: rgba(25,195,230,.78);
}

/* light cards get a soft shadow, dark cards a deeper one */
.card-l:hover,
.pcard:hover,
.tile:hover,
.acard:hover,
.art-box:hover,
.wy .sk:hover,
.skc:hover,
.inct:hover,
.hm-t:hover { box-shadow: 0 20px 44px rgba(2,8,26,.20); }

.card-d:hover,
.hm-d:hover,
.wyb .cd:hover,
.nb-c:hover { box-shadow: 0 20px 44px rgba(2,8,26,.42); }

@keyframes mwtile-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card-l:after, .card-d:after, .pcard:after, .tile:after, .acard:after, .art-box:after,
  .wy .sk:after, .skc:after, .inct:after, .hm-t:after, .hm-d:after, .wyb .cd:after,
  .nb-c:after { animation: none; }
  .card-l, .card-d, .pcard, .tile, .acard, .art-box, .wy .sk, .skc, .inct,
  .hm-t, .hm-d, .wyb .cd, .nb-c { transition: none; }
}