/* ============================================
   PATTERN STYLES - Test pattern specific styles
   ============================================ */

/* SMPTE Pattern */
.smpte-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.smpte-top { flex: 67; display: flex; }
.smpte-mid { flex: 8; display: flex; }
.smpte-bottom { flex: 25; display: flex; }

/* EBU Pattern */
.ebu-pattern {
  width: 100%;
  height: 100%;
  display: flex;
}

/* Grid Pattern */
.grid-pattern {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(to right, #333 1px, transparent 1px),
    linear-gradient(to bottom, #333 1px, transparent 1px),
    linear-gradient(to right, #666 2px, transparent 2px),
    linear-gradient(to bottom, #666 2px, transparent 2px);
  background-size: 
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
  background-color: #000;
}

/* Grayscale Pattern */
.grayscale-pattern {
  width: 100%;
  height: 100%;
  display: flex;
}

/* Gradient Pattern */
.gradient-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gradient-row { flex: 1; }

/* Checkerboard Pattern */
.checker-pattern {
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 40px 40px;
}

/* Crosshatch Pattern */
.crosshatch-pattern {
  width: 100%;
  height: 100%;
  position: relative;
  background: #111;
}

.crosshatch-pattern svg {
  width: 100%;
  height: 100%;
}

/* Solid Color */
.solid-pattern {
  width: 100%;
  height: 100%;
}

/* Focus Pattern */
.focus-pattern {
  width: 100%;
  height: 100%;
  background: #808080;
  display: flex;
  justify-content: center;
  align-items: center;
}

.focus-pattern svg {
  width: 80%;
  height: 80%;
  max-width: 800px;
  max-height: 800px;
}

/* PLUGE Pattern */
.pluge-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #101010;
}

/* Contrast Pattern */
.contrast-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #808080;
}

/* Resolution Pattern */
.resolution-pattern {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resolution-pattern svg {
  width: 100%;
  height: 100%;
}

/* Zone Plate */
.zoneplate-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #808080;
}

/* Burst Pattern */
.burst-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Motion Test */
.motion-pattern {
  width: 100%;
  height: 100%;
  background: #222;
  position: relative;
  overflow: hidden;
}

.motion-object {
  position: absolute;
  background: #fff;
  border-radius: 4px;
}

/* Framerate Test */
.framerate-pattern {
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Scroll Test */
.scroll-pattern {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    #000 0px,
    #000 2px,
    #fff 2px,
    #fff 4px
  );
  animation: scrollUp 2s linear infinite;
}

@keyframes scrollUp {
  from { background-position: 0 0; }
  to { background-position: 0 -100px; }
}

/* Skin Tone Pattern */
.skintone-pattern {
  width: 100%;
  height: 100%;
  display: flex;
}

/* ColorChecker Pattern */
.colorchecker-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #505050;
  padding: 20px;
}

.colorchecker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-width: 800px;
  width: 100%;
  aspect-ratio: 6/4;
}

.colorchecker-cell {
  border-radius: 4px;
}

/* Color Temp Pattern */
.colortemp-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* APL Pattern */
.apl-pattern {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

/* Sync Pattern */
.sync-pattern {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.sync-timecode-large {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: min(12vw, 120px);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

.sync-fps-label {
  font-size: 24px;
  color: #888;
}

.sync-controls-inline {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}