/* MANGo Night Cut motion (r3327). Composite-only: every animation below changes transform and opacity, nothing else.
   Build the cubes and the bar fill as HTML elements, not SVG children: browsers composite transforms on HTML elements,
   while transforms on SVG children repaint the SVG. Motion is data: nothing here loops or runs on a timer. */
@import url("tokens.css");

/* 1. Score lines: one pass per real read step (name, logo, colours, words). Add .is-cut to a line when its step finishes. */
.mg-cut { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.mg-cut.is-cut { transform: scaleX(1); opacity: 1;
  transition: transform var(--mg-dur-score) var(--mg-ease-out), opacity var(--mg-dur-score) var(--mg-ease-out); }
/* SVG cut lines are tiny (at most 40px of SVG); this is the one place a repaint is accepted. */

/* 2. The turn: fires ONCE when the drafts are actually ready. Add .is-turned to .mg-turn. Never on revisit, never in ads. */
.mg-turn { position: relative; aspect-ratio: 112 / 118; }
.mg-turn .mg-cheek { transition: transform var(--mg-dur-fade) var(--mg-ease-out), opacity var(--mg-dur-fade) var(--mg-ease-out); }
.mg-turn.is-turned .mg-cheek { transform: scale(1.04); opacity: 0; }
.mg-turn .mg-cube { position: absolute; border-radius: 15%; background: var(--mg-mark-flesh);   /* side face */
  transform: translate(-50%, -50%) rotate(0deg) scale(.55); opacity: 0; }
.mg-turn.is-turned .mg-cube { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); opacity: 1;
  transition: transform var(--mg-dur-turn) var(--mg-ease-pop) var(--d), opacity 200ms linear var(--d); will-change: transform; }
.mg-turn .mg-skin { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms linear 120ms; }
.mg-turn.is-turned .mg-skin { opacity: 1; }
.mg-turn .mg-cube::before { content: ""; position: absolute; inset: 0; transform: translateY(calc(var(--h) * -1)); border-radius: 15%; background: var(--mg-gold-light); }  /* top face */
/* After transitionend on the last cube: remove will-change (the demo does this). Total: 150 + 200 stagger + 520 = 870ms. */

/* 3. Settle: the cubes move into the five banner thumbnails with a FLIP (measure, invert with transform, play). 420ms, inout. */

/* 4. Ripening bar: four stacked fills, each a colour; progress is scaleX on the stack, colour change is an opacity crossfade. */
.mg-ripe { height: 12px; border-radius: 999px; background: var(--mg-navy-800); border: 1px solid var(--mg-edge-on-navy); position: relative; overflow: hidden; }
.mg-ripe-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  transition: transform var(--mg-dur-bar) var(--mg-ease-out); border-radius: 999px; }
.mg-ripe-fill i { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms linear; }
.mg-ripe-fill i:nth-child(1) { background: var(--mg-leaf); } .mg-ripe-fill i:nth-child(2) { background: var(--mg-lime); }
.mg-ripe-fill i:nth-child(3) { background: var(--mg-gold); } .mg-ripe-fill i:nth-child(4) { background: var(--mg-mango); }
.mg-ripe[data-step="1"] i:nth-child(1), .mg-ripe[data-step="2"] i:nth-child(2),
.mg-ripe[data-step="3"] i:nth-child(3), .mg-ripe[data-step="4"] i:nth-child(4) { opacity: 1; }
@media (max-width: 480px) { .mg-ripe { height: 10px; } }

/* 5. Reduced motion: no turn, no draw. States still change, by a 150ms opacity crossfade only. */
@media (prefers-reduced-motion: reduce) {
  .mg-cut.is-cut, .mg-turn.is-turned .mg-cube, .mg-ripe-fill { transition: opacity var(--mg-dur-fade) linear !important; }
  .mg-cut { transform: none; } .mg-turn .mg-cube { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  .mg-turn.is-turned .mg-cube { transition-delay: 0s !important; will-change: auto; }
  .mg-turn.is-turned .mg-cheek { transform: none; }
}

/* 6. Money surfaces: nothing moves. */
.mg-money .mg-turn, .mg-money .mg-ripe { display: none !important; }
.mg-money * { animation: none !important; transition-property: color, background-color, border-color, box-shadow !important; }