/* masugami — the how-to demo (HOW_TO_PLAY_WORK_ORDER §2, H2)
   ============================================================
   Component CSS for masugami-howto.js. It does not belong in masugami-theme.css, which decides
   colour and nothing else, and it does not belong in either page, because the same component is
   mounted on the landing and in the player.

   Every colour here is a token. The room is --ms-bg, the sheet --ms-paper, the back of the flap
   --ms-paper-flap, the crease --ms-crease / --ms-crease-folded, the lift --ms-paper-lift, and
   the one accent --ms-accent, spent on the armed crease and nowhere else. Two of those tokens
   are published literally only by the material that needs no derivation (kasure), so each one is
   read with the derivation web/index.html applies for washi and ai as its fallback. That keeps
   the component self-contained: it renders correctly on the landing, which carries no board CSS
   at all.

   Ink is not drawn here. The cells are real `.cell` elements and masugami-marks.css draws them,
   which is why the demo's mark, bleed-through, cancelling pair and arriving ghost are the board's
   and not a second sketch of them.

   Squares everywhere, per the design law — except the touch indicator, which is a finger.
   ============================================================ */

.ms-howto{
  --ms-howto-lift:var(--ms-paper-lift,
    0 2px 3px var(--ms-shadow,rgba(0,0,0,.35)),
    0 16px 30px var(--ms-shadow,rgba(0,0,0,.35)));
  --ms-howto-cast:var(--ms-shadow,rgba(0,0,0,.32));
  --ms-howto-crease:var(--ms-crease,
    linear-gradient(90deg,var(--ms-crease-dark,rgba(0,0,0,.16)),var(--ms-groove-light,rgba(255,255,255,.7))));
  --ms-howto-crease-held:var(--ms-crease-folded,
    linear-gradient(90deg,var(--ms-crease-dark,rgba(0,0,0,.34)),var(--ms-groove-light,rgba(255,255,255,.95))));
  --ms-howto-ease:var(--ms-ease,cubic-bezier(.25,.7,0,1));
  --ms-howto-resize:var(--ms-dur-sheet,460ms);
}

/* ---------- the room ---------- */
.ms-howto-stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:250px;padding:64px 32px;
  background:var(--ms-bg);
  perspective:1100px;
  overflow:hidden;
}
.ms-howto-stage.is-mini{min-height:132px;padding:36px 20px}

.ms-howto-hint,.ms-howto-caption{
  position:absolute;left:0;right:0;text-align:center;
  font:400 10px/1 var(--ms-font-ui);letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ms-text-2);
}
.ms-howto-hint{top:18px;opacity:.42}
.ms-howto-caption{
  bottom:22px;font-size:12px;opacity:0;
  transition:opacity .3s linear;
}
.ms-howto-caption.is-shown{opacity:.72}

/* ---------- the sheet ---------- */
.ms-strip{
  position:relative;transform-style:preserve-3d;
  transition:width var(--ms-howto-resize) var(--ms-howto-ease),opacity .14s linear;
}
.ms-strip.is-snapping,.ms-strip.is-snapping *{transition:none !important}
.ms-sheet{position:absolute;inset:0;transition:transform var(--ms-howto-resize) var(--ms-howto-ease)}
.ms-paper{
  position:absolute;top:0;height:100%;
  background:var(--ms-paper);box-shadow:var(--ms-howto-lift);
}
.ms-slot{position:absolute;top:0;width:var(--ms-howto-size);height:var(--ms-howto-size)}
.ms-slot.is-under{visibility:hidden}

/* The demo's cell is the board's cell — masugami-marks.css draws its ink — but the board's own
   layout rules live in web/index.html, which the landing does not load. State it here so the two
   surfaces render one component. */
.ms-howto .cell{
  position:absolute;inset:0;display:block;z-index:1;
  border:0;border-radius:0;
  background-color:var(--ms-paper);
  transition:opacity .14s linear;
}
.ms-howto .ms-face.is-back .cell{background-color:var(--ms-paper-flap)}

/* ---------- the crease ---------- */
.ms-seam{
  position:absolute;top:0;width:2px;height:100%;
  background:var(--ms-howto-crease);
  transition:background .12s linear,opacity .12s linear;
}
.ms-seam.is-held{background:var(--ms-howto-crease-held)}
.ms-seam.is-armed{background:var(--ms-accent);opacity:1}

