/* ═══════════════════════════════════════════════════════════════
   SHAPES.CSS — shape & composition layer, shared by every page with
   colour panels. Replaces the camera-HUD details (clock, lens text,
   corner numbers, viewfinder overlays) with big, simple geometry in
   the four core colours. Loaded after each page's own stylesheet.
   ═══════════════════════════════════════════════════════════════ */

/* Colour panels: one oversized tone-on-tone shape per colour, bleeding
   off an edge so it frames the content instead of sitting behind it. */
.color-panel::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  background: rgba(12,10,8,.16);
}
.color-panel[data-color="orange"]::after,
.color-panel:not([data-color])::after {           /* circle, bottom right */
  width: clamp(280px, 46vw, 720px); aspect-ratio: 1; border-radius: 50%;
  right: -12%; bottom: -38%;
}
.color-panel[data-color="mag"]::after {           /* half disc on the left edge */
  width: clamp(200px, 30vw, 460px); aspect-ratio: 1 / 2; border-radius: 0 999px 999px 0;
  left: 0; top: 50%; transform: translateY(-50%);
}
.color-panel[data-color="teal"]::after {          /* quarter circle, top right */
  width: clamp(220px, 34vw, 540px); aspect-ratio: 1; border-radius: 0 0 0 100%;
  right: 0; top: 0;
}
.color-panel[data-color="red"]::after {           /* triangle, bottom left */
  width: clamp(240px, 36vw, 560px); aspect-ratio: 1;
  left: 0; bottom: 0; clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* Client panels on the homepage map onto the same four shapes. */
.color-panel[data-color="michaelblast"]::after { width: clamp(280px, 46vw, 720px); aspect-ratio: 1; border-radius: 50%; right: -12%; bottom: -38%; }
.color-panel[data-color="blissful"]::after { width: clamp(200px, 30vw, 460px); aspect-ratio: 1 / 2; border-radius: 0 999px 999px 0; left: 0; top: 50%; transform: translateY(-50%); }
.color-panel[data-color="classiccycle"]::after { width: clamp(220px, 34vw, 540px); aspect-ratio: 1; border-radius: 0 0 0 100%; right: 0; top: 0; }
.color-panel[data-color="dyna"]::after { width: clamp(240px, 36vw, 560px); aspect-ratio: 1; left: 0; bottom: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* Keep panel content above the shape. */
.color-panel > .wrap, .color-panel > .frame-mark { position: relative; z-index: 2; }
.color-panel > .frame-mark { position: absolute; }