/* MOORSACHI Masters — card (brief §6). Master size 400×700; everything scales
   from the card's own width via container units: --u is one master-size pixel. */

.mcard{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:4/7;
  container-type:inline-size;
}
.mcard__stage{
  --u:calc(100cqw / 400);
  position:absolute; inset:0;
  padding:calc(14 * var(--u));
  background:var(--ground);
  perspective:calc(2400 * var(--u));
}
.mcard__inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform var(--dur) var(--ease);
}
.mcard.is-flipped .mcard__inner{ transform:rotateY(180deg); }

/* ---- faces ---------------------------------------------------------- */
.face{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:calc(16 * var(--u));
  background:var(--surface);
  border:1px solid var(--gold);
  border-radius:calc(12 * var(--u));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  color:var(--ink);
  overflow:hidden;
}
.face--teaching{ transform:rotateY(180deg); }

.meta{
  font-family:var(--font-meta);
  font-size:calc(10 * var(--u));
  line-height:1.3;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.numeral{
  font-family:var(--font-display);
  color:var(--gold);            /* gold: Roman numerals are sanctioned */
  font-weight:400;
  line-height:1;
}
.hairline{
  height:1px; border:0; margin:0;
  background:var(--gold);
  opacity:.6;
}
.seal{ flex:none; width:calc(30 * var(--u)); height:calc(30 * var(--u)); }
.seal--stances{ color:var(--seal-stances); }
.seal--gatekeepers{ color:var(--seal-gatekeepers); }
.seal--triad{ color:var(--seal-triad); }
.seal--court{ color:var(--seal-court); }
.seal--maat{ color:var(--seal-maat); }

/* Unwritten copy renders as itself, visibly — never as invented text. */
.is-placeholder{
  font-family:var(--font-meta) !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:calc(11 * var(--u)) !important;
  letter-spacing:.12em;
  color:var(--muted) !important;
}

/* ---- front ---------------------------------------------------------- */
.front__top{
  display:flex; align-items:center; gap:calc(10 * var(--u));
}
.front__top .numeral{ font-size:calc(26 * var(--u)); }
.front__top .meta{ flex:1; }
.front__window{
  margin-top:calc(12 * var(--u));
  height:calc(372 * var(--u));
  flex:none;
  background:var(--window);
  border:1px solid var(--hair-soft);
  border-radius:calc(6 * var(--u));
  overflow:hidden;
}
.front__window img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.front__position{ margin-top:calc(12 * var(--u)); }
.front__title{
  margin:calc(4 * var(--u)) 0 0;
  font-family:var(--font-display);
  font-size:calc(34 * var(--u));
  font-weight:400;
  font-variation-settings:'opsz' 72;
  line-height:1.05;
  letter-spacing:-.005em;
}
.front__name{
  margin:calc(4 * var(--u)) 0 0;
  font-family:var(--font-display);
  font-size:calc(16 * var(--u));
  font-style:italic;
  color:var(--muted);
}
.front .hairline{ margin:calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.front__principle{
  margin:0;
  font-family:var(--font-display);
  font-size:calc(21 * var(--u));
  font-style:italic;
  font-weight:300;
  line-height:1.25;
  color:var(--ink-2);
}
.face__footer{
  margin-top:auto;
  display:flex; justify-content:space-between; gap:calc(12 * var(--u));
  padding-top:calc(10 * var(--u));
}
.face__footer .meta{ white-space:nowrap; letter-spacing:.12em; }

/* ---- teaching ------------------------------------------------------- */
.teach__top{ display:flex; align-items:center; justify-content:space-between; gap:calc(10 * var(--u)); }
.teach__saying{
  margin:calc(22 * var(--u)) 0 0;
  font-family:var(--font-display);
  font-size:calc(29 * var(--u));
  font-style:italic;
  font-weight:300;
  line-height:1.18;
}
.teach .hairline{ margin:calc(18 * var(--u)) 0 calc(6 * var(--u)); }
.teach__rows{ margin:0; padding:0; list-style:none; }
.teach__row{
  display:grid;
  grid-template-columns:calc(34 * var(--u)) 1fr;
  column-gap:calc(8 * var(--u));
  padding:calc(9 * var(--u)) 0;
  border-bottom:1px solid var(--hair-soft);
}
.teach__row .numeral{ font-size:calc(18 * var(--u)); grid-row:span 2; padding-top:calc(1 * var(--u)); }
.teach__row .meta{ font-size:calc(9 * var(--u)); }
.teach__body{
  margin:calc(3 * var(--u)) 0 0;
  font-family:var(--font-display);
  font-size:calc(16 * var(--u));
  line-height:1.35;
  color:var(--ink-2);
}
.teach__beats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:calc(6 * var(--u));
  height:calc(84 * var(--u));
  margin:calc(12 * var(--u)) 0 0;
  padding:0; list-style:none;
}
.teach__beats li{
  display:grid; place-items:end start;
  padding:calc(6 * var(--u));
  background:var(--window);
  border:1px solid var(--hair-soft);
  border-radius:calc(4 * var(--u));
  overflow:hidden;
}
.teach__beats img{ width:100%; height:100%; object-fit:cover; }
.teach__beats .meta{ font-size:calc(8 * var(--u)); letter-spacing:.14em; }
.teach__unlock{ border-bottom:0; }

/* ---- back ----------------------------------------------------------- */
.face--back{
  align-items:center; justify-content:center; text-align:center;
  gap:calc(18 * var(--u));
}
.face--back::before{      /* second gold hairline: the double frame */
  content:""; position:absolute;
  inset:calc(8 * var(--u));
  border:1px solid var(--gold);
  border-radius:calc(7 * var(--u));
  pointer-events:none;
}
.back__word{
  margin:0;
  font-family:var(--font-display);
  font-size:calc(26 * var(--u));
  font-weight:400;
  letter-spacing:.42em;
  margin-right:-.42em;   /* optical centring against trailing tracking */
}
.back__emblem{ width:calc(260 * var(--u)); height:calc(260 * var(--u)); color:var(--gold); }
.back__line{
  margin:0;
  font-family:var(--font-display);
  font-size:calc(18 * var(--u));
  font-style:italic;
  font-weight:300;
  color:var(--ink-2);
}

/* ---- flip control --------------------------------------------------- */
/* The whole card is the target (≥44px everywhere), a real <button>. */
.mcard__flip{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0;
  background:transparent; border:0;
  border-radius:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mcard__flip:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ---- reduced motion: cross-fade, no 3D ------------------------------ */
@media (prefers-reduced-motion: reduce){
  .mcard__inner,
  .mcard.is-flipped .mcard__inner{ transform:none; transition:none; }
  .face--teaching{ transform:none; }
  .face{ transition:opacity 200ms linear; }
  .mcard .face--teaching{ opacity:0; }
  .mcard.is-flipped .face--front{ opacity:0; }
  .mcard.is-flipped .face--teaching{ opacity:1; }
}

/* ---- portrait reveal: crystallize into form -------------------------
   Sealed, then on hover (mouse) or tap: the seal withdraws, a gold
   hairline lattice draws over the portrait, its facets clear from the
   centre outward, and the painting resolves from blur into focus. The
   station text arrives last. No 3D, no glow; gold stays a hairline. */
.mcard--portrait .face--seal,
.mcard--portrait .face--portrait{ transition:opacity 420ms var(--ease); }
.mcard--portrait .face--portrait{ opacity:0; }
.mcard--portrait.is-revealed .face--seal{ opacity:0; transition-duration:260ms; }
.mcard--portrait.is-revealed .face--portrait{ opacity:1; }

.crystal{ position:relative; }
.crystal img{
  filter:blur(calc(14 * var(--u))) saturate(.35) brightness(.8);
  transform:scale(1.06);
  transition:filter 1100ms var(--ease) 180ms, transform 1400ms var(--ease) 180ms;
}
.mcard--portrait.is-revealed .crystal img{ filter:none; transform:none; }

.lattice{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.facet{
  fill:var(--window);
  stroke:var(--gold);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
  stroke-opacity:.55;
  stroke-dasharray:420;
  stroke-dashoffset:420;
  transform-box:fill-box;
  transform-origin:center;
  transition:
    stroke-dashoffset 560ms var(--ease),
    opacity 520ms var(--ease) var(--d),
    transform 620ms var(--ease) var(--d);
}
/* 1 · the lattice draws  2 · facets clear centre-out (per-facet --d) */
.mcard--portrait.is-revealed .facet{ stroke-dashoffset:0; opacity:0; transform:scale(.55); }
/* sealing is quick and simultaneous: the form withdraws rather than replaying */
.mcard--portrait:not(.is-revealed) .facet{ transition-duration:240ms; transition-delay:0ms; }

.face--portrait .arrive{ opacity:0; transform:translateY(calc(6 * var(--u))); transition:opacity 500ms var(--ease), transform 500ms var(--ease); }
.mcard--portrait.is-revealed .arrive{ opacity:1; transform:none; transition-delay:760ms; }
.mcard--portrait.is-revealed .front__title.arrive{ transition-delay:820ms; }
.mcard--portrait.is-revealed .front__principle.arrive{ transition-delay:900ms; }
.face--portrait .front__title{ font-size:calc(32 * var(--u)); }

@media (prefers-reduced-motion: reduce){
  .mcard--portrait .face--seal, .mcard--portrait .face--portrait,
  .crystal img, .face--portrait .arrive{ transition:opacity 200ms linear !important; transition-delay:0ms !important; }
  .crystal img, .mcard--portrait.is-revealed .crystal img{ filter:none; transform:none; }
  .facet{ display:none; }
  .face--portrait .arrive{ transform:none; }
}