/* ============================================================
   Make My — logo motion
   Source artwork: Branding/Logos/DIGITAL_RGB (unmodified paths)
   Every resting state is the delivered mark. Nothing is redrawn.

   Markup comes from inc/logo-motion.php — that file holds the only
   copy of the path data. The two `d: path(...)` values below are the
   one exception: CSS keyframes cannot read a PHP constant, so the
   square and rounded endpoints of the corner morph are stated here.
   They are generated from the documented geometry constants, and the
   asymmetric radius (bay ceiling meets a full-height upright at
   22.12, meets a shelf divider square) is encoded in them — if these
   are ever regenerated, that asymmetry has to survive.
   ============================================================ */

/* --- Homepage reveal: clockwise trace from top centre -------
   The outline is authored anti-clockwise, so the dash grows
   BACKWARDS from the top-centre point (89.805% along the square
   outline) to read as clockwise. 0.89805 is the measured fraction
   at which x = 320.655, y = 22.87 — if the path changes, re-measure
   with getPointAtLength(), do not estimate. Dash + gap must always
   sum to the full pathLength or the run from the top-left corner
   back to top centre never draws. pathLength="1" on the element is
   what makes these fractions work; keep it.                     */
@keyframes mm-trace-cw {
  from { stroke-dasharray: 0 1; stroke-dashoffset: -0.89805; }
  to   { stroke-dasharray: 1 0; stroke-dashoffset:  0.10195; }
}

/* --- Corners ease from square to the delivered radii --------
   Both endpoints share an identical command sequence, which is
   what makes the d interpolation legal.

   Animating `d` needs Chrome 88+, Safari 16.4+, Firefox 128+.
   Everywhere else the corners simply snap at the keyframe
   boundary — the fill and the resting frame are unaffected, so
   no fallback is required.                                     */
@keyframes mm-radius {
  from { d: path("M22.87 22.87V256.59H68.68V68.68A0 0 0 0 1 68.68 68.68H160.32A0 0 0 0 1 160.32 68.68V196.35H206.13V68.68A0 0 0 0 1 206.13 68.68H297.76A0 0 0 0 1 297.76 68.68V256.59H343.57V68.68A0 0 0 0 1 343.57 68.68H435.21A0 0 0 0 1 435.21 68.68V196.35H481.02V68.68A0 0 0 0 1 481.02 68.68H572.65A0 0 0 0 1 572.65 68.68V256.59H618.46V22.87A0 0 0 0 0 618.46 22.87H22.87A0 0 0 0 0 22.87 22.87Z"); }
  to   { d: path("M22.87 81.95V256.59H68.68V90.8A22.12 22.12 0 0 1 90.8 68.68H160.32A0 0 0 0 1 160.32 68.68V196.35H206.13V68.68A0 0 0 0 1 206.13 68.68H275.64A22.12 22.12 0 0 1 297.76 90.8V256.59H343.57V90.8A22.12 22.12 0 0 1 365.69 68.68H435.21A0 0 0 0 1 435.21 68.68V196.35H481.02V68.68A0 0 0 0 1 481.02 68.68H550.53A22.12 22.12 0 0 1 572.65 90.8V256.59H618.46V81.95A59.08 59.08 0 0 0 559.38 22.87H81.95A59.08 59.08 0 0 0 22.87 81.95Z"); }
}

@keyframes mm-fill     { to { fill-opacity: 1; } }
@keyframes mm-unstroke { to { stroke-opacity: 0; } }