/* ---------- the flap: a real two-sided sheet ---------- */
.ms-fold{position:absolute;top:0;height:100%;transform-style:preserve-3d;will-change:transform}
.ms-face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:var(--ms-howto-lift);
}
.ms-face.is-back{transform:rotateY(180deg)}
/* the hinge shade, at the same reach the board's flap uses */
.ms-face::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(var(--ms-howto-shade-dir,90deg),
    rgba(0,0,0,var(--ms-howto-shade,0)),rgba(0,0,0,0) 60%);
}
/* the ground the lifted half no longer covers */
.ms-ground{
  position:absolute;top:0;height:100%;opacity:0;pointer-events:none;
  box-shadow:0 8px 22px var(--ms-howto-cast);
}

/* ---------- the finger ----------
   The one round thing in a square design, because it is not paper. */
.ms-touch{
  position:absolute;width:40px;height:40px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--ms-text) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ms-text) 32%,transparent);
  transform:translate(-50%,-50%) scale(var(--ms-howto-touch-scale,1));
  opacity:var(--ms-howto-touch-opacity,0);
  transition:opacity .16s linear;
}

/* ---------- the three beats ---------- */
.ms-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:34px}
.ms-step{
  display:block;width:100%;padding:0 0 18px;
  border:0;border-top:1px solid transparent;background:none;
  text-align:left;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .14s linear;
}
.ms-step .ms-step-label{
  display:block;padding-top:18px;
  font:400 11px/1 var(--ms-font-ui);letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ms-text-4);
  transition:color .14s linear;
}
.ms-step p{
  margin:14px 0 0;font:400 15.5px/1.7 var(--ms-font-display);
  color:var(--ms-text-2);text-wrap:pretty;
}
.ms-step[aria-pressed="true"]{border-top-color:var(--ms-text)}
.ms-step[aria-pressed="true"] .ms-step-label,
.ms-step:hover .ms-step-label{color:var(--ms-text-bright)}
.ms-step:focus-visible{outline:2px solid var(--ms-text);outline-offset:4px}

/* ---------- how ink behaves ---------- */
.ms-laws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ms-law{padding:0 28px 8px}
.ms-law:first-child{padding-left:0}
.ms-law:last-child{padding-right:0}
.ms-law+.ms-law{border-left:var(--ms-rule)}
.ms-law .ms-howto-stage{margin-bottom:22px}
.ms-law-eq{
  display:none;align-items:center;justify-content:center;gap:8px;
  height:132px;margin-bottom:22px;background:var(--ms-bg);
}
.ms-law-eq .sq{
  position:relative;display:block;flex:none;width:24px;height:24px;border-radius:0;
  background-color:var(--ms-paper);
}
.ms-law-op{font:300 13px/1 var(--ms-font-ui);color:var(--ms-text-4)}
.ms-law-cap{font:400 11px/1.5 var(--ms-font-ui);letter-spacing:2.2px;text-transform:uppercase;color:var(--ms-text-4)}
.ms-law-emph{margin-top:4px;font:400 17px/1.4 var(--ms-font-display);color:var(--ms-text-bright)}
/* Reduce Motion: the laws stop folding and become the equation row, as they are on iOS. */
.ms-laws.is-stills .ms-law-eq{display:flex}
.ms-laws.is-stills .ms-law .ms-howto-stage{display:none}

@media (max-width:860px){
  .ms-steps{grid-template-columns:1fr;gap:0}
  .ms-step{border-top:var(--ms-rule)}
  .ms-step[aria-pressed="true"]{border-top-color:var(--ms-text)}
  .ms-laws{grid-template-columns:1fr}
  .ms-law{padding:0 0 24px}
  .ms-law+.ms-law{border-left:0;border-top:var(--ms-rule);padding-top:24px}
  .ms-howto-stage{min-height:200px;padding:48px 16px}
}

@media (prefers-reduced-motion:reduce){
  /* The strip's own opacity is the crossfade between stills and must survive; everything that
     would move is stopped instead. */
  .ms-strip{transition:opacity .14s linear}
  .ms-sheet,.ms-seam,.ms-touch,.ms-howto .cell,.ms-step,.ms-step .ms-step-label{transition:none}
}