/* Bands: the Art & Branding drawers, stacked strips (one open at a time), each opening a panel. Generic
   structure only: the artwork inside a panel is in gallery.css */

/* Art & Branding wallpaper: a diamond trellis with a sparkle in every other diamond and dots where the lines
   cross. Two layers cut out by masks, so they follow the theme: the trellis, sparkles and middle dots in
   color-3 (::before), the corner dots in color-1 (::after) */
.work-section { position: relative; isolation: isolate; background: var(--background); }
.work-section::before, .work-section::after { position: absolute; inset: 0; z-index: -1; content: ""; }
.work-section::before {
  background: var(--color-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40L40 0L80 40L40 80Z' fill='none' stroke='%23000' stroke-opacity='.24' stroke-width='2'/%3E%3Cpath d='M40 30C40.8 36.7 43.3 39.2 50 40C43.3 40.8 40.8 43.3 40 50C39.2 43.3 36.7 40.8 30 40C36.7 39.2 39.2 36.7 40 30Z' fill-opacity='.42'/%3E%3Cg fill-opacity='.4'%3E%3Ccircle cx='40' cy='0' r='3.5'/%3E%3Ccircle cx='40' cy='80' r='3.5'/%3E%3Ccircle cx='0' cy='40' r='3.5'/%3E%3Ccircle cx='80' cy='40' r='3.5'/%3E%3C/g%3E%3C/svg%3E") center top / 80px 80px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40L40 0L80 40L40 80Z' fill='none' stroke='%23000' stroke-opacity='.24' stroke-width='2'/%3E%3Cpath d='M40 30C40.8 36.7 43.3 39.2 50 40C43.3 40.8 40.8 43.3 40 50C39.2 43.3 36.7 40.8 30 40C36.7 39.2 39.2 36.7 40 30Z' fill-opacity='.42'/%3E%3Cg fill-opacity='.4'%3E%3Ccircle cx='40' cy='0' r='3.5'/%3E%3Ccircle cx='40' cy='80' r='3.5'/%3E%3Ccircle cx='0' cy='40' r='3.5'/%3E%3Ccircle cx='80' cy='40' r='3.5'/%3E%3C/g%3E%3C/svg%3E") center top / 80px 80px;
}
.work-section::after {
  background: var(--color-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='80' cy='0' r='3'/%3E%3Ccircle cx='0' cy='80' r='3'/%3E%3Ccircle cx='80' cy='80' r='3'/%3E%3C/svg%3E") center top / 80px 80px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='80' cy='0' r='3'/%3E%3Ccircle cx='0' cy='80' r='3'/%3E%3Ccircle cx='80' cy='80' r='3'/%3E%3C/svg%3E") center top / 80px 80px;
}
/* Each band has one big curved top corner (alternating sides) and overlaps the band above by --curve-y,
   so the curve shows the band behind it. Bottom corners get a small --corner-bottom; the last band uses the full --corner */
.showcase { margin: 0; padding: 0 6px 6px 0; list-style: none; --curve-x: 120px; --curve-y: 44px; --corner: 24px; --corner-bottom: 16px; }
.showcase-item { position: relative; }
.showcase-item + .showcase-item { margin-top: calc(var(--curve-y) * -1); }
.showcase-card {
  padding-bottom: var(--curve-y);
  border: var(--line);
  border-radius: var(--corner) var(--curve-x) var(--corner-bottom) var(--corner-bottom) / var(--corner) var(--curve-y) var(--corner-bottom) var(--corner-bottom);
  background: var(--band, var(--color-1));
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.showcase-item:nth-child(even) .showcase-card { border-radius: var(--curve-x) var(--corner) var(--corner-bottom) var(--corner-bottom) / var(--curve-y) var(--corner) var(--corner-bottom) var(--corner-bottom); }
.showcase-item:last-child .showcase-card { padding-bottom: 0; border-bottom-left-radius: var(--corner); border-bottom-right-radius: var(--corner); }

.showcase-heading { margin: 0; }
.showcase-band {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 104px;
  padding: 22px 20px 18px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.showcase-item:nth-child(even) .showcase-band { flex-direction: row-reverse; text-align: right; }
.showcase-band:focus-visible { outline: 3px dashed var(--ink); outline-offset: -12px; border-radius: 26px; }
.showcase-thumb { flex: 0 0 auto; width: 58px; padding: 4px; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-5deg); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.showcase-item:nth-child(even) .showcase-thumb { transform: rotate(5deg); }
.showcase-thumb > img, .showcase-thumb-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.showcase-thumb-placeholder { background: var(--background) radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.5px, transparent 1.5px) 0 0 / 12px 12px; }
.showcase-thumb-placeholder .icon { width: 64%; }
.showcase-label { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 6.6vw, 2rem); line-height: 1; text-wrap: balance; }
/* Plain arrow (no circle) so the whole band reads as the click target; it flips up when the band is open */
.showcase-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; }
.showcase-toggle svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.showcase-band[aria-expanded="true"] .showcase-toggle svg { transform: rotate(180deg); }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .showcase-card:has(.showcase-band:hover) { transform: translateX(8px); }
  .showcase-item:nth-child(even) .showcase-card:has(.showcase-band:hover) { transform: translateX(-8px); }
  .showcase-band:hover .showcase-thumb { transform: rotate(-12deg) scale(1.08); }
  .showcase-item:nth-child(even) .showcase-band:hover .showcase-thumb { transform: rotate(12deg) scale(1.08); }
  .showcase-band:hover .showcase-toggle svg { transform: translateY(3px); }
  .showcase-band[aria-expanded="true"]:hover .showcase-toggle svg { transform: rotate(180deg) translateY(3px); }
}

/* Panels slide open (0fr to 1fr) */
.showcase-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.js .showcase-item:not(.is-open) .showcase-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), visibility 0s .45s; }
.showcase-panel-inner { min-height: 0; overflow: hidden; transition: opacity .18s ease; }
/* An open band above the tapped one fades its works out, then shuts in one step, no slide (script.js) */
.showcase-item.is-fading .showcase-panel-inner { opacity: 0; }
.js .showcase-item.is-snapping .showcase-panel { transition: none; }
.showcase-placeholder { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 220px; margin: 0 20px 22px; border: 3px dashed var(--ink); border-radius: 20px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.showcase-placeholder .icon { width: 72px; }
.showcase-placeholder p { margin: 0; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.1; }

@media (min-width: 681px) {
  .showcase { --curve-x: 170px; --curve-y: 62px; --corner: 34px; --corner-bottom: 22px; }
  .showcase-card { box-shadow: var(--shadow); }
  .showcase-band { gap: 24px; min-height: 136px; padding: 26px 42px 22px; }
  .showcase-thumb { width: 82px; padding: 5px; border-radius: 18px; }
  .showcase-thumb > img, .showcase-thumb-placeholder { border-radius: 12px; }
  .showcase-label { font-size: clamp(2rem, 4.4vw, 3.6rem); }
  .showcase-toggle { width: 48px; height: 48px; }
  .showcase-placeholder { min-height: 320px; margin: 0 42px 34px; }
}

@media (min-width: 901px) {
  .showcase { --curve-x: 240px; --curve-y: 78px; }
}