/*
 * Imagine Anything — section background "plates".
 * Ported from hyperframes/shared/brand.css so the website and the video
 * backgrounds share one visual language. Pure CSS backgrounds; no images.
 */

.plate-polka {
  background-color: #fff3d9;
  background-image:
    radial-gradient(circle, #e76f51 8px, transparent 9px),
    radial-gradient(circle, #2a9d8f 7px, transparent 8px),
    radial-gradient(circle, #ffd66a 9px, transparent 10px),
    radial-gradient(circle, #6a7bd6 6px, transparent 7px);
  background-size: 120px 120px, 160px 160px, 140px 140px, 100px 100px;
  background-position: 20px 20px, 80px 60px, 40px 100px, 110px 30px;
}
.plate-polka-soft {
  background-color: #fff3d9;
  background-image:
    radial-gradient(circle, rgba(231,111,81,0.22) 8px, transparent 9px),
    radial-gradient(circle, rgba(42,157,143,0.20) 7px, transparent 8px),
    radial-gradient(circle, rgba(255,214,106,0.45) 9px, transparent 10px),
    radial-gradient(circle, rgba(106,123,214,0.18) 6px, transparent 7px);
  background-size: 120px 120px, 160px 160px, 140px 140px, 100px 100px;
  background-position: 20px 20px, 80px 60px, 40px 100px, 110px 30px;
}
.plate-dot-grid {
  background-color: #fff8ec;
  background-image: radial-gradient(circle, rgba(42,30,16,0.18) 1.6px, transparent 2.1px);
  background-size: 26px 26px;
}
.plate-graph {
  background-color: #f7fff6;
  background-image:
    linear-gradient(rgba(42,157,143,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,157,143,0.16) 1px, transparent 1px);
  background-size: 32px 32px;
}
.plate-ruled {
  background-color: #fffdf6;
  background-image:
    linear-gradient(#c9dff5 1.5px, transparent 1.5px),
    linear-gradient(90deg, #e76f51 2px, transparent 2px);
  background-size: 100% 40px, 100% 100%;
  background-position: 0 48px, 72px 0;
}
.plate-checker-soft {
  background-color: #fff3d9;
  background-image:
    linear-gradient(45deg, #fde0b8 25%, transparent 25%),
    linear-gradient(-45deg, #fde0b8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fde0b8 75%),
    linear-gradient(-45deg, transparent 75%, #fde0b8 75%);
  background-size: 72px 72px;
  background-position: 0 0, 0 36px, 36px -36px, -36px 0;
}
.plate-diagonal {
  background: repeating-linear-gradient(-32deg, #fff3d9 0 28px, #fde0b8 28px 56px, #ffe9a8 56px 84px);
}
.plate-crosshatch {
  background-color: #fff8ec;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(42,30,16,0.10) 12px, rgba(42,30,16,0.10) 13px),
    repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(42,30,16,0.10) 12px, rgba(42,30,16,0.10) 13px);
}
.plate-halftone {
  background-color: #fff3d9;
  background-image: radial-gradient(circle, rgba(231,111,81,0.55) 1.5px, transparent 2px);
  background-size: 14px 14px;
}
.plate-halftone-teal {
  background-color: #e8f7f3;
  background-image: radial-gradient(circle, rgba(42,157,143,0.6) 2px, transparent 2.5px);
  background-size: 18px 18px;
}
.plate-radial-wash {
  background:
    radial-gradient(1200px 500px at 10% -5%, #fde7cc 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #d9efe9 0%, transparent 60%),
    #fff3d9;
}
.plate-butter-field {
  background:
    radial-gradient(900px 600px at 50% 20%, #ffe9a8 0%, transparent 55%),
    radial-gradient(700px 500px at 90% 90%, rgba(255,214,106,0.4) 0%, transparent 50%),
    #fff3d9;
}
.plate-teal-calm {
  background:
    radial-gradient(1000px 600px at 15% 10%, #c8ebe4 0%, transparent 55%),
    radial-gradient(800px 600px at 95% 85%, #dff5f2 0%, transparent 55%),
    #f3fbf9;
}
.plate-sunburst {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, #ffe9a8 0deg 12deg, #fff3d9 12deg 24deg);
}
.plate-sunburst-soft {
  background:
    radial-gradient(circle at 50% 50%, #fff8ec 0%, transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,214,106,0.35) 0deg 12deg, transparent 12deg 24deg),
    #fff3d9;
}
.plate-vignette {
  background: radial-gradient(ellipse at 50% 45%, #fff8ec 0%, #fff3d9 45%, #ecd9b0 100%);
}
.plate-ink-night {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(106,123,214,0.28) 0%, transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(42,157,143,0.22) 0%, transparent 60%),
    #2a1e10;
}
.plate-spectrum-line {
  background: linear-gradient(90deg, #e76f51, #e9a441, #ffd66a, #7bb369, #2a9d8f, #4b96c4, #6a7bd6);
}

/* Wavy / torn edges between sections. Put on a section; set --edge-colour to
   the colour of the *previous* section so the wave appears to hang down. */
.plate-edge-wave { position: relative; }
.plate-edge-wave::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--edge-colour, #fff3d9);
  -webkit-mask: radial-gradient(28px at 50% 0, #000 98%, transparent 100%) 50% 0 / 56px 100% repeat-x;
          mask: radial-gradient(28px at 50% 0, #000 98%, transparent 100%) 50% 0 / 56px 100% repeat-x;
}
.plate-edge-scallop { position: relative; }
.plate-edge-scallop::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--edge-colour, #fff3d9);
  -webkit-mask: radial-gradient(22px at 50% 100%, transparent 98%, #000 100%) 50% 0 / 44px 100% repeat-x;
          mask: radial-gradient(22px at 50% 100%, transparent 98%, #000 100%) 50% 0 / 44px 100% repeat-x;
}

/* Adult ("Atelier") plates — quiet, papery */
.plate-linen {
  background-color: #faf6ee;
  background-image:
    repeating-linear-gradient(0deg, rgba(26,20,16,0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(26,20,16,0.02) 0 1px, transparent 1px 3px);
}
.plate-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.plate-dusk-breathe {
  background: linear-gradient(120deg, #faf6ee 0%, #efe9f5 35%, #faf6ee 60%, #f7ede4 100%);
}