/* ============================================================
   GeoMotif — thin ink line-geometry brand device.
   Draws itself in once on load, then rests. Respects
   prefers-reduced-motion (renders statically, no animation).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .geo-motif--animate {
    contain: layout paint;
    will-change: transform;
  }
  .geo-motif--animate .geo-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    will-change: stroke-dashoffset;
    animation: geo-draw 1.1s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .geo-motif--animate .geo-fade {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    will-change: transform, opacity;
    animation: geo-fade 0.5s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .geo-motif--animate .geo-fade-flat {
    opacity: 0;
    will-change: opacity;
    animation: geo-fade-flat 0.6s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .geo-motif--animate .geo-d1 { animation-delay: 0.15s; }
  .geo-motif--animate .geo-d2 { animation-delay: 0.30s; }
  .geo-motif--animate .geo-d3 { animation-delay: 0.45s; }
  .geo-motif--animate .geo-d4 { animation-delay: 0.60s; }

  @keyframes geo-draw { to { stroke-dashoffset: 0; } }
  @keyframes geo-fade { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
  @keyframes geo-fade-flat { from { opacity: 0; } to { opacity: 1; } }
}