/* Mithaq Suite — Motifs and optional hexagon cursor */

.mithaq-motif {
  width: var(--mithaq-motif-size, 120px);
  max-width: 100%;
  line-height: 0;
}

.mithaq-motif img,
.mithaq-motif picture {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.mithaq-motif--align-left { display: block; margin: 1.25rem auto 1.25rem 0; }
.mithaq-motif--align-center { display: block; margin: 1.25rem auto; }
.mithaq-motif--align-right { display: block; margin: 1.25rem 0 1.25rem auto; }
.mithaq-motif--align-inline { display: inline-block; margin: 0 .35em; vertical-align: middle; }

:root {
  --mithaq-cursor-ink: #465b4b;
  --mithaq-cursor-paper: #f2eee6;
  --mithaq-cursor-accent: #bc6a47;
  --mithaq-cursor-size: 15px;
  --mithaq-cursor-hover-size: 27px;
}

.mithaq-hex-cursor {
  --mithaq-cursor-x: -40px;
  --mithaq-cursor-y: -40px;
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: var(--mithaq-cursor-size);
  height: var(--mithaq-cursor-size);
  color: var(--mithaq-cursor-ink);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--mithaq-cursor-x), var(--mithaq-cursor-y), 0) translate(-50%, -50%);
  transition: width 140ms ease, height 140ms ease, color 140ms ease, opacity 100ms ease;
  will-change: transform, width, height;
}

.mithaq-hex-cursor svg { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 1px rgba(32,35,32,.18)); }
.mithaq-hex-cursor polygon { fill:var(--mithaq-cursor-paper); fill-opacity:.88; stroke:currentColor; stroke-width:1.7; vector-effect:non-scaling-stroke; }
.mithaq-hex-cursor circle { fill:currentColor; transform-origin:center; transition:transform 140ms ease; }
.mithaq-hex-cursor.is-visible { opacity:1; }
.mithaq-hex-cursor.is-interactive { width:var(--mithaq-cursor-hover-size); height:var(--mithaq-cursor-hover-size); color:var(--mithaq-cursor-accent); }
.mithaq-hex-cursor.is-interactive circle { transform:scale(.65); }
.mithaq-hex-cursor.is-pressed { width:12px; height:12px; }
.mithaq-hex-cursor.is-native { opacity:0; }

@media (hover:hover) and (pointer:fine) {
  html.mithaq-cursor-enabled,
  html.mithaq-cursor-enabled body,
  html.mithaq-cursor-enabled a,
  html.mithaq-cursor-enabled button,
  html.mithaq-cursor-enabled [role="button"],
  html.mithaq-cursor-enabled summary,
  html.mithaq-cursor-enabled label,
  html.mithaq-cursor-enabled [data-mithaq-cursor] { cursor:none !important; }

  html.mithaq-cursor-enabled input,
  html.mithaq-cursor-enabled textarea,
  html.mithaq-cursor-enabled select,
  html.mithaq-cursor-enabled option,
  html.mithaq-cursor-enabled [contenteditable="true"],
  html.mithaq-cursor-enabled [data-mithaq-cursor="native"] { cursor:auto !important; }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .mithaq-hex-cursor { display:none !important; }
}