/* ==========================================================================
   TuneDance frontend — works with what you already use.

   Every other band on this page is a light ground with blurred colour pools
   behind it. This one is not, because the section is about editing software
   and the background can say that before a word is read: it is a timeline.
   Lane rules running across, time ticks running down. A sweeping playhead was
   tried here and cut: motion on a background element pulls the eye off the copy
   it is meant to sit behind.

   It is drawn entirely in CSS gradients, so it costs one element and no
   assets, and it is masked to fade at every edge. Without that mask a grid
   stops reading as a timeline and starts reading as a table.
   ========================================================================== */

.works {
  --accent: #04a86b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7.6vw, 122px) 24px clamp(64px, 7.6vw, 118px);
  background: linear-gradient(180deg, #f7fafb 0%, #eff5f7 60%, #ecf3f5 100%);
  color: var(--on-stage);
  text-align: center;
}

/* The timeline itself: lanes across, ticks down, with every fifth tick a
   little stronger the way a real ruler marks its intervals. */
.works__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(10, 60, 70, 0.09) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(to right,
      rgba(10, 60, 70, 0.1) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(to right,
      rgba(10, 60, 70, 0.045) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(78% 74% at 50% 50%, #000 28%, transparent 88%);
  mask-image: radial-gradient(78% 74% at 50% 50%, #000 28%, transparent 88%);
}

/* One pool of colour, low, so the grid is not the only thing in the frame. */
.works::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(36% 40% at 12% 12%, rgba(0, 201, 126, 0.16) 0%, transparent 68%),
    radial-gradient(38% 42% at 88% 86%, rgba(14, 139, 255, 0.13) 0%, transparent 70%);
  filter: blur(70px);
}

.works__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

/* The claim the heading turns on, underlined by hand in the product's
   green; the app names in the line under it in ink, so the sentence scans
   as the list it is. Both are devices the page already uses. */
.works__mark {
  position: relative;
  white-space: nowrap;
}

.works__mark::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.12em;
  height: 0.2em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 50 8, 110 11, 196 6' fill='none' stroke='%2300c97e' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M12 19 C 70 14, 130 17, 180 13' fill='none' stroke='%2300c97e' stroke-width='4.5' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.works__sub b {
  font-weight: 700;
  color: var(--on-stage);
}

.works__heading {
  position: relative;
  z-index: 0;
  margin: 0 auto clamp(16px, 2vw, 24px);
  max-width: 26ch;
  font-size: clamp(28px, 4.3vw, 58px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.036em;
  text-wrap: balance;
}

.works__sub {
  margin: 0 auto clamp(40px, 5vw, 76px);
  max-width: 62ch;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: rgba(26, 30, 38, 0.72);
}

/* --- The wall ------------------------------------------------------------ */

.works__apps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 54px) clamp(28px, 4.4vw, 68px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.works__apps li {
  display: inline-flex;
  align-items: center;
  opacity: 1;
}


.works__apps img {
  height: clamp(26px, 3vw, 38px);
  width: auto;
}

/* Sized by optical weight, not by a single height. Seven of these are square
   app icons; CapCut ships as a 960x182 lockup and Movavi as a wordmark, and at
   a shared height those two would be four and two times the area of everything
   beside them.

   Movavi's file was also 75% transparent padding, so a quarter of any height
   given to it was the actual logo. It is cropped to its content bounds here;
   check getbbox() before blaming the CSS for a logo that looks undersized. */
.works__apps img[src$="capcut.svg"] { height: clamp(16px, 1.85vw, 23px); }
.works__apps img[src$="movavi.webp"] { height: clamp(19px, 2.2vw, 28px); }

@media (max-width: 560px) {
  .works__grid { background-size: auto; }
  .works__apps { gap: 18px 26px; }
}