/* --- Divider: line extends out from the mark ---------------- */
@keyframes mm-extend { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mm-pop {
  0%   { opacity: 0; transform: scale(.4); }
  62%  { opacity: 1; transform: scale(1.09); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- element classes ---------- */

/* Colours resolve through the theme's own tokens (--ink is Coal, --paper is
   White), so a reversed lockup stays a one-line colour change. */
.mm-reveal            { display: block; width: 100%; max-width: 400px; height: auto; color: var(--ink); }
.mm-reveal--reversed  { color: var(--paper); }

.mm-reveal__fill {
  fill: currentColor;
  fill-opacity: 0;
  animation: mm-fill .55s ease 3.15s forwards;
}
.mm-reveal__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;              /* user units, not px — scales with the viewBox */
  animation:
    mm-trace-cw 2.1s cubic-bezier(.62, 0, .34, 1) forwards,
    mm-radius    .9s cubic-bezier(.33, 0, .2,  1) 2.15s forwards,
    mm-unstroke  .5s ease 3.2s forwards;
}

/* There is no in-page Trace LOADER here. The site's one loader (Design.md
   §2.1, Motion) is the plugin's `.replicad-loading-mark`, styled by its
   core-loader.css — including where the Theme draws it, over WooCommerce's
   basket / checkout update wash (makemy_logo_update_mark(), efficiency #560).
   The favicon is static since 2026-09-29. Don't add a theme-side copy of the
   loop back. */

.mm-divider      { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-8) 0; color: var(--ink); }
.mm-divider__line {
  flex: 1; height: 1px; background: currentColor; opacity: .3;
  animation: mm-extend 1s cubic-bezier(.62, 0, .34, 1) both;
}
.mm-divider__line:first-child { transform-origin: right center; }
.mm-divider__line:last-child  { transform-origin: left center; }
.mm-divider__mark {
  width: 68px; height: auto; flex: none; fill: currentColor;
  animation: mm-pop .6s cubic-bezier(.2, 1.3, .4, 1) .6s both;
}
/* Held until scrolled into view. The PAUSED state is the animation start, so
   if logo-motion.js never runs the worst case is a static divider, never a
   blank gap. Do not invert this to "add a class to start". */
.mm-divider.is-pending .mm-divider__line,
.mm-divider.is-pending .mm-divider__mark { animation-play-state: paused; }

/* The block editor has no scroll observer running over the canvas, so show
   dividers settled there rather than frozen at their paused first frame. */
.editor-styles-wrapper .mm-divider.is-pending .mm-divider__line,
.editor-styles-wrapper .mm-divider.is-pending .mm-divider__mark { animation-play-state: running; }

/* animate: false — no is-pending, no observer, no animation: the end state is
   what paints. mm-extend and mm-pop only ever move `transform` and `opacity`,
   both of which fall back to the declarations above, so removing the animation
   is the whole of it. This is the SAME frame reduced motion resolves to below;
   it is not a second design. */
.mm-divider--static .mm-divider__line,
.mm-divider--static .mm-divider__mark { animation: none; }

/* --- Divider: the `through` rule -----------------------------
   One unbroken rule the full width with the mark over it, instead of the two
   lines and the 26px gap. It still scales out from the CENTRE, which is why the
   transform-origin has to beat the :first-child/:last-child pair above — the
   lone line matches both. */
.mm-divider--through { position: relative; justify-content: center; gap: 0; }
.mm-divider--through .mm-divider__line--through {
  position: absolute; left: 0; right: 0; top: 50%; flex: none;
  transform-origin: center center;
}
.mm-divider--through .mm-divider__mark { position: relative; }

/* --- Divider: `seam` placement -------------------------------
   The divider sits ON a tone change rather than inside a band. The wrapper's
   position comes from the block (see src/blocks/logo-divider/style.scss); what
   belongs to the component is that a seam rule crosses two tones at once, so it
   is stated as Rule Strong (Stone) — a structural border, §3.4 — rather than as
   Ink at 30%, which reads differently against Paper than against Pebble. Both
   pairings are measured in tests/js/Theme/design-contrast.test.js.

   Two classes deep on purpose: it has to outrank the reduced-motion reset below,
   which restates the in-band 30%.

   Unlike --ink/--paper above, the two rule tokens get NO standalone hex fallback:
   --rule is a color-mix derivation, so any literal here would be a colour the
   brand does not own. These two treatments need main.css, and always have it. */
.mm-divider--seam { padding: 0; }
.mm-divider--seam .mm-divider__line { background: var(--rule-strong); opacity: 1; }

/* --- Device as wallpaper -------------------------------------
   The tiled field from makemy_logo_pattern(). Decoration only: it never carries
   text or meaning, so it is aria-hidden in the markup, inert to the pointer
   here, and painted at Rule strength. The block that owns the band lifts its own
   content above it — an absolutely positioned element paints over static inline
   content whatever its z-index. */
.mm-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--rule); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mm-reveal__line { display: none; }
  .mm-reveal__fill { fill-opacity: 1; animation: none; }
  /* Stopped at rest: the line keeps its base .3 opacity, the mark its 1. */
  .mm-divider__line, .mm-divider__mark { animation: none; transform: none; }
